`
- 浏览:
534665 次
- 性别:
- 来自:
武汉
-
jQuery插件FullCalendar日程表实现可扩展Google日历功能
- 这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排等,可扩展Google日历功能,制作个性化的日程表,同时可绑定点击事件或拖动事件,使用非常方便,效果图如下:
- jQuery插件FullCalendar日程表实现可扩展Google日历功能
- jQuery插件FullCalendar在线实例
- http:
- 使用说明
- 需要使用jQuery库文件和jQueryUI库文件和FullCalendar库文件
- http:
- http:
- http:
- 同进需要使用fullcalendar.css文件
- 使用实例
- 一,包含文件部分
- 1.<linkrel='stylesheet'type='text/css'href="fullcalendar/fullcalendar.css"mce_href="fullcalendar/fullcalendar.css"/>
- 2.<mce:scripttype='text/javascript'src="jquery/jquery.js"mce_src="jquery/jquery.js"></mce:script>
- 3.<mce:scripttype='text/javascript'src="jquery/ui.core.js"mce_src="jquery/ui.core.js"></mce:script>
- 4.<mce:scripttype='text/javascript'src="fullcalendar/fullcalendar.js"mce_src="fullcalendar/fullcalendar.js"></mce:script>
- 如果需要绑定拖动事件,可增加ui.draggable.js文件
- 1.<mce:scripttype='text/javascript'src="jquery/ui.draggable.js"mce_src="jquery/ui.draggable.js"></mce:script>
- 二,HTML部分
- 1.<divid='calendar'></div>
- 三,Javascript部分
- 1.<mce:scripttype='text/javascript'><!--
- 2.$(document).ready(function(){
- 3.vard=newDate();
- 4.vary=d.getFullYear();
- 5.varm=d.getMonth();
- 6.$('#calendar').fullCalendar({
- 7.draggable:true,
- 8.events:[
- 9.{
- 10.id:1,
- 11.title:"学习jQuery",
- 12.start:newDate(y,m,6,14,0),
- 13.end:newDate(y,m,11)
- 14.},
- 15.{
- 16.id:2,
- 17.title:"每天写必优博客",
- 18.start:newDate(y,m,2)
- 19.},
- 20.{
- 21.id:2,
- 22.title:"每天写必优博客",
- 23.start:newDate(y,m,9)
- 24.},
- 25.{
- 26.id:3,
- 27.title:"开会",
- 28.start:newDate(y,m,20,9,0)
- 29.},
- 30.{
- 31.id:4,
- 32.title:"查看facebook",
- 33.start:newDate(y,m,27,16),
- 34.end:newDate(y,m,29),
- 35.url:"http://facebook.com/"
- 36.}
- 37.]
- 38.});
- 39.});
- 40.
- javascript部分主要是设置日程安排,各部分如下:
- 1.vard=newDate();
- 2.vary=d.getFullYear();
- 3.varm=d.getMonth();
- 获取时间,使用getFullYear()和getMonth()分别获取年和月
- draggable表示日程安排是否可拖动
- events表示具体的日程安排,格式如下:
- 1.[{
- 2.id:1,
- 3.title:"学习jQuery",
- 4.start:newDate(y,m,6,14,0),
- 5.end:newDate(y,m,11)
- 6.}]
- 注意是一个数组[],里面包含JSON数据,分别是id,title,start和end,每个ID表示一个具体的事件安排。
- 一,同时可支持动态Ajax加载日程安排JSON数据,具体可查看实例源代码,如下:
- 1.<mce:scripttype='text/javascript'><!--
- 2.$(document).ready(function(){
- 3.$('#calendar').fullCalendar({
- 4.draggable:true,
- 5.events:"json_events.php",
- 6.eventDrop:function(event,delta){
- 7.alert(event.title+'wasmoved'+delta+'days/n'+
- 8.'(shouldprobablyupdateyourdatabase)');
- 9.},
- 10.loading:function(bool){
- 11.if(bool)$('#loading').show();
- 12.else$('#loading').hide();
- 13.}
- 14.});
- 15.});
- 16.
- events直接调用PHP文件获取JSON数据,同时实现eventDrop和加载loading事件
- 二,可实现Google日历扩展,具体可查看实例源代码,如下:
- 1.<mce:scripttype='text/javascript'><!--
- 2.$(document).ready(function(){
- 3.$('#calendar').fullCalendar({
- 4.events:$.fullCalendar.gcalFeed(
- 5.'http://www.google.com/calendar/feeds/',
- 6.{draggable:false,className:'mygcal'}
- 7.),
- 8.eventClick:function(event){
- 9.window.open(event.url,'gcalevent','width=700,height=600');
- 10.returnfalse;
- 11.},
- 12.loading:function(bool){
- 13.if(bool)$('#loading').show();
- 14.else$('#loading').hide();
- 15.}
- 16.});
- 17.});
- 18.
- events调用$.fullCalendar.gcalFeed()方法获取google日历数据,同时实现eventClick和加载loading事件
- 使用jQuery插件FullCalendar日程表非常简单,只需要指定日程的具体事件,就可实现一个日程安排计划,同时可扩展Google日历功能,非常值得推荐。
- FullCalendar插件官方网址
- http:
- FullCalendar插件在线文档说明
- http:
- FullCalendar插件在线下载
- http:
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
jQuery日历插件FullCalendar 演示地址:http://www.jq22.com/jquery-info278
日程安排:jQuery的日历插件 FullCalendar Java MySQL
使用了jquery日历插件FullCalendar,使用通过PHP程序调用了MYSQL的数据库,实现HTML静态页在线AJAX新建日程,修改、删除日程序,本集成了中国人的农历,采用了UTF8的编码,根目录里带有SQL数据库,下载后导入你的...
FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...
主要介绍了在Vue项目中用fullcalendar制作日程表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
前端日历插件,包含js和css,以及index.html。采用的是fullcalendar
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。 HTML 首先是要载入...
[jQuery之FullCalendar视频(全)].[HeyJava][selfimpr]jQuery.FullCalendar 下载链接
jquery.fullCalendar官方文档翻译
NULL 博文链接:https://zzc1684.iteye.com/blog/2258307
vue-fullcalendar 一个基于vue.js的全日历组件,不需要Jquery或fullCalendar.js。 目前,它只支持月视图。 它的灵感来自fullCalendar.io
jQuery.FullCalendar相关文档
前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排,采用fancybox实现弹出窗口编辑和修改日程明细信息。...
用fullcalendar做的日程管理,有代码
使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741
一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的...