用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

免费源代码下载整理    -  云代码空间

—— 每天更新整理各种PHP、JSP、ASP源代码,敬请关注我的微博 http://weibo.com/freecodedownload

日历页面开发jQuery插件 -fullcalendar【开发一个功能完整的富客户端会议室预定系统】

2013-07-02|12919阅||

摘要:        jQuery插件非常多,应用的场景也非常丰富,今天我这里给大家介绍一款非常实用的日历页面开发jQuery插件 -fullcalendar,目前最新版本是1.5.1,使用这款jQuery插件能够快速帮助你快速编程实现基于web的日历查看功能,大家可能都使用过outl

        jQuery插件非常多,应用的场景也非常丰富,今天我这里给大家介绍一款非常实用的日历页面开发jQuery插件 -fullcalendar,目前最新版本是1.5.1,使用这款jQuery插件能够快速帮助你快速编程实现基于web的日历查看功能,大家可能都使用过outlook的日历项功能,使用日历界面能更方便的查看待办事项或者约会。开发过程快速方便。这个jQuery插件的文档也非常全。当然目前只有英文文档。不过这个jQuery插件支持多语言,对于我们这些使用jQuery的开发人员来说非常不错。

        在以前的公司web应用程序开发中,我曾经使用这个jQuery插件开发了公司内部的会议室预定系统,这里我简单的介绍一下fullcalendar的相关开发,并且实例讲解一下如何使用这个插件开发日历,其中会使用到fullcalendar里相关的高级功能,例如,拖拽修改时间,生成个性化的会议室预定系统日历项内容。以上代码都是实际项目中使用的前台,大家如果需要可以直接修改使用,但请自己修改相关的jQuery代码。

jQuery插件实战之fullcalendar(日历插件) - 使用fullcalendar开发一个功能完整的富客户端会议室预定系统

下载地址:富客户端会议室预定系统 基于jquery插件fullcalendar - javascript代码库 - 云代码 http://yuncode.net/code/c_51d23320445d279

项目需求:

1. 需要在fullcalendar的原有界面上美化,这里我们使用jQueryUI来实现界面美化,因为fullcalendar可以很好的和jQueryUI无缝整合

2. 生成单独的日历项添加和查看功能,这里仍旧使用jQueryUI的dialog来实现

3. 因为是一个实际项目,需要数据验证,所以这里我们使用formVaildator插件实现

4. 添加一个 "转到某日"功能, 这个界面功能在Fullcalendar里没有,我们可以通过编程添加类似一个功能,其中调用了datepicker的一个addon,后面会介绍到

5. 周和日浏览可以自由的支持拖拽和移动,用来修改日期和时间

6. 浏览器支持: IE8,IE9,Chrome和Firefox,其它浏览器没测试,请自己针对性的修改js

jQuery相关插件:

1. fullcalendar

提供Calendar功能

2. formValidator

提供输入验证功能input validation

3. Timepicker Addon for jQuery UI Datepicker

提供datepicker时间选择功能

开发代码:

导入相关jQuery插件类库,如下:


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  <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();                      }                                            });                    


以上代码如果需要详细说明,请大家参考官方文档,代码细节这里不再说明。 大家可以使用下面的演示代码运行一下。Fullcalendar是一个非常实用的日历插件,使用得当可以开发非常复杂的功能。例如,我们这里开发的会议室预定系统。强烈推荐!

顶 19踩 11收藏
文章评论
    发表评论

    个人资料

    • 昵称: 免费源代码下载整理
    • 等级: 资深程序员
    • 积分: 1676
    • 代码: 110 个
    • 文章: 56 篇
    • 随想: 5 条
    • 访问: 425 次
    • 关注

    最新提问

      站长推荐