@yamaday0uposted at 2021-03-07

リロードしても保持されたラジオボタンのチェック状態でViewを切り替えたい

Q&A

解決したいこと

Railsでgemのsimple calendarを使ったカレンダー表示機能を実装しています。
ラジオボタンとJavaScriptを使って、ラジオボタンをクリックすることによって月間・週間・カスタム日数の表示を切り替えられる機能を実装したのですが、
次のページに移る（ページを更新する）とデフォルトの月間カレンダーの表示に戻ってしまいます。

ページを更新しても、保持されたラジオボタンのチェック状態に応じてカレンダーの表示状態も保持されるようにするには
どのようにすればよいか、お知恵をお借りしたいです。

発生している問題・エラー

以下のようにweekのラジオボタンを選択しているときに次の週（ページ）に移動すると、一瞬週間カレンダーが読み込まれるのですが、
すぐにデフォルトの月間カレンダーに戻ってしまいます。
JavaScriptとscssの読み込み順が解決の糸口になると考えているのですが、その方法が見つかりません。

該当するソースコード

app/views/calendars/index.html.erb

<div class="content">

  <div class="my-page">
    <div class="calendar">

        <div id="month_calendar"><%# Default calendarデフォルト表記%>
          <%= month_calendar events:@calendars do |date, calendars| %>
            <%= date.day %>
            <% calendars.each do |calendar| %>
              <div class="schedule">
                <%= link_to "#{calendar.title}[#{calendar.start_time.strftime('%H:%M')}-#{calendar.end_time.strftime('%H:%M')}]", calendar_path(calendar.id) %>
              </div>
            <% end %>
          <% end %>
        </div>

        <div id="week_calendar"><%# scssでdisplay:noneの初期設定をしている %>
          <%= week_calendar events:@calendars do |date, calendars| %>
            <%= date.day %>
            <% calendars.each do |calendar| %>
              <div class="schedule">
                <%= link_to "#{calendar.title}[#{calendar.start_time.strftime('%H:%M')}-#{calendar.end_time.strftime('%H:%M')}]", calendar_path(calendar.id) %>
              </div>
            <% end %>
          <% end %>
        </div>

        <div id="custom_calendar"><%# scssでdisplay:noneの初期設定をしている %>
          <%= calendar events:@calendars do |date, calendars| %>
            <%= date.day %>
            <% calendars.each do |calendar| %>
              <div class="schedule">
                <%= link_to "#{calendar.title}[#{calendar.start_time.strftime('%H:%M')}-#{calendar.end_time.strftime('%H:%M')}]", calendar_path(calendar.id) %>
              </div>
            <% end %>
          <% end %>
        </div>

    </div>

    <div class="switch-calendar-wrap">
      <p>switch calendar</p>
      <div class="calendars">
        <%= radio_button_tag "calendar", "month"%>
        <%= label "calendar", "month" %>
        <%= radio_button_tag "calendar", "week" %>
        <%= label "calendar", "week" %>
        <%= radio_button_tag "calendar", "custom" %>
        <%= label "calendar", "custom" %>
      </div>
    </div>

  </div>
</div>

app/javascript/switch_calendar.js

const displayCalendar = () => {

  // 上記ビューの月間・週間・カスタムのそれぞれの要素を変数に代入
  const monthCalendarElement = document.getElementById("month_calendar");
  const weekCalendarElement = document.getElementById("week_calendar");
  const customCalendarElement = document.getElementById("custom_calendar");

  // 上記ビューの月間・週間・カスタムのそれぞれのラジオボタンの要素を変数に代入
  const monthCalendar = document.getElementById("calendar_month");
  const weekCalendar = document.getElementById("calendar_week");
  const customCalendar = document.getElementById("calendar_custom");
  console.log("switch calendar")

  const switchCalendar = () => {

    // どのラジオボタンにチェックが付いているかでどの要素のdisplayをblockにして、どれをnoneにするか指定
    if (monthCalendar.checked) {
      monthCalendarElement.style.display="block";
      weekCalendarElement.style.display="none";
      customCalendarElement.style.display="none";
      sessionStorage.setItem('month', monthCalendar.checked = "true");
      sessionStorage.removeItem('week');
      sessionStorage.removeItem('custom');
    }else if(weekCalendar.checked) {
      monthCalendarElement.style.display="none";
      weekCalendarElement.style.display="block";
      customCalendarElement.style.display="none";
      sessionStorage.setItem('week', weekCalendar.checked = "true");
      sessionStorage.removeItem('month');
      sessionStorage.removeItem('custom');
    }else if (customCalendar.checked) {
      monthCalendarElement.style.display="none";
      weekCalendarElement.style.display="none";
      customCalendarElement.style.display="block";
      sessionStorage.setItem('custom', customCalendar.checked = "true");
      sessionStorage.removeItem('month');
      sessionStorage.removeItem('week');
    }
  }
  window.addEventListener("click", switchCalendar);
  window.addEventListener("load", switchCalendar);
} 
window.addEventListener("load", displayCalendar);

自分で試したこと

scssで月間カレンダーにもdisplay:noneを初期設定して完全にラジオボタンのチェック状態でどのカレンダーが表示されるのか操作できるようにしてみたり、
上記のjsファイルに記述していますが、window.addEventListener("load", switchCalendar)を記述して読み込み時にもラジオボタンのチェック状態が保持されるようにしてみましたが結果は変わらずでした。

Are you sure you want to delete the question?