js 日程插件库 -- fullCalender

日程插件库 -- fullCalendar

· 简介

FullCalendar是一个javascript 的日程。可进行定制且是开源的。

可通过拖拽一个事件(事情)到不同的日期/时间点上，但不能对事件(事情)的名字/内容进行修改。不过，可通过添加FullCalendar的evnt 钩子进行修改。

官方Demo: https://fullcalendar.io/

· 基本用法

1. 下载（插件包）

npm install fullcalendar --save

注意：由于fullcalendar依赖jquery和moment，所以会自动将jquery和moment两个插件包一起下载。

cdn.js

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.js

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.css

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.print.css

2. 引入插件核心

<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， 所以两文件需在FullCalendar前面引入。如果需要进行拖拽和修改大小，则还需引入一些额外依赖文件

3. 初始化

注意，fullCalendar需在页面初始化完成后进行初始化。最好的方法就是：

$(document).ready(function() {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })
});

4. 日历主体容器元素

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

5. 初始化的options、callback(回调函数)、方法

· 一般显示的属性

· 时区