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类
Sep 08 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
js实现随机点名器精简版
Jun 29 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 MYSQL 数据备份类
2009/06/19 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php数组查找函数总结
2014/11/18 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
详解【python】str与json类型转换
2019/04/29 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python计算二维矩形IOU实例
2020/01/18 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python更换pip源方法过程解析
2020/05/19 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
暑假社会实践心得体会
2014/09/02 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
老干部工作汇报材料
2014/10/28 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
二年级作文之动物作文
2019/11/13 职场文书
Python sklearn分类决策树方法详解
2022/09/23 Python