FullCalendarの利用方法

本記事では、FullCalendarの利用方法を解説しています。

JavaScriptとPHPのシンプルなサンプルで、色々なカスタマイズを記載していますので、

ぜひ、参考にしてみてください。

インストール
イベントの設定
イベントの同期設定
ロケール設定
スクロールの非表示
公式サイト

インストール

下記の公式サイトから、バージョンを指定して、ライブラリをダウンロードします。

FullCalendar - JavaScript Event Calendar

※v5系は、イベント関係の処理が大きく変わっています。
※v4系の方が、イベントまわりについては、過去のサンプルを流用しやすいです。

手動の場合には、ダウンロードしたファイルを、js、cssファイルに置きます。
npmを利用できる場合には、下記のコマンドを実行してインストールします。

npm install fullcalendar

1	npm install fullcalendar

イベントの設定

最初に、カレンダーに表示するイベントの設定を行います。
イメージとしては、下記のカレンダーのイベント設定になります。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <link href='../lib/main.css' rel='stylesheet' />
  <script src='../lib/main.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
  
      var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'ja',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        buttonText: {
            today: '今月',
            month: '月',
            week: '週',
            day: '日'
          },
        initialDate: '2021-02-06',
        navLinks: true, // can click day/week names to navigate views
        businessHours: true, // display business hours
        editable: true,
        selectable: true,
        events: [
          {
            title: '打ち合わせ',
            start: '2021-02-02',
            allDay : true,
            constraint: '予定１',
            color: '#257e4a',
          },
          {
              title: '打ち合わせ',
              start: '2021-02-04',
              allDay : true,
              constraint: '予定１',
              color: '#257e4a',
            },
          {
            title: '研修',
            start: '2021-02-08',
            end: '2021-02-10',
            color: 'orange'
          },
          {
              title: '打ち合わせ',
              start: '2021-02-12T10:00:00',
              end: '2021-02-12T12:00:00',
              color: '#257e4a'
            },
          {
            title: '重要',
            start: '2021-02-16',
            color: 'yellow',
            display: 'background'
          },
          {
            title: '訪問',
            start: '2021-02-24',
            allDay : true,
            color: 'red',
          },
        ],
      });
  
      calendar.render();
    });
  </script>
  </style>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

locale: 'ja',

headerToolbar: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

buttonText: {

today: '今月',

month: '月',

week: '週',

day: '日'

initialDate: '2021-02-06',

navLinks: true, // can click day/week names to navigate views

businessHours: true, // display business hours

editable: true,

selectable: true,

events: [

{

title: '打ち合わせ',

start: '2021-02-02',

allDay : true,

constraint: '予定１',

color: '#257e4a',

{

title: '打ち合わせ',

start: '2021-02-04',

allDay : true,

constraint: '予定１',

color: '#257e4a',

{

title: '研修',

start: '2021-02-08',

end: '2021-02-10',

color: 'orange'

{

title: '打ち合わせ',

start: '2021-02-12T10:00:00',

end: '2021-02-12T12:00:00',

color: '#257e4a'

{

title: '重要',

start: '2021-02-16',

color: 'yellow',

display: 'background'

{

title: '訪問',

start: '2021-02-24',

allDay : true,

color: 'red',

});

calendar.render();

});

</script>

</style>

</head>

<body>

</body>

</html>

イベントの同期設定

イベントを動的に取得する場合には、eventsに取得先のURLを設定します。

start、endは、リクエストパラメータが付与されてきます。

events: '/cm/schedules/getEventData'

1	events: '/cm/schedules/getEventData'

ロケール設定

ロケールを設定する場合には、下記の設定を追加します。

locale: 'ja'

1	locale: 'ja'

スクロールの非表示

カレンダーに表示されるスクロールを非表示にする場合には、スタイルシートで対応する方法が一番簡単です。
スタイルシートには、下記の設定を追加します。

  .fc-scroller {
    overflow-y: hidden !important;
  }

.fc-scroller {

overflow-y: hidden !important;

}

公式サイト

FullCalendar - JavaScript Event Calendar