若是想用fullcalendar實現排班功能,或者日曆、日程功能。那麼只須要簡單的幾步:
這裏先掛官網連接:
fullcalendar
fullcalendar官網下載連接
1、下載及簡單配置
一、這裏先明確你想要的是哪一種形式式:fullcalendar 提供多種日曆形式:
大家能夠在官網首頁的演示裏面看到,在這裏我主要講一下我這裏使用的兩種實現:
(1)日曆模式(只是用fullcalendar實現) css
(2)時間軸模式(除了fullcalendar還用了官網的另外一個插件叫schedule vue
在下載了fullcalendar以後將其引入你本身的項目,只須要進行很簡單的配置就能夠進行使用了。
這是須要運行插件的幾個基本的配置,將其引入頁面jquery
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script>
此處須要注意的是jquery和moment的js必須在fullcalendar的js以前引入。若是你也想作時間軸模式的日曆,而且已經下載了schedule的話,那麼你須要在在頁面中引入schedule的js和css
也就是說不但要引入fullcalendar的還要引入schedule的。數組
<link href='fullcalendar.css' rel='stylesheet' /> <link href='scheduler.css' rel='stylesheet' /> <script src='moment.js'></script> <script src='jquery.js'></script> <script src='fullcalendar.js'></script> <script src='scheduler.js'></script>
以後在頁面定義一個div 這個div會被渲染成日曆插件好比我創建一個divless
<div id='calendar'></div>
那麼這時候就能夠在js中進行配置了ui
$('#calendar').fullCalendar({ defaultView: 'month', height: 'auto', header: false, displayEventTime:true, displayEventEnd:true, weekMode:"liquid", aspectRatio:2, allDaySlot:false, timeFormat: 'HH:mm', locale:'zh-cn', })
這其中的一些配置根據本身的需求來定,具體官方文檔
須要說明的是fullcalendar提供schedule的無償使用,不過在插件上會有水印。要想去掉水印能夠在配置中加上這一句this
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
加在上面的配置裏就能夠。
這樣運行以後你能夠獲得一個日曆了 spa
其中的defaultView是決定顯示是月 仍是年 或者是星期的。對於fullcalendar有如下幾種取值:插件
month
basicWeek
basicDay
agendaWeek
agendaDay
listYear
listMonth
listWeek
listDay
若是你同時下載了schedule想要以小時來分割每日的時間那麼你能夠使用如下幾種視圖:code
timelineDay
timelineWeek
timelineMonth
timelineYear
固然你也能夠自定義視圖 具體看文檔自定義視圖
這裏我寫一個例子
views: { agendaFourDay: { type: 'timeline', duration: { days: 4 }, buttonText: '4 day' }, },
這裏我設置了一個4天的區間,代表在這種模式下,個人日曆顯示跨度爲四天。而後設置defaultView:agendaFourDay,就行了。完整寫就是這樣。
$('#calendar').fullCalendar({ defaultView: 'agendaFourDay', height: 'auto', header: false, displayEventTime:true, displayEventEnd:true, weekMode:"liquid", aspectRatio:2, allDaySlot:false, timeFormat: 'HH:mm', locale:'zh-cn', views: { agendaFourDay: { type: 'timeline', duration: { days: 4 }, buttonText: '4 day' }, }, })
除了一開始在配置中寫好,fullcalendar提供方法能夠在js中更改視圖,這樣就能自定義按鈕來控制視圖了
$('#calendar').fullCalendar("changeView","basicDay ");
這樣就把視圖類型更改成basicDay 了。
固然上述配置也能夠在js中修改。體如今代碼裏就是
上面是一個例子 底下是格式。
$('#calendar').fullCalendar('option','height',"600")
$('#calendar').fullCalendar('option','屬性',"屬性值")
改代碼把日曆的高度定義爲600px。
還有不少種方法 參看文檔的(method)
如下就完成了插件的基本配置。
2、往插件裏傳數據
如下是我向日曆裏傳數據的方法
function drawCalendar(data) { $('#calendar').fullCalendar( 'removeEvents'); var events=[]; for(var i=0, len=data.length; i<len; i++){ var timeDate=data[i]; //若是非成天時間,則顯示時分數據 var isallDay=true; if(timeDate["end"] !=null && timeDate["start"] != null){ if(moment(timeDate["start"].replace(" ","T")).format("HH:mm") !== "00:00" || moment(timeDate["end"].replace(" ","T")).format("HH:mm") !== "00:00"){ isallDay = false; } } var item={ title : timeDate["title"], start : timeDate["start"].replace(" ","T"), className : "event-bar", allDay : isallDay, end : timeDate["end"]==null ? "" : timeDate["end"].replace(" ","T"), backgroundColor : getCalendarColor(timeDate["user"]), user : timeDate["user"], startTime : timeDate["startTime"], endTime : timeDate["endTime"] }; events.push(item); } $('#calendar').fullCalendar( 'addEventSource', events ); }
其中
$('#calendar').fullCalendar( 'removeEvents');
是用來先移除原來控件中的事件的。
event是事件數組,事件就是圖裏面一條一條的,把item(下面的屬性各項,有設置事件條的顏色的,也有設置開始結束時間的,與英文意思相同這裏很少作解釋,有不懂得能夠在評論中問我)
var item={ title : timeDate["title"], start : timeDate["start"].replace(" ","T"), className : "event-bar", allDay : isallDay, end : timeDate["end"]==null ? "" : timeDate["end"].replace(" ","T"), backgroundColor : getCalendarColor(timeDate["user"]), user : timeDate["user"], startTime : timeDate["startTime"], endTime : timeDate["endTime"] };
推入事件數組。
再用
$('#calendar').fullCalendar( 'addEventSource', events );
控件提供的方法把事件數組推入事件,就能夠了在圖上顯示你的事件了。
補充:vue中的實現
<template> <div class="work-day-manage"> <h3>工做日管理</h3> <div class="calendar-wrap"> <FullCalendar defaultView="dayGridMonth" ref="fullCalendar" :header="{ left: 'dayGridMonth,timeGridWeek, timeGridDay', center: 'title', right: 'today prev,next,' }" :events="events" :eventColor="'#378006'" :eventBackgroundColor="'#378006'" :eventResizableFromStart="true" @eventClick="handleEventClick" :editable="true" :droppable="true" :selectMirror="true" :selectAllow="selectAllow" :unselectAuto="false" :weekends="true" :selectable="true" :locale="zhLocale" @viewSkeletonRender="viewSkeletonRender" @dateClick="handleDateClick" @select="handleDateSelect" :plugins="calendarPlugins"/> </div> </div> </template> <script> import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import timeGridPlugin from '@fullcalendar/timegrid' import zhLocale from '@fullcalendar/core/locales/zh-cn' import { formatDate } from '@/utils/common' export default { data() { return { defaultView: 'dayGridMonth', calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], zhLocale, events: [ // event data... { title: 'Event1', start: '2019-08-26 15:00:23', end: '2019-08-26 19:00:00', startTime: '2019-08-26 15:00:23', endTime: '2019-08-26 19:00:00', allDay: false, }, { title: 'Event2', start: '2019-08-21', end: '2019-08-25', allDay: false, user: 'abc', backgroundColor: 'orange', className: 'event-bar', startTime: '2019-08-21', }, { title: 'Event3', start: '2019-08-21', end: '2019-08-25', allDay: false, user: 'abc', backgroundColor: 'orange', className: 'event-bar', startTime: '2019-08-21', } ], } }, components: { FullCalendar, }, mounted() { console.log(formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')) }, methods: { viewSkeletonRender(info) { this.defaultView = info.view.type }, selectAllow() { if (this.defaultView === 'dayGridMonth') { return false } return true }, handleDateClick(arg) { console.log(arg) // arg.dayEl.style.backgroundColor = 'red' // arg.dayEl.style.backgroundColor = 'red' console.log(this.$refs.fullCalendar.getApi().getEvents()) }, handleDateSelect(arg) { console.log(arg) }, handleEventClick(eventInfo) { console.log(eventInfo.event) }, } } </script> <style lang="less"> @import '~@fullcalendar/core/main.css'; @import '~@fullcalendar/daygrid/main.css'; @import '~@fullcalendar/timegrid/main.css'; .work-day-manage { padding: 0 20px; .calendar-wrap { width: 1000px; height: 2000px; .fc { } } } </style>