【食事内容管理Webアプリ】カレンダー作成①

2024.06.18

今回から表示画面の作成に取り掛かります。表示画面ではカレンダーが大部分を占めるため、まずカレンダーの作り方について学んでいきます。

イチから自分で作ることも考えたのですが、だいぶ時間がかかりそうだったので食事内容管理Webアプリでは「Full Calendar」を使用してカレンダーを作成することにしました。

Full Calendarとは？

Full Calendarはカレンダーを生成してくれるJavaScriptライブラリです。一部有料の機能もありますが、無料で使用できる機能が多数あります。

公式ホームページにあるデモが持っていたイメージに近く、簡単に実装できるとのことだったので今回はFull Calendarを採用しました。

カレンダーの作成方法

今回の記事ではカレンダーとそのメニューの追加を実装目標として進めます。まず一番シンプルなカレンダーを出力してみます。公式ホームページのInitialize with Script Tagsページに記載されている下記のコードをhtmlファイルとして保存後、ウェブブラウザで表示しました。

HTML
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.13/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

ウェブブラウザで表示すると下図のようになります。

上記の記述を簡潔にするため、htmlとJavaScriptの記述を下記のように分けました。このときにlangはja(日本語)に変更し、JavaScriptはhtmlと同じフォルダにeditcalendar.jsという名前で保存しました。

HTML
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js'></script>
    <script src='./editcalendar.js'></script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
    calendar.render();
});

htmlに注目してみると、カレンダーを表示するのに実際に必要なのは9行目のid=’calendar’をもつdivタグひとつということがわかりました。とても簡単ですね。

またFull Calendarではカレンダーの機能追加・変更を行う際にhtmlを編集することは少なく、ほとんどJavaScriptの編集となるようです。なのでここからはJavaScriptの記述に注目していきます。

カレンダーの機能追加・変更

まずデモで使用されている内容を簡単に理解して、そのあと一部を変更してみます。

JavaScriptの記述理解

1行目は処理の実行タイミングを指定しているようです。DOMContentLoadedを指定しているので、DOM読み込み後に処理が実行されます。

2行目は文字通り要素を取得していますね。今回はid=’calendar’が設定されているdivタグを取得しています。

3〜5行目はFull Calendarで用意されているインスタンスを生成する記述となっています。第一引数には2行目で取得した要素が渡されていますね。第二引数にはJavaScriptオブジェクト(中括弧で囲われた部分)が渡されています。例ではinitialViewというプロパティにdayGridMonthという値を渡しているようです。

ではこの値を変えてみましょう。

プロパティ値の変更

JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek'
  });
    calendar.render();
});

dayGridMonthをtimeGridWeekに変更してみました。すると表示は下図のようになりました。どうやらカレンダーの機能追加・変更はこの第二引数によって設定するようですね。

では次にプロパティの追加をしてみましょう。

プロパティの追加

使用できるプロパティや関数は公式ホームページのDocumentationページに記載がありました。機能によってページ分けされているので用途に応じたページを確認しに行けば良さそうです。

今回はカレンダーにイベントを追加しようと思うので、Event Modelページを確認します。プロパティにてイベントを追加する場合、JavaScriptの記述は下記のようになるようです。

JavaScript
var calendar = new Calendar(calendarEl, {
  events: [
    {
      // イベント用のプロパティ・コールバック関数の記述場所
    }
  ]
})

Event Modelページから飛べる各ページについての調査はまた別の記事で行うとして、一旦はイベントのタイトル(メニュー名)と背景色をつけるところまで実装しました。実装後のeditcalendar.jsと画面出力は以下の通りです。

JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    events: [
      {
        title: 'カレー',
        start: '2024-06-01',
        backgroundColor: 'blue'
      },
      {
        title: 'ハンバーガー',
        start: '2024-06-15',
        backgroundColor: 'orange'
      }
    ]
  });
    calendar.render();
});

6/1と6/15にメニューの追加ができました！見た目だけですがイメージに近いものになりましたね。

今後の予定

今回はカレンダーの表示とメニューの追加を行いました。ただメニューの追加についてはJavaScriptにべた書き状態になっているため、次回はこれを動的に変更できるようにしたいです。Full Calendarにはまだまだたくさん機能があるため、今後も調べながら進めていきたいと思います。

今日の夕飯は牛丼です。それではまた。。

コメント

タイトルとURLをコピーしました