Googleカレンダーのようなカレンダーを自前で実装できるFullCalendar.jsの使い方を実際に使った機能だけまとめました。
使用バージョン
FullCalendar.js v6.1.11
fullcalendar.io
設定項目（全体）
<div id="calendar"></div>
const $calendar = document.getElementById('calendar'); const calendar = new FullCalendar.calendar($calendar, { // ライセンスキー schedulerLicenseKey: '購入した場合にライセンスキーをここに書く', // 日本語設定 locale: 'ja', // 編集可 editable: true, // ドロップ可 droppable: true, // ヘッダーカスタムボタン customButtons: { // 作成ボタン createButton: { text: '予定・タスクの作成', click: function() { } } }, // 最大表示イベント数（最大値を超えた部分は「+more」で表示） eventMaxStack: 5, // 日表示時の最大表示イベント数（最大値を超えた部分は「+more」で表示） dayMaxEvents: 5, // イベント表示順 eventOrder: 'type, id', // イベント events: { url: `/api/schedule/`, method: 'POST', extraParams: () => { } failure: (error) => { console.log(error); } }, // イベントの時間フォーマット eventTimeFormat: { hour: 'numeric', minute: '2-digit', meridiem: false }, // イベントドロップ制御 eventAllow: (info, event) => {}, // イベントドロップ eventDrop: (info) => {}, // イベントリサイズ eventResize: (info) => {}, // イベント内容 eventDidMount: (info) => {}, // イベントクリック eventClick: (info) => {}, // カレンダー内日付・時間枠クリック dateClick: (info) => {}, // +moreリンク moreLinkContent: (e) => {}, // +moreリンク描画後 moreLinkDidMount: (e) => {}, // 初期カレンダータイプ initialView: 'dayGridMonth', // ビューごとの設定 views: { dayGridMonth: { dayMaxEventRows: 5 } }, // カレンダー表示領域の高さ contentHeight: 815, // 時間帯までのスクロール位置 scrollTime: '06:00:00', // 週始まり firstDay: 1, // 月曜開始 // 日コンテンツ dayCellContent: function(e) { return e.dayNumberText.replace("日", ""); }, // ヘッダーボタン headerToolbar: { left: 'createButton', center: 'prev title next', right: 'timeGridWeek,timeGridDay,dayGridMonth' }, // ヘッダーボタンテキスト buttonText: { week: '週', day: '日', month: '月' }, // 終日テキスト allDayText: '', // スロットコンテンツ slotLabelContent: function(arg) { return arg.date.getHours(); }, // 日ヘッダー描画後 dayHeaderDidMount: (e) => {}, // 日付設定後 datesSet: (dateInfo) => {}, });
設定項目詳細
個別に公式リンクを貼っていますが、バージョンアップされて消えた項目はページがなくなるのでご注意ください。
また、マイナーバージョンアップでも大幅に変更される項目もあります。
schedulerLicenseKey
購入したライセンスキーを設定します。
これを設定するとカレンダー下部の未ライセンス時の表示が消えます。
editable（default: false）
カレンダー上でイベントを変更できるか設定します。
変更可能はtrue、変更不可はfalseです。
droppable（default: false）
外部のドラッグ可能な要素または他のカレンダーのイベントをカレンダーにドロップできるか設定します。
customButtons
ヘッダーまたはフッターツールバー内に表示させる任意にカスタムボタンを定義します。
設定可能なプロパティ
- text: ボタン内のテキスト
- hint: ヒント
- click: クリック時の処理
- icon: アイコン
- bootstrapFontAwesome: Bootstrapテーマが有効なときのアイコン
eventMaxStack（default: null）
timeLineView：上から下に積み重ねられるイベントの最大数
timeGridView：左から右に積み重ねられるイベントの最大数
最大数を超える部分は、「+more」等で表示され、押下でポップアップ表示されます。
dayMaxEvents
dayGridView：上から下に積み重ねられるイベントの最大数
最大数を超える部分は、「+more」等で表示され、押下でポップアップ表示されます。
eventOrder（default: 'start,-duration,allDay,title'）
同日内でのイベントの並び順を設定します。
イベント内のプロパティ名を指定します。
指定プロパティ名の先頭に「-」をつけると降順となります。
events（as a json feed）
カレンダーに設定するイベントを定義します。
イベント設定は、主に固定値・APIから取得の2種類になるかと思います。
基本的には、APIから取得すると思うので以下の定義でイベントを取得します。
events: { url: `{APIのURL}`, method: '{GET、POST等}', extraParams: () => { // APIに対してパラメータがある場合は、key: valueの形式で書く } failure: (error) => { console.log(error); } }
eventTimeFormat
イベントの時間フォーマットを設定します。
以下は、「7:00、10:00」のような形式の設定方法です。
eventTimeFormat: { hour: 'numeric', minute: '2-digit', meridiem: false },
eventAllow(eventDropInfo, event）
イベントのドロップ先を制御します。
第1引数：ドロップ先情報
第2引数：イベント情報
戻り値：ドロップ可能はtrue、ドロップ不可はfalse
eventResize(eventResizeInfo)
イベントのサイズ変更の処理を行います。
第1引数：イベントリサイズ情報
戻り値：なし
eventDidMount(info)
要素がDOMに追加された直後に呼び出されます。イベントデータが変更された場合、これは再度呼び出されません。
この処理でDOM追加後の要素の表示変更等を行います。
第1引数：パラメーター（event、el等を含む）
戻り値：なし
eventClick(eventClickInfo)
イベントクリック時の処理を行います。
第1引数：イベントクリック情報
戻り値：なし
dateClick(dateClickInfo)
カレンダー内の日付・時間枠クリック時の処理を行います。
第1引数：日付クリック情報
戻り値：なし
moreLinkContent
「+more」の内容を設定します。
ロケール設定で日本語化されないので、別途日本語対応が必要です。
moreLinkDidMount
「+more」のDOM追加後に処理を行います。
「+more」要素に対してなにかしたい場合は、ここに処理を書きます。
initialView
初期表示時のビューを設定します。
設定値例
- dayGridMonth
- dayGridWeek
- timeGridDay
- listWeek
dayCellContent(cell)
日セル（
第1引数：日セル情報
// 例：「10日」→「10」にする cell.dayNumberText.replace("日", "");
Day-Cell Render Hooks - Docs | FullCalendar
headerToolbar
ヘッダーツールバーを設定します。
位置
- start：左
- center：中央
- end：右
コンテンツ
- title：現在の月/週/日
- prev：日・月・年を戻るボタン
- next：日・月・年を進むボタン
- prevYear：前年ボタン
- nextYear：次年ボタン
- today：本日ボタン
- ビュー名（dayGridMonth等）
buttonText
ボタンのテキストを設定します。
- today：本日
- month：月
- week：週
- day：日
- list：リスト
|
buttonText - Docs | FullCalendar
allDayText
日・週カレンダー表示時に左の時間軸上部にある終日予定のラベルを設定します。
公式ドキュメントではv4までとありますが、v6でも使えます。
デフォルトは「all-day」が表示されるので、不要な場合は「''」を設定すると空にできます。
dayHeaderDidMount
日・週カレンダー表示時の日ヘッダーのDOM描画後の処理を行います。
使用例として、休日は背景色をピンクにするなどです。
datesSet(dateInfo)
カレンダーの日付範囲が最初に設定または何らかの方法で変更され、DOM が更新された後に呼び出されます。
使用例として、カレンダーの日付が変わったときにスクロール位置を調整するなどです。
第1引数：日付情報
