【FullCalendar】日本語対応のカレンダーを表示する

npmを使うのが面倒だったので、今回はCDNを使用して初期化する

```
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
    <script>

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

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>
```

![](https://i.gyazo.com/cbef499d2ff4a2e0517be5f0d56bdf42.png)

# サンプルイベントを表示する
events

```
        $(function(){
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: [
                    {
                        id: '1',
                        title: 'event1',
                        start: '2021-01-01',
                        url: '#'
                    },
                    {
                        id: '2',
                        title: 'event2',
                        start: '2021-01-05',
                        url: '#'
                    },
                    {
                        id: '3',
                        title: 'event3',
                        start: '2021-01-07',
                        end: '2021-01-11', // 2021-01-10 23:59:59で終了
                        url: '#'
                    }
                ],
            });
            calendar.render();
```

![](https://i.gyazo.com/dcab39584301942cdb36d00d751b9508.png)

# 表示形式を切り替える
headerToolbar

```
        $(function(){
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'title',
                    center: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
                    right: 'prev,today,next'
                },
                events: [
                    {
                        // event data
                    }
                ],
            });
            calendar.render();
        });
```

![](https://i.gyazo.com/f3a8369e1d2f178f7e41f4abd4f68cca.png)

# 日本語にする
```
            var calendar = new FullCalendar.Calendar(calendarEl, {
                // 日本語化
                locale: 'ja',
                buttonText: {
                    prev:     '<',
                    next:     '>',
                    prevYear: '<<',
                    nextYear: '>>',
                    today:    '今日',
                    month:    '月',
                    week:     '週',
                    day:      '日',
                    list:     '一覧'
                },
                …
            });
```
![](https://i.gyazo.com/748b32cb238954476949e64afc780810.png)

# 参考
https://adminlte.io/themes/v3/pages/calendar.html
https://fullcalendar.io/docs/initialize-globals
https://qiita.com/kei_0121/items/60d0b628f07ec331673b
https://blog.fire-sign.info/156/
https://www.mitsue.co.jp/knowledge/blog/frontend/202012/08_0900.html