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.ajax)
Nov 19 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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 str_pad 函数使用详解
2009/01/13 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jquery.validate使用详解
2016/06/02 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
微信小程序云开发之数据库操作
2019/05/18 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
详解Django admin高级用法
2019/11/06 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
高中家长寄语
2014/04/02 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
工作收入证明模板
2014/10/10 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
催款函范本大全
2015/06/24 职场文书
严以用权学习心得体会
2016/01/12 职场文书
CSS基础详解
2021/10/16 HTML / CSS
2022年显卡天梯图(6月更新)
2022/06/17 数码科技