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'},

總結

以上是生活随笔為你收集整理的fullcalendar 课程表 js 插件 日程安排操作 js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。