日历使用及汉化——fullcalendar前端

官网 FullCalendar - JavaScript Event Calendar

引入项目

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.1/main.min.css' rel='stylesheet' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.1/main.min.js'></script>

定义域

<div id='calendar-container'>
    <div id='calendar'></div>
</div>

初始化

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            height: '100%',
            expandRows: true,
            slotMinTime: '08:00',
            slotMaxTime: '20:00',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            initialView: 'dayGridMonth',
            initialDate: '2020-09-12',
            navLinks: true, // 可以点击日期/周名称以导航视图
            editable: true,
            selectable: true,
            nowIndicator: true,
            dayMaxEvents: true, // 当事件过多时允许“更多”链接
            events: [
                {
                    title: '全天事件',
                    start: '2020-09-01',
                },
                {
                    title: '长事件',
                    start: '2020-09-07',
                    end: '2020-09-10'
                },
                {
                    groupId: 999,
                    title: '重复事件',
                    start: '2020-09-09T16:00:00'
                },
                {
                    groupId: 999,
                    title: '重复事件',
                    start: '2020-09-16T16:00:00'
                },
                {
                    title: '会议',
                    start: '2020-09-11',
                    end: '2020-09-13'
                },
                {
                    title: '会议',
                    start: '2020-09-12T10:30:00',
                    end: '2020-09-12T12:30:00'
                },
                {
                    title: '午餐',
                    start: '2020-09-12T12:00:00'
                },
                {
                    title: '会议',
                    start: '2020-09-12T14:30:00'
                },
                {
                    title: '欢乐时光',
                    start: '2020-09-12T17:30:00'
                },
                {
                    title: '晚餐',
                    start: '2020-09-12T20:00:00'
                },
                {
                    title: '生日派对',
                    start: '2020-09-13T07:00:00'
                },
                {
                    title: '点击访问谷歌',
                    url: 'http://google.com/',
                    start: '2020-09-28'
                }
            ],
            locale: 'zh-cn', // 设置语言为中文
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                list: '列表'
            }
        });

        calendar.render();
    });
</script>