×
首页编程语言正文

如果想用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>


评论关闭
IT序号网
IT序号网 jquery

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！