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

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">

二、例子

线上地址： http://kylebing.cn/test/fullcalendar/

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

五、重复事件

事件的属性值如下：

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

六、自定义按钮

配置选项中添加如下内容

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

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