`
- 浏览:
556633 次
- 性别:
- 来自:
武汉
-
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
相关推荐
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
全历插件jQuery FullCalendar是一款强大的JavaScript日历组件,它能帮助开发者轻松地在网页上创建交互式的日程安排表。这个插件以其简洁的API和丰富的自定义选项深受前端开发者的喜爱。在这个使用案例中,我们将深入...
FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...
**全栈前端开发中的日历插件:FullCalendar** 在Web开发中,日历插件是一种常见的组件,用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库,专为前端开发者设计,它能帮助创建交互式的、...
FullCalendar是一款广泛使用的jQuery日历插件,它能够帮助开发者在网页上创建功能丰富的互动日历。这款插件以其灵活性、可定制性和易用性而备受赞誉,支持各种事件安排、时间表显示以及多语言支持,是Web开发中的...
- 首先,确保引入jQuery库和相应的日程表或时间控件插件的JS和CSS文件。 - 创建HTML元素作为日程表或时间控件的容器。 - 初始化插件,设置必要的配置项,如日期格式、初始值等。 - 添加事件监听,处理用户操作,...
**全栈Web开发中的前端日历插件...综上所述,FullCalendar是前端开发中不可或缺的一款日历插件,无论你是初学者还是经验丰富的开发者,都可以通过这个压缩包中的源码学习到关于日历控件的构建、扩展和优化的宝贵知识。
jQuery作为一个轻量级、强大的JavaScript库,为开发者提供了丰富的插件来实现这些功能,其中FullCalendar是一款广泛使用的日历日程插件。本文将深入探讨FullCalendar的功能特性、使用方法以及常见应用场景。 ...
本教程将重点关注如何利用jQuery来创建一个日历时间表,并添加行程安排事件以实现提醒功能。 首先,我们需要理解jQuery日历插件的基本原理。最常用的jQuery日历插件之一是jQuery UI中的Datepicker组件。它提供了一...
9. **插件扩展**:Fullcalendar支持多种插件,如日程表的加载优化插件、事件源插件等,这使得其功能可以进一步扩展和定制。 在`fullcalendar-1.2.1`这个压缩包中,包含了Fullcalendar的1.2.1版本的相关文件,可能...
为了实现这样的功能,开发者可能使用了诸如Android的CalendarView或iOS的EventKit框架等原生控件,或者是利用JavaScript库如FullCalendar、jQuery UI Datepicker等在Web开发中创建自定义的日历组件。开发者需要考虑...
本文将深入探讨如何使用JavaScript实现一个功能完备的日历控件,并结合日程安排功能进行扩展。 首先,JavaScript日历控件的基础是通过DOM操作动态创建HTML结构来呈现日历界面。在`calendar2.aspx`中,我们可以预期...
jQuery还包含了许多实用的插件,这些插件极大地扩展了其功能,其中就包括各种日历控件。 2. **jQuery日历控件的用途**: - 用户友好的日期选择:相比传统的文本输入框,日历控件能提供直观的日期选择界面,减少...
对于开发者来说,jQuery日历插件是管理日期和时间、规划事件或创建日程表的理想工具。以下是10款最佳jQuery日历插件的详细介绍,这些插件具有丰富的功能和灵活的定制选项。 1. **jQuery-Verbose-Calendar**(压缩包...
这个插件的灵活性和强大的功能使得它在网站和应用中广泛使用,尤其在日程管理、会议预订、活动日历等领域。 **核心功能** 1. **日期选择与展示**:jQuery Calendar可以显示日、周、月甚至年的视图,用户可以选择...
日历控件的实现可能依赖于JavaScript库,如jQuery UI或FullCalendar,它们提供了丰富的API,允许开发者创建交互式、响应式的日历界面。在客户端,JavaScript可以处理用户的即时交互,如拖放日程、显示弹窗确认删除等...
FullCalendar 是一个全功能的日历插件,可以展示日程、事件和时间表。它可以显示多日视图,包括日、周、月和年视图,还可以通过Ajax动态加载事件数据。开发者可以自定义事件颜色、标题、时间格式等,以满足项目需求...
适用于WEB开发的多种日程/日历插件,日历日期插件包含多种CSS样式,从年份-月份-单日-小时多种插件选择,源码整洁,便于修改;日程插件包含完整版Fullcalendar控件demo以及其他样式控件,欢迎交流。
在本案例中,我们关注的是一个使用jQuery实现的日程管理工具,这表明它利用了JavaScript库jQuery的强大功能来提供交互式和用户友好的日历界面。让我们深入探讨jQuery实现的日程管理的相关知识点。 首先,jQuery是一...