npm를 사용하는 것은 매우 번거롭기 때문에 이번에는 CDN을 사용하여 초기화합니다

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Reference

이 문제에 관하여([Full Calendar] 일본어 지원 달력 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teddy/items/9aaecaee57af51194bb2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Full Calendar] 일본어 지원 달력 표시

샘플 이벤트 표시

디스플레이 형식 전환

일본어로 고치다

참고 자료

Reference

좋은 웹페이지 즐겨찾기