Googleカレンダーのようなカレンダーを自前で実装できるFullCalendar.jsの使い方を実際に使った機能だけまとめました。
使用バージョン
FullCalendar.js v6.1.11
fullcalendar.io
設定項目（全体）
<divid="calendar"></div>
const $calendar =document.getElementById('calendar');const calendar =newFullCalendar.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等を含む）
戻り値：なし
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引数：日付情報