煮込みハンバーグの日をカレンダー上に可視化する

はじめに

日本食研のCMによれば「2と5のつく日は煮込みハンバーグの日」とのこと．

www.youtube.com

今回はWebページにカレンダーを埋め込み，そこに煮込みハンバーグの日を表示してみたい．

使用技術

カレンダーの表示にはFullCalendarを用いる．

fullcalendar.io

zenn.dev

煮込みハンバーグの日は毎月発生するが，このライブラリ単体では繰り返し発生するイベントを簡潔に記述できないという弱点がある．そこで，繰り返しイベントを柔軟に記述できるRRuleというライブラリを用いた．

fullcalendar.io

github.com

akhtikd.com

RRuleの記法についての不明点は以下を読めばだいたい解決するはず．

datatracker.ietf.org

作成したカレンダーとソースコード

そのままブログに載せるとユーザCSSと衝突してうまく描画できなかったため，iframeで埋め込んでいる．

<div id="calendar"></div>

<!-- FullCalendar -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
<!-- RRule -->
<script src='https://cdn.jsdelivr.net/npm/rrule@2.6.4/dist/es5/rrule.min.js'></script>
<!-- RRule to FullCalendar connector -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@6.1.8/index.global.min.js'></script>

<script>
  const days_2or5 = [];
  for (let day = 1; day <= 31; ++day) {
    if (String(day).match(/[25]/)) days_2or5.push(day);
  }

  const calArea = document.getElementById('calendar');
  const cal = new FullCalendar.Calendar(calArea, {
    initialView: 'dayGridMonth', // type of calendar
    events: [{
      title: '煮込みハンバーグの日',
      rrule: {
        freq: 'monthly',
        dtstart: '2000-01-01',
        bymonthday: days_2or5 // day2, 5, 12, 15, ... for every month
      }
    }]
  });

  cal.render(); // display calendar
</script>