js jquery 實現 排班,輪班，日歷，日程。使用fullcalendar 插件

如果想用fullcalendar實現排班功能，或者日歷、日程功能。那么只需要簡單的幾步：
這里先掛官網鏈接：
fullcalendar
fullcalendar官網下載鏈接
一、下載及簡單配置
1、這里先明確你想要的是哪種形式式：fullcalendar 提供多種日歷形式：
你們可以在官網首頁的演示里面看到，在這里我主要講一下我這里使用的兩種實現：
(1)日歷模式（只是用fullcalendar實現）

（2）時間軸模式（除了fullcalendar還用了官網的另一個插件叫schedule

在下載了fullcalendar之后將其引入你自己的項目，只需要進行很簡單的配置就可以進行使用了。
這是需要運行插件的幾個基本的配置，將其引入頁面

<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會被渲染成日歷插件比如我建立一個div

<div id='calendar'></div>

那么這時候就可以在js中進行配置了

$('#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的免費使用，不過在插件上會有水印。要想去掉水印可以在配置中加上這一句

schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',

加在上面的配置里就可以。
這樣運行之后你可以得到一個日歷了

其中的defaultView是決定顯示是月 還是年 或者是星期的。對於fullcalendar有以下幾種取值：

month 
basicWeek 
basicDay 
agendaWeek 
agendaDay
listYear
listMonth
listWeek
listDay

 

如果你同時下載了schedule想要以小時來分割每日的時間那么你可以使用以下幾種視圖：

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）
以下就完成了插件的基本配置。
二、往插件里傳數據
以下是我向日歷里傳數據的方法

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>