kintoneでAPIデータをカレンダー表示する方法 | FullCalendarを使ったアプリ開発ガイド

https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js

https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css

(function() {
  'use strict';

  // レコード一覧表示時にカレンダーを表示するイベント
  kintone.events.on('app.record.index.show', function(event) {
    // カレンダーが既に存在する場合は再生成しない
    if (document.getElementById('calendar')) {
      return;
    }

    // カレンダーを表示するためのdiv要素を作成
    const calendarDiv = document.createElement('div');
    calendarDiv.id = 'calendar';
    calendarDiv.style = 'width: 100%; max-width: 800px; margin: auto; padding: 20px 0;'; // カレンダーのスタイルを設定

    // 一覧の下にカレンダーを表示
    const listSpace = kintone.app.getHeaderSpaceElement();
    if (listSpace) {
      listSpace.appendChild(calendarDiv); // ヘッダーエリアの下にカレンダーを追加
    }
    // FullCalendarを初期化して表示
    const calendar = new FullCalendar.Calendar(calendarDiv, {
      initialView: 'dayGridMonth',  // 月間表示
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      events: []  // APIから取得したデータを後で追加
    });

    // カレンダーをレンダリング
    calendar.render();

    // kintone APIからデータを取得してカレンダーに表示
    const appId = kintone.app.getId();  // アプリIDを取得
    const apiUrl = `https://{your-subdomain}.cybozu.com/k/v1/records.json?app=${appId}`;
    const apiToken = '{your-api-token}';  // 取得したAPIトークンをここに記入

    // kintone APIからレコードを取得
    fetch(apiUrl, {
      method: 'GET',
      headers: {
        'X-Cybozu-API-Token': apiToken
      }
    })
      .then(response => response.json())
      .then(data => {
        // 取得したデータをFullCalendarのイベント形式に変換
        const events = data.records.map(record => {
          return {
            title: record.案件名.value,  // イベント名として案件名を使用
            start: record.開始日時.value,  // 開始日時
            end: record.終了日時.value,  // 終了日時
            allDay: true  // 終日イベントとして扱う
          };
        });

        // カレンダーにイベントを追加
        events.forEach(event => {
          calendar.addEvent(event);
        });
      })
      .catch(error => {
        console.error('Error fetching records:', error);
      });

    return event;
  });
})();