日历使用及汉化——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>