ROOKの異なる二つのカレンダーを横並び表示させる

下記のような、ROOKの異なる二つのカレンダーを横並び表示させたい際の対応方法。

実装サイト：https://www.sasuigetafood.com/shop.html

実装手順

カレンダーパーツではなく、フリーエリアパーツに下記のようなソースを記述。

<script>
  function calendarViewLoad(element) {
    var jParts = getCalendarPartsFrame(element);
    var jList = jParts.find(".calendarView_list");
    if (jList.children().size()) {
      return;
    }
    getCalendarViewFromServer(jParts);
  }

  function getCalendarViewFromServer(jParts) {
    var blockWidth = jParts.parent().width();
    var editValue = jParts.find(".edit_value");
    var jList = jParts.find(".calendarView_list");
    $(function () {
      ajaxRequest(
        getHost() + "/ajax/calendarview/index",
        {
          calendarId: editValue.find("input[name=calendarId]").val(),
          period: editValue.find("input[name=period]").val(),
          type: editValue.find("input[name=type]").val(),
          offset: editValue.find("input[name=offset]").val(),
          blockWidth: blockWidth,
        },
        function (data) {
          jList.empty();
          jList.append(data.contents);
          editValue.find("input[name=offset]").val(data.offset);
        }
      );
    });
  }

  function moveMonthCalendar(element, add) {
    var jParts = getCalendarPartsFrame(element);
    var offset = jParts.find(".edit_value input[name=offset]");
    offset.val(parseInt(offset.val()) + parseInt(add));
    getCalendarViewFromServer(jParts);
  }

  function nextMonthCalendar(element) {
    moveMonthCalendar(element, 1);
  }

  function prevMonthCalendar(element) {
    moveMonthCalendar(element, -1);
  }

  function getCalendarPartsFrame(element) {
    return $(element).closest("div[class^=cal_]");
  }
</script>
<section>
  <div class="container gutters">
    <div class="row">
      <div class="col span_6">
        <div class="cal_7">
          <div class="edit_value"><input name="calendarId" type="hidden" value="1"> <input name="period" type="hidden" value="1"> <input name="type" type="hidden" value="3"> <input name="offset" type="hidden" value="0"></div>
          <div class="calendarView_list">&nbsp;</div>
          <img class="ajax_src_onload" height="1px" onload="calendarViewLoad(this);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAAElFTkSuQmCC" width="1px">
        </div>
      </div>
      <div class="col span_6">
        <div class="cal_7">
          <div class="edit_value"><input name="calendarId" type="hidden" value="2"> <input name="period" type="hidden" value="1"> <input name="type" type="hidden" value="3"> <input name="offset" type="hidden" value="0"></div>
          <div class="calendarView_list">&nbsp;</div>
          <img class="ajax_src_onload" height="1px" onload="calendarViewLoad(this);" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAAElFTkSuQmCC" width="1px">
        </div>
      </div>
    </div>
  </div>
</section>

仕組みとしては、ajaxにてカレンダーを取得し、表示している。

<input name="calendarId" type="hidden" value="1">

表示するカレンダーの変更は、上記のvalue属性の値を変更することで可能。

恐らく、1が「カレンダーA」、2が「カレンダーB」、3が「カレンダーC」である。