【Vue.js】FullCalendarを使ってカレンダーを実装してみた。

Vue.jsのFullCalendarを使ってカレンダーを実装してみた。

まずは、head内にfullcalendarのcssとjsを読み込む。今回は、一番簡単なCDNでの読み込み方法を記載しておく。

デモ

https://officetakec.com/sample_page/vue_js_calendar.html

外部ファイル読み込み

<link href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.8.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.8.0/main.min.js'></script>

HTML

カレンダーを表示したい箇所に下記のコードを埋め込む

<div id='calendar'></div>

Vue.js(JavaScript)

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',//フリートライアル（エラー表示消す）
          locale: "ja-JP",//日本語で表示
          initialView: "customWeek",
          views: {
            customWeek: {
              type: "resourceTimeline",
              duration: { weeks: 1 },
              slotDuration: { days: 1 },
            },
          },
          timeZone: "Asia/Tokyo",
          aspectRatio: 1.5,
          headerToolbar: {
            left: "prev,next",
            center: "title",
            right: "today",
          },
          resourceAreaHeaderContent: " ",
          resources: this.resources,
          resources: [
            { id: "1", title: '<img src="img/item01.jpg" alt="">'},
            { id: "2", title: '<img src="img/item02.jpg" alt="">'},
            { id: "3", title: '<img src="img/item03.jpg" alt="">'},
            { id: "4", title: '<img src="img/item04.jpg" alt="">'},
            { id: "5", title: '<img src="img/item05.jpg" alt="">'},
            { id: "6", title: '<img src="img/item06.jpg" alt="">'},
          ],
          events: [
            { id: '1', resourceId: '1', start: '2021-07-05', end: '2021-07-07', title: '<span>イベントタイトル1</span>'},
            { id: '2', resourceId: '2', start: '2021-07-05', end: '2021-07-09', title: '<span>イベントタイトル2</span>'},
            { id: '3', resourceId: '3', start: '2021-06-28', end: '2021-08-01', title: '<span>イベントタイトル3</span>' },
            { id: '4', resourceId: '4', start: '2021-06-30', end: '2021-10-01', title: '<span>イベントタイトル4</span>' },
            { id: '5', resourceId: '5', start: '2021-07-05', end: '2021-07-010', title: '<span>イベントタイトル5</span>'},
            { id: '6', resourceId: '6', start: '2021-07-05', end: '2021-07-20', title: '<span>イベントタイトル6</span>' },
          ],
          resourceLabelContent: function(arg) {
            let spanEl  = document.createElement('span')
            let resHtml = arg.resource.extendedProps['resourceHtml'];

            if (arg.resource.extendedProps.isResourceHtml) {
              spanEål .innerHTML = resHtml
            } else {
              spanEl .innerHTML = arg.resource.title
            }
            let arrayOfDomNodesLabelContent = [ spanEl ]
            return { domNodes: arrayOfDomNodesLabelContent }
          },
          eventContent: function(arg) {
            let divEl = document.createElement('div')
            let htmlTitle = arg.event._def.extendedProps['html'];
            if (arg.event.extendedProps.isHTML) {
              divEl.innerHTML = htmlTitle
            } else {
              divEl.innerHTML = arg.event.title
            }
            let arrayOfDomNodes = [ divEl ]
            return { domNodes: arrayOfDomNodes }
          }
        });
        calendar.render();
      });