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 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
纯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中计算字符串相似度的函数代码
2012/12/29 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
php写app用的框架整理
2019/09/29 PHP
文本域中换行符的替换示例
2014/03/04 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python csv文件记录流程代码解析
2020/07/16 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
新郎新娘致辞
2015/07/31 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
详解MySQL的半同步
2021/04/22 MySQL
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs