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选择头像并实时显示的代码
Jun 27 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
纯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生成网站桌面快捷方式代码分享
2014/10/11 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python异常处理操作实例详解
2018/08/28 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python实战之制作天气查询软件
2019/05/14 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python多线程并发实例及其优化
2019/06/27 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
pytorch 求网络模型参数实例
2019/12/30 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
电厂厂长岗位职责
2014/01/02 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
2014年行政部工作总结
2014/11/19 职场文书
硕士学位申请报告
2015/05/15 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript