Railsで定義した変数をJSのclickイベントで変更したい

Question

前提・実現したいこと

githubのcontributionsの部分を自作しております。

↓github

↓自作

発生している問題・エラーメッセージ

Railsで定義した変数をJSのclickイベントで変更したいのですがやり方がわかりません。

具体的には上の写真で、
前の年を押したら2018年に、次の年を押したら2020年に、
その下の１〜１２のボタンを押したらその月になるようにしたいです。
（まだCSSを組んでおらず見にくく申し訳ありません）

JSだけでならできるのですが、Githubのようにコミット数で（自分の場合は写真のカレンダー上にあるツイートから持ってきた学習時間数によって）その日の色を変えたいため、
RailsとJSのバックとフロントの変数の繋げ方がわからず行き詰まっております。

該当のソースコード

<% today = Time.current %>
<% thisYear = today.strftime("%Y") %>
<% thisMonth = today.strftime("%m") %>
<% thisDay = today.strftime("%d") %>
<% weeks = ['日', '月', '火', '水', '木', '金', '土'] %>

<%# 今月からmヶ月前 %>
<% m = 0 %>
<%# // 月の最初の日を取得 %>
<% startDate = today.ago(m.month).beginning_of_month %> 
<%# // 月の最後の日を取得 %>
<% endDate = today.ago(m.month).end_of_month %> 
<%# // 月の末日 %>
<% endDayCount = endDate.strftime("%d")%> 
<%# // 月の最初の日の曜日を取得 %>
<% startDay = startDate.wday %> 
<%# // 日にちのカウント %>
<% dayCount = 0 %> 


<table>
  <caption class="title">学習カレンダー</caption>
  <button id="prev" type="button">前の年</button>
  <caption class="year_month"><%= today.ago(m.month).strftime("%Y年%m月") %></caption>
  <button id="next" type="button">次の年</button><br>
  <% for i in 1..12 do%>
  <button><%= i %></button>
  <% end %>
  <tr>
    <% for j in 0..6 do %>
    <th><%= weeks[j] %></th>
    <% end %>
  </tr>

  <% for w in 0..5 do %>
    <tr>
    <% for d in 0..6 do %>
      <% if (w == 0 && d < startDay.to_f) %>
        <%# // 1行目で1日の曜日の前 %>
        <td>0</td>
      <% elsif (dayCount > endDayCount.to_f-1) %>
        <%# // 末尾の日数を超えた %>
        <td>0</td>
      <% else %>
        <td>
          <p class="day"><%= startDate.since(dayCount.days).strftime("%-d日") %></p>
          <p class="hours">
            <% sum = 0 %>
            <% @posts.each do |post| %>
              <% if post.created_at.strftime("%Y%m%d") == startDate.since(dayCount.days).strftime("%Y%m%d") %>
              <% sum += post.hours.to_f %>
              <% end %>
            <% end %>
            <%= sum.to_f %>
          </p><span>時間</span>
        </td>
        <% dayCount += 1 %>
      <% end %>
    <% end %>
    </tr>
  <% end %>
</table>

試したこと

gemのgonや<%== JSON.dump() %>などを使ってみたのですが上手くいきませんでした。
https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296

補足情報（FW/ツールのバージョンなど）

プログラミング自体Progateなどを使って独学しているためコードの書き方ももおかしいかもしれません。
html.erbにベタ書きしているのも間違っているかもしれません。。
コードにおかしなところがあったら教えていただけると幸いです。

Answer 1

JSだけでならできるのですが

これは，カレンダーの月or年をクリックしたらその月or年のカレンダーを表示するのはできる，ということで大丈夫でしょうか…？

色の付け方については,htmlerbの

<td>
  <p class="day">
〜省略〜
 </p><span>時間</span>
</td>

の部分を

<% @posts.each do |post| %>
  <% if post.created_at.strftime("%Y%m%d") == startDate.since(dayCount.days).strftime("%Y%m%d") %>
    <% sum = post.hours.to_f %>
  <% else %>
    <% sum = 0 %>
  <% end %>

  <% if sum>10 %> 
   <% color="red" %>
  <% eisif sum<=10 && sum>5 %>
   <% color="yellow" %>
  <% eise %>
   <% color="blue" %>
  <% end %>

  <td class=color>
    <p class="day"><%= startDate.since(dayCount.days).strftime("%-d日") %></p>
    <p class="hours">
      <%= sum.to_f %>
    </p><span>時間</span>
  </td>
<% end %>

というようにして，cssでclass="red"，class="yellow",class="blue"の設定をしたらどうでしょうか？