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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript多线程详解
Aug 12 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
微信小程序实现时间戳格式转换
Jul 20 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记录日志的实现代码
2011/08/08 PHP
php注册登录系统简化版
2020/12/28 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
有趣的python小程序分享
2017/12/05 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
执行Python程序时模块报错问题
2020/03/26 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
大学生学习自我评价
2014/01/13 职场文书
单位车辆管理制度
2015/08/05 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
python如何做代码性能分析
2021/04/26 Python
利用Python+OpenCV三步去除水印
2021/05/28 Python
详解python网络进程
2021/06/15 Python