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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP 在线翻译函数代码
2009/05/07 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python异常处理知识点总结
2019/02/18 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
管理部部长岗位职责
2013/12/05 职场文书
中学自我评价
2014/01/31 职场文书
入党申请自荐书范文
2014/02/11 职场文书
高中军训感言500字
2014/02/24 职场文书
房地产项目建议书
2014/03/12 职场文书