メモ: FullCalendar

ラベル FullCalendar の投稿を表示しています。すべての投稿を表示

FullCalendar #5：イベントオブジェクト

※ 前回記事：#3：ツールバー
※ 記事一覧
※ 参考：Event Object - Docs | FullCalendar

イベントの表示

eventsオブジェクトにeventオブジェクトの配列を指定する。

プロパティ一覧

プロパティ	型	内容
id	String	イベントの一意の識別子。getEventByIdで使用
groupId	String
allDay	Boolean	終日セクションに表示するか？
start	Date object	イベント開始日時
end	Date object	イベント終了日時。終了がない場合はnull
startStr	String (ISO8601)	開始日(start？)のISO8601文字列表現。イベントが終日である場合は時間の部分はなし。
endStr	String (ISO8601)	終了日(end)のISO8601文字列表現。イベントが終日である場合は時間の部分はなし。
title	String	イベントに表示されるテキスト
url	String	ユーザーがこのイベントをクリックしたときにアクセスされるURL。参考) eventClickコールバック
classNames	文字列配列	['myclass1'、myclass2 ']のような文字列の配列。レンダリングされたイベントに添付されるHTMLクラス名を決定
editable	Boolean / null	この特定のイベントの編集可能な設定をオーバーライドする値
startEditable	Boolean / null	この特定のイベントのeventStartEditable設定をオーバーライドする値
durationEditable	Boolean / null	この特定のイベントのeventDurationEditable設定をオーバーライドする値
resourceEditable	Boolean / null	この特定のイベントのeventResourceEditable設定をオーバーライドする値
display	String (Type)	このイベントのレンダリングタイプ指定可能な値: "auto", "block", list-item", "background", inverse-background", "none" 参考) eventDisplay
overlap		この特定のイベントのeventOverlap設定をオーバーライドする値
constraint		この特定のイベントのeventConstraintオーバーライド
backgroundColor		この特定のイベントのeventBackgroundColorオーバーライド
borderColor		この特定のイベントのeventBorderColorオーバーライド
textColor		この特定のイベントのeventTextColorオーバーライド
extendedProps		解析中に指定されたその他のその他のプロパティを保持するプレーンオブジェクト明示的に指定されたextendedPropsハッシュのプロパティとその他の非標準プロパティを受け取る
source		このイベントの発生元であるイベントソースへの参照イベントがaddEventを介して動的に追加され、ソースパラメーターが指定されていない場合、この値はnullになる

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #4：イベントの表示

※ 前回記事：#3：ツールバー
※ 記事一覧
※ 参考：Event Object - Docs | FullCalendar

イベントの表示

eventsプロパティに、カレンダーに表示させるeventオブジェクトの配列を指定する。
最低限、イベント日付(start)とタイトル(title)を指定。
例えば以下の感じ

events: [{
  title: 'お休み',
  start: '2021-07-01',
},{
  title: 'お休み2',
  start: '2021-07-08',
}],

FullCalendar, JavaScript, JS, ライブラリ

No	日付	記事
3	2021.07.06	ツールバー
2	2021.07.04	日本語化
1	2021.07.04	とりあえず使ってみる

FullCalendar #3：ツールバー

※ 前回記事：#2：日本語化
※ 記事一覧
※ 参考：https://fullcalendar.io/docs/headerToolbar

ツールバー

ヘッダとフッタの左側・中央・右側、それぞれに表示するオブジェクトを指定できる。
※ オブジェクトとは前月・翌月ボタンやタイトルのこと

ヘッダは "headerToolbar"、フッタは "footerToolbar" の属性に指定

さらにそれぞれに start(左側)、center(中央)、end(右側) の属性があり、
それらの値にオブジェクトの名前を","区切りの文字列として指定する。

指定可能なオブジェクトの名前
・title (現在の月/週/日を含むテキスト)
・prev (カレンダーを1か月/週/日に戻すためのボタン)
・next (カレンダーを1か月/週/日進めるためのボタン)
・prevYear (カレンダーを年に戻すためのボタン)
・nextYear (カレンダーを1年進めるためのボタン)
・today (カレンダーを現在の月/週/日に移動するためのボタン)
・dayGridDay (日ビュー)
・dayGridWeek (週ビュー)
・dayGridMonth (月ビュー)
・timeGridWeek (時刻ビュー)
・listDay (日予定リスト) ・listWeek (週予定リスト)
・listMonth (月予定リスト)
・listYear (年予定リスト)

ヘッダの左側、フッダの右側にすべて表示させてみる

<div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'ja',
            headerToolbar: {
                start: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
                center: '',
                end: '',
            },
            footerToolbar: {
                end: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
            },
        });
        calendar.render();
    });
</script>

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #2：日本語化

※ 前回記事：#1：とりあえず使ってみる
※ 記事一覧

日本語化

ググると色んなサイトに日本語化の説明が書かれているがどれもうまくいかなかった。
結局のところは locales-all.min.js の追加と、"locale: 'ja'" プロパティのだけで日本語化できそうである。

1) https://www.jsdelivr.com/package/npm/fullcalendar

locales-all.min.js を "Copy HTML" でコピーし、HTMLのmain.min.jsの下に貼り付け
※ main.min.jsの上だとエラーになる

2) FullCalendarコンストラクタのプロパティとして "locale: 'ja'" を追加

BODYタグ内は以下の感じ

<body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
            });
            calendar.render();
        });
    </script>
</body>
</html>

これで日本語化される

※ 次回記事：#3：ツールバー

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #1：とりあえず使ってみる

※ 記事一覧
※ 参考：https://fullcalendar.io/docs/initialize-globals

とりあえず使ってみる

1) VSCodeを起動し "!" Enter でHTMLテンプレートを生成

2) https://www.jsdelivr.com/package/npm/fullcalendar

上記より main.min.css と main.min.js それぞで "COPY HTML" でコピー
・main.min.css → headタブの一番したに追加した
・main,in.js → bodyタブに追加

3) divタグを追加、id属性を "calendar" とする (名前は何でもよい)

4) DOMContentLoadedイベントで 3)で追加したID (今回は"calendar") にFullCalendarを描画する

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
        });
        calendar.render();
    });
</script>

これでカレンダーが表示される。

※ 次回記事：#2：日本語化

FullCalendar, JavaScript, JS, ライブラリ

メモ

FullCalendar #5：イベントオブジェクト

イベントの表示

FullCalendar #4：イベントの表示

イベントの表示

FullCalendar：記事一覧

FullCalendar：記事一覧

FullCalendar #3：ツールバー

ツールバー

FullCalendar #2：日本語化

日本語化

FullCalendar #1：とりあえず使ってみる

とりあえず使ってみる

その他の記事