JS日程管理插件FullCalendar简单实例


Posted in Javascript onFebruary 07, 2017

JS日程管理插件FullCalendar简单实例

在线演示              源码下载

HTML

首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery-ui-1.10.2.custom.min.js"></script> 
<script src="js/fullcalendar.min.js"></script>

然后,在页面的body里加入div#calendar,用来放置日历主体。

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

jQuery

现在我们需要在页面加载完成后,调用FullCalendar插件初始化日历,使用jQuery代码:

$(document).ready(function() { 
 //页面加载完初始化日历 
 $('#calendar').fullCalendar({ 
  //设置选项和回调 
 }) 
 
});

然后保存并浏览页面,你会发现页面中已经显示一个很大的日历表了。当然这还只是一个初步的日历,FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件,可以很方便的扩展,打造你想要的日历表,先来做一下简单了解。

选项(Options)

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

$('#calendar').fullCalendar({ 
 weekends: false //不显示周末,将会隐藏周六和周日 
});

本例需要引用的相关插件:

jQuery下载地址:jQuery v3.0

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

FullCalendar插件下载地址:FullCalendar

FullCalendar实例源码下载:FullCalendar_demo

FullCalendar的官方网址:http://fullcalendar.io/docs/

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
纯js三维数组实现三级联动效果
Feb 07 #Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 #Javascript
bootstrap vue.js实现tab效果
Feb 07 #Javascript
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
You might like
PHP新手上路(五)
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python如何查看安装了的模块
2020/06/23 Python
python中的错误如何查看
2020/07/08 Python
基于python实现坦克大战游戏
2020/10/27 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
应届毕业生求职信
2013/11/30 职场文书
银行优秀员工事迹
2014/02/06 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
环境整治工作方案
2014/05/18 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
党员作风建设整改方案
2014/10/27 职场文书