fullcalendar 课程表 js 插件 日程安排操作 js

方便的管理日历事件,操作,可以显示星期的事件,也可以显示日历样式的事件

相关链接

github: ​​https://github.com/fullcalendar/fullcalendar​​​ 官网demo:​​https://fullcalendar.io/demos​​ 事件对象的属性: ​​https://fullcalendar.io/docs/event-parsing​

一、使用

官网下载对应的文件,只需要解压文件中的 lib 文件夹中的内容

引用的时候只需要引用 ​​main.js​​​ ​​main.css​​ 即可,如果需要显示中文,就引入对应语言即可,下面只是例子,路径根据自己实际情况修改

<!--fullcalendar-->
<script src="./fullcalendar-lib/main.js"></script>
<script src="./fullcalendar-lib/locales/zh-cn.js"></script> <!--载入对应的本地化文件-->
<link rel="stylesheet" href="./fullcalendar-lib/main.min.css">

二、例子

线上地址: ​​https://kylebing.cn/test/fullcalendar/​

fullcalendar 课程表 js 插件 日程安排操作 js_自定义

HTML

<div class="container">
<div id="calendar">
</div>
</div>

JS

window.onload = ()=>{
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {

// 自定义头部工具
headerToolbar: {
start: 'title',
center: '',
end: 'today prev,next'
},

now: "2021-02-18 17:07:43", // 自定义当前时间,只用于显示使用,正常不需要这个参数

height: "auto", // 定义表格高度
allDaySlot: false, // 是否显示表头的全天事件栏
initialView: 'timeGridWeek',
locale: 'zh-cn', // 区域本地化
firstDay: 1, // 每周的第一天: 0:周日

// 标尺定义
nowIndicator: true, // 是否显示当前时间的指示条
slotMinTime: "14:00:00", // 图表展示的开始时间
slotMaxTime: "19:00:00", // 图表展示的结束时间
slotDuration: "00:15:00", // 左侧时间标尺的间隔


slotLabelFormat:[
{
hour: 'numeric',
minute: '2-digit'
}
],

events: [ // 也可以是个请求地址,直接返回对应的 json 数据,参见: https://fullcalendar.io/docs/events-json-feed
{
id: 1,
title: "第一个 fullcalendar 事件",
start: "2021-02-17 14:00:00",
end: "2021-02-17 14:45:00"
},
{
id: 2,
title: "网球",
start: "2021-02-18 17:00:00",
end: "2021-02-18 17:45:00"
},
{
id: 3,
title: "武术",
start: "2021-02-16 16:00:00",
end: "2021-02-16 16:45:00"
},
{
id: 4,
title: "体育",
start: "2021-02-19 16:00:00",
end: "2021-02-19 16:45:00"
},
{
id: 5,
title: "钢琴",
start: "2021-02-15 17:15:00",
end: "2021-02-15 18:00:00"
},
]
});
calendar.render();
}

三、日志可拖动编辑

添加 ​​editable​​ 属性,对应的响应事件是

事件拖动移动时: ​​eventDrop​​​ 事件编辑长度时: ​​eventResize​

// 编辑
editable: true,

// 事件编辑长度时
eventResize: info => {
showInfo(info.event)
// info.event.start // 事件开始时间
// info.event.end // 事件结束时间
},

// 事件拖动时
eventDrop: info => {
showInfo(info.event)
// info.event.start // 事件开始时间
// info.event.end // 事件结束时间
},

四、事件成组

​groupId​​​ 具有相同 ​​groupId​​ 的事件,在拖动的时候是一起拖动的。

groupId: 100

fullcalendar 课程表 js 插件 日程安排操作 js_日历_02

五、重复事件

事件的属性值如下:

// 重复事件
{
id: 5,
title: "钢琴",
startTime: "17:15:00", // 事件开始时间,不需要写日期
endTime: "18:00:00", // 事件结束时间
daysOfWeek: [1,6], // 事件以周为周期循环, 0-6 依次代表 周日一二三四五六
startRecur: "2021-01-20", // 事件开始日期
endRecur: "2021-03-20", // 事件结束日期
},

fullcalendar 课程表 js 插件 日程安排操作 js_日程_03

六、自定义按钮

配置选项中添加如下内容

// 自定义按钮
customButtons: {
myBtn1: {
text: '按钮1',
click: function() {
alert('clicked the custom button!');
}
}
},

// 自定义头部工具
headerToolbar: {
start: 'title',
center: 'myBtn1',
end: 'today prev,next'
},