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, ライブラリ