JS日程管理插件完整日历简单示例

在线演示源代码下载

超文本标记语言

第一步是在需要调用FullCalendar schedule插件的页面上加载必要的javascript和css文件，包括jQuery库文件、FullCalendar插件和FullCalendar样式表。如果您仍然想要拖动时间表，您需要添加jQuery ui插件。

link rel='样式表'类型=' text/CSS ' href=' CSS/full calendar . CSS ' rel=' external no follow '脚本src=' http : js/jquery-1 . 9 . 1 . min . js '/script script src=' http : js/jquery-ui-1 . 10 . 2 . custom . min . js '/script script src=' http 3360 js/full calendar . min . js '/脚本然后，添加div

div id='calendar'/divjQuery

现在我们需要在加载页面后调用FullCalendar插件来初始化日历，并使用jQuery代码：

$(文档)。ready (function () {//page加载初始化日历$ ('# calendar ')。full calendar({//设置选项和回调})})；然后保存并浏览页面，你会发现页面上已经显示了一个很大的日历。当然，这只是初步的日历。FullCalendar的强大功能是，它提供了丰富的选项、方法和事件，可以轻松扩展以创建您想要的日历。首先，做一个简单的理解。

选项(选项)

FullCalendar的官方文档提供了丰富的操作选项设置，比如是否在日历中显示周末等。如何使用：

$ ('# calendar ')。full calendar({ weekends 3360 false//周末不显示，周六周日隐藏})；查看更多选项

事件(EVents)

当点击或拖动等事件发生时，可以调用相关函数。例如，当您单击某一天时，会弹出一个提示框：

$('#calendar ')。full calendar({ day click : function(){ alert('已单击一天！');} });查看更多活动

方法

FullCalendar提供了很多可以调用的方法，比如进入下个月的视图等。代码可以编写如下：

$('#calendar ')。完整日历(“下一个”)；查看更多方法

在上面的代码调用下一个方法之后，日历视图被切换到下一个月(周和日)的视图。

本文简要介绍了JS进度管理插件FullCalendar的使用。更多详情请查看文章：JS进度管理插件FullCalendar中文描述文档

此示例中要引用的相关插件：

jQuery的下载地址：jQuery v3.0

jQuery ui下载地址：jQuery UI v1.8.18

完整日历插件的下载地址：完整日历

FullCalendar实例源代码下载：FullCalendar_demo

完整日历的官方网站：http://fullcalendar.io/docs/