jQuery插件实战之fullcalendar(日历插件)Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web的日历查看功能,大家可能都使用过outlook的日历项功能,使用日历界面能更方便的查看待办事项或者约会。开发过程高速方便。插件首页的文档也很全。当然眼下仅仅有英文文档。不错插件支持多语言,这个很不错。
在过去web程序开发中,我以前使用这个插件开发了公司内部的会议室预定系统,这里我简单的介绍一下fullcalendar的相关开发,而且实例解说一下怎样使用这个插件开发日历,当中会使用到fullcalendar里相关的高级功能,比如,拖拽改动时间,生成个性化的会议室预定系统日历项内容。以上代码都是实际项目中使用的前台,大家假设须要能够直接改动使用。
项目需求:
1. 须要在fullcalendar的原有界面上美化,这里我们使用jQueryUI来实现界面美化,由于fullcalendar能够非常好的和jQueryUI无缝整合
2. 生成单独的日历项加入和查看功能,这里仍旧使用jQueryUI的dialog来实现
3. 由于是一个实际项目,须要数据验证,所以这里我们使用formVaildator插件实现
4. 加入一个 "转到某日"功能, 这个界面功能在Fullcalendar里没有,我们能够通过编程加入类似一个功能,当中调用了datepicker的一个addon,后面会介绍到
5. 周和日浏览能够自由的支持拖拽和移动,用来改动日期和时间
6. 浏览器支持: IE8和Firefox
jQuery相关插件:
1. fullcalendar
提供Calendar功能
2. formValidator
提供输入验证功能
3. Timepicker Addon for jQuery UI Datepicker
提供datepicker时间选择功能
开发代码:
导入相关jQuery插件类库,例如以下:
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script><script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script><link rel="stylesheet" href="css/redmond/jquery-ui-1.8.1.custom.css"> <!-- Jquery and Jquery UI --><script src="js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script><script src="js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script><link rel="stylesheet" href="js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /><!-- FullCalender --><link rel='stylesheet' type='text/css' href="js/fullcal/css/fullcalendar.css" />
<script type='text/javascript' src="js/fullcal/fullcalendar.js"></script>
生成日历主界面:
$('#calendar').fullCalendar({header:{right: 'prev,next today',center: 'title',left: 'month,agendaWeek,agendaDay'},theme: true,editable: true,allDaySlot : false,events: function(start, end , callback){var events = [];... callback(events);},...
以上代码将在id=calendar的div里生成一个日历,当中theme定义使用jQueryUI来生成界面,events主要定义生成的会议室预定系统日历项目,这里我们使用例如以下代码生成日历项,在实际开发过程中,我们能够在这里调用后台程序,或者使用其他方法生成数据,这里为了简单演示,我们使用js来生成须要的日历项目,代码例如以下:
var now = new Date();for(var i=-10;i<60;i++){var evtstart = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours()-5, now.getMinutes(), now.getSeconds(), now.getMilliseconds());var evtend = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()); events.push({sid: 1,uid: 1,title: 'Daily Scrum meeting',start: evtstart,end: evtend,fullname: 'terry li',confname: 'Meeting 1',confshortname: 'M1',confcolor: '#ff3f3f',confid: 'test1',allDay: false,topic: 'Daily Scrum meeting',description : 'Daily Scrum meeting',id: 1,}); }
以上代码将生成一些日历项目,显示在日历中。
$('#calendar').fullCalendar({ ...... dayClick: function(date, allDay, jsEvent, view) { // 定义了点击日历中日期格子的动作,这里将会调用jQueryUi的dialog生成创建新日历项的对话框...},eventClick: function(event) { // 定义了点击日历项的动作,这里将会调用jQueryUi的dialog显示日历项的内容},...
接下来是fullcalendar的几个方法,用来设置会议室预定系统日历项的显示,各自是eventRender, eventAfterRender,这里几个方法能够用来生成日历项的内容,详细例如以下:
eventRender: function(event, element) {var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); // Bug in IE8//element.html('<a href=#>' + fstart + "-" + fend + '<div style=color:#E5E5E5>' + event.title + "</div></a>");},eventAfterRender : function(event, element, view) {var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); //element.html('<a href=#><div>Time: ' + fstart + "-" + fend + '</div><div>Room:' + event.confname + '</div><div style=color:#E5E5E5>Host:' + event.fullname + "</div></a>");var confbg='';if(event.confid==1){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==2){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==3){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==4){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==5){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==6){confbg = confbg + '<span class="fc-event-bg"></span>';}else{confbg = confbg + '<span class="fc-event-bg"></span>';}var titlebg = '<span class="fc-event-conf" style="background:'+ event.confcolor +'">' + event.confshortname + '</span>';if(event.repweeks>0){titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>';}if(view.name=="month"){var evtcontent = '<div class="fc-event-vert"><a>';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + titlebg + '</span>';evtcontent = evtcontent + '<span>Room: ' + event.confname + '</span>';evtcontent = evtcontent + '<span>Host: ' + event.fullname + '</span>';evtcontent = evtcontent + '</a><div class="ui-resizable-handle ui-resizable-e"></div></div>';element.html(evtcontent);}else if(view.name=="agendaWeek"){var evtcontent = '<a>';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + titlebg + '</span>';evtcontent = evtcontent + '<span>' + event.confname + ' by ' + event.fullname + '</span>';//evtcontent = evtcontent + '<span>' + event.fullname + '</span>';evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';element.html(evtcontent); }else if(view.name=="agendaDay"){var evtcontent = '<a>';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + titlebg + '</span>';evtcontent = evtcontent + '<span>Room: ' + event.confname + '</span>';evtcontent = evtcontent + '<span>Host: ' + event.fullname + '</span>';evtcontent = evtcontent + '<span>Topic: ' + event.topic + '</span>';evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';element.html(evtcontent); }},
以上定义了相关会议室预定系统日历项显示方式, 以下介绍会议室预定系统日历项拖动和调整大小,代码片段例如以下:
eventDragStart: function( event, jsEvent, ui, view ) {ui.helper.draggable("option", "revert", true);},eventDragStop: function( event, jsEvent, ui, view ) {},eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { if(1==1||2==event.uid){var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};identityService.getToBeUpdatedConflictedScheduleDAO(schdata , {callback:function(data) { if(data.length== 0){ var newschdata = {sid:event.sid, startdate:event.start, enddate:event.end}; identityService.updateScheduleByNewDateRange(newschdata, {callback:function(data) { alert("Thanks, reservation rescheduled successfully.");//window.location.reload();} }); }else{revertFunc();alert("Sorry, reservation cannot be rescheduled.");} }});}else{revertFunc();}},eventResizeStart: function( event, jsEvent, ui, view ) {},eventResize: function(event,dayDelta,minuteDelta,revertFunc) {if(1==1||2==event.uid){var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};}else{revertFunc();}}});
以上代码假设须要具体说明,请大家參考官方文档,代码细节这里不再说明。 大家能够使用以下的演示代码执行一下。Fullcalendar是一个很有用的日历插件,使用得当能够开发很复杂的功能。比如,我们这里开发的会议室预定系统。强烈推荐!
转载于:https://www.cnblogs.com/blfshiye/p/4375528.html
jQuery插件实战之fullcalendar(日历插件)Demo相关推荐
- java显示日历 插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 生成日历主界面 FullC ...
- FullCalendar 二:FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光 时间:2013-09-15 13:53 标签: FullCalendar 日历 文档 FullCa ...
- fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果 文章目录 前言 一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
- fullcalendar php,php使用fullcalendar日历插件详解,fullcalendar日历
php使用fullcalendar日历插件详解,fullcalendar日历 最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 ...
- FullCalendar日历插件的简单使用(版本4.2.0)
最近开的一个项目,涉及到了日历日程安排的功能,所以选用了一个免费的日历插件:FullCalendar 1.首先去官网将官方的demo下载下来,通过官方的demo进行一个初步的了解,下面正式开始 PS: ...
最新文章
- 初识html语言,初识 “HTML”
- 笔试题——JavaScript事件循环机制(event loop、macrotask、microtask)
- CentOS6.5下编译R源码并安装Spark R
- 维护工厂的装运点确认
- Python 字符串换行的几种方式
- 设计模式——模板方法
- 使用.bat文件或者是cmd里面运行.jar文件
- Swift傻傻分不清楚系列(九)闭包
- IOS – OpenGL ES 调节图像对比度 GPUImageContrastFilter
- java 证书公钥 私钥_java#keytool#生成私钥证书库、公钥证书库
- 自己动手写Docker系列 -- 3.3使用命令管道优化参数传递
- C++ 类对象和 指针的区别
- 赠书 | 原动力——改变未来世界的5大核心力量
- TLSF算法2:位图的相关计算
- 我所理解的网络游戏一:网游的顶层设计
- java程序员书单--成长之路--职业发展,你读过几本
- ROC、PR曲线、AUC值
- 从零开始学Snaker(一)- 官方项目运行
- [转]ASP.Net+XML打造留言薄
- 微信小程序 使用map组件 地图获取位置、移动选点、逆地址解析
热门文章
- 剑指Offer #02 替换空格(字符串处理)
- 查询mysql所有对象_Mysql查看数据库对象(SQL命令总结)
- Linux服务器日常巡检脚本分享
- 程序员修炼之路:你该知道的 7 个必经阶段
- 高德最佳实践:Serverless 规模化落地有哪些价值?
- 云原生时代,应用架构将如何演进?
- ie浏览器怎么打开html,Win10系统IE浏览器不能打开HTML怎么办
- shell调用python函数 参数 返回_Python之系统shell交互(subprocess)
- java操作samba_使用Java和Samba JCIFS访问文件
- linux can 接收多帧_CAN编程介绍