More than 3 years have passed since last update.

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

FullCalendar

Posted at 2021-01-05

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>

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

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();

表示形式を切り替える

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();
        });

日本語にする

            var calendar = new FullCalendar.Calendar(calendarEl, {
                // 日本語化
                locale: 'ja',
                buttonText: {
                    prev:     '<',
                    next:     '>',
                    prevYear: '<<',
                    nextYear: '>>',
                    today:    '今日',
                    month:    '月',
                    week:     '週',
                    day:      '日',
                    list:     '一覧'
                },
                …
            });

参考

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up