kintoneカレンダーに月・週・日のビュー切替機能を実装

kintone標準カレンダーの「月表示だけじゃ物足りない」を解消！
外部ライブラリのFullCalendarを用いたカスタマイズで、”使えるスケジュール管理”を作りましょう。

📅 kintoneのカレンダービューに不満はありませんか？

kintoneのカレンダービューはとても便利な機能ですが、実際に社内でスケジュール管理や予定共有に使おうとすると「月表示だけで、週や日単位で見たい時に切り替えられない…」「予定日や予定時間をドラッグ＆ドロップで変更することができない…」、という不満をの声をよく耳にします。

これらの機能拡張は、Javascriptで外部ライブラリのFullCalendarを使えば、実現が可能です。
FullCalendarは、Googleカレンダーのような直感的なUIが作れるオープンソースライブラリです。

📅 FullCalendarのオプション設定

FullCalendarは、多くのオプション設定項目がありますが、よく使われるオプションの説明と使用例は、以下の通りです。

オプション名	型	説明	使用例
`initialView`	string	初期表示ビューのタイプ（`dayGridMonth`など）	`initialView: 'timeGridWeek'`
`initialDate`	string／Date	初期表示年月日（省略時は当日）	`initialDate: '2025-07-20'`
`locale`	string	表示言語設定（例：日本語 `'ja'`）	`locale: 'ja'`
`headerToolbar`	object	ヘッダー部ツールバーのボタン配置	`headerToolbar: {left: 'prev,next today', center: 'title', right: 'dayGridMonth,listMonth'}`
`footerToolbar`	object	フッター部ツールバー配置（上記と同様設定可能）	例：月切替等を設置
`height`／`contentHeight`／`aspectRatio`	number/string	カレンダーの高さまたは縦横比	`height: 'auto'`,`aspectRatio: 1.35`
`firstDay`	number	週の起点（0＝日曜、1＝月曜など）	`firstDay: 1`
`weekends`	boolean	土日の表示切替	`weekends: false`
`fixedWeekCount`	boolean	月表示における必ず6週表示の有無	`fixedWeekCount: true`
`showNonCurrentDates`	boolean	他月の日付をグレー表示するか	`showNonCurrentDates: false`
`slotDuration`, `slotMinTime`, `slotMaxTime`	Duration / string	時間軸ビューの時間スロット設定	`slotMinTime: '08:00:00', slotMaxTime: '18:00:00'`
`businessHours`	boolean／object	勤務時間帯や休日を背景表示	`businessHours: true`
`editable`	boolean	イベントのドラッグやリサイズを許可	`editable: true`
`navLinks`	boolean	日付／見出しクリックでビュー遷移可能に	`navLinks: true`
`events`	Array／URL／func	表示するイベントのリストや取得元	`events: '/api/events'`／配列／関数
`eventSources`	Array	複数のイベントソース設定	Googleカレンダーとユーザーイベントなど
`eventTimeFormat`	object	イベント時刻の表示フォーマット	`eventTimeFormat: {hour: '2-digit', minute: '2-digit'}`
`displayEventTime`	boolean	イベント詳細表示で時刻を表示するか	`displayEventTime: false`
`dateClick`	func	日付セルクリック時のコールバック	`dateClick: function(e){…}`
`eventClick`	func	イベントクリック時のコールバック	`eventClick: function(e){…}`
`eventDidMount`	func	DOM にイベント要素が配置された後のフック	`eventDidMount: (info)=>{…}`
`views`	object	ビュー毎の個別オプション設定	月ビューと週ビューで異なる設定可
`getOption()`／`setOption()`	メソッド	カレンダー起動後の設定読み書き	`calendar.setOption('locale','en');`

📚 FullCalendarの設定例

以下のコードは、HTMLファイルで記述したFullCalendar（V6系）の設定例です。

必要なライブラリの読込アドレスと、<SCRIPT>～</SCRIPT>の部分を、kintoneのカスタマイズJS作成の参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>FullCalendarの基本仕様</title>
  
  <!-- FullCalendar CSS -->
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet">
  
  <!-- FullCalendar JS -->
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>

  <!-- 日本語ロケール -->
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/locales/ja.global.min.js"></script>
  
</head>
<body>

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

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'ja',
        initialView: 'dayGridMonth',
        initialDate: '2025-07-20',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        height: 'auto',
        firstDay: 1,
        weekends: true,
        editable: true,
        navLinks: true,
        businessHours: true,
        events: '/api/events',
        dateClick: (arg) => console.log(arg.dateStr),
        eventClick: (info) => alert(info.event.title),
        views: {
          timeGridWeek: { slotMinTime: '08:00:00', slotMaxTime: '18:00:00' }
        }
      });
      calendar.render();
    });
  </script>

</body>
</html>

🔨 自分でカスタマイズに挑戦してみたい方へ

以下のNote記事でカスタマイズ事例とソースコードを紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。

「note:アプリ活用研究会（キン活）」は、当サイトのメンバーが執筆しています。

kintoneのカレンダーに月・週・日表示UIを実装する｜アプリ活用研究会（キン活）

やりたいこと kintoneアプリで「月・週・日の表示切替」が出来るカレンダービューを実装したい。kintoneの標準機能でもカレンダービューはありますが、表示形式が月表示のみ、２日以上の予定を連続表示できない等、他社製カレンダーのサービスと比較すると機能面で少し見劣りします。そこで、kintoneアプリと組み合わせて使える、外部カレンダーライブラリで、カスタムなカレンダービューを作成してみました。カレンダーライブラリ：FullCalendar FullCalendarと...

🧩 FullCalendar機能プラグインの紹介

Javascriptカスタマイズは難しそう・・・と思っているあなたに嬉しいお知らせです！

FullCalendar版の「カレンダープラグイン」がcybozu developer networkで無料公開されています。
※最終更新日：2023年11月9日、FullCalendarの対応バージョンは、V2.7.3です。

イベントカレンダープラグイン

kintoneの一覧画面で、FullCalendarライブラリを使用したイベントカレンダーを閲覧・作成できるプラグインです。

上記のプラグインを導入すれば、kintoneのカレンダーで以下の機能が実現できます。

月・週・日表示をワンクリックで切り替え
スケジュールをドラッグ＆ドロップで移動
プロセス管理のステータスで背景色の変更が可能

💻 プラグイン導入後のデモ画面

実際に、上記のプラグインを導入した後のカレンダー表示のデモ画面です。
右上のボタンで月・週・日のビュー切り替えが可能で、予定もドラッグ&ドロップで変更出来ます。

🏫 kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます！
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート（3種類まで）と３か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📅 祝日表示カレンダープラグインのご紹介

FullCalendarの最新バージョンV6.1.15対応で祝日も表示できるカレンダープラグインを開発しました。
※本プラグインは、当社のkintoneサポート契約先専用の商品です。

【主な機能】

日本の祝日を判定して祝日名を表示します
プラグイン設定画面で会社独自の休日も指定可能
月・週・日のビューの切替表示が可能
ドラッグ&ドロップで予定日や時間帯の変更が可能
プロセス管理を有効にすれば、ステータスで色を変更可能

📣カスタマイズ・導入支援いたします！

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください！

お問い合わせはこちらからどうぞ！

#kintone #Javascript #カスタマイズ #カレンダー

Tips