最近接到一項工作任務，需要展示並列印一週內24小時的排班資訊，便想到使用jquery周曆外掛實現，下面是效果圖尚未經過美工打磨。

下面說下，實現過程。

一、依賴的js檔案

<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/full_demo/reset.css' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/libs/css/smoothness/jquery-ui-1.8rc3.custom.css' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/jquery.weekcalendar.css?time=2' />
<link rel='stylesheet' type='text/css' href='<%=basePath%>/plugins/jquery-week-calendar-master/full_demo/demo.css' />
<script type='text/javascript' src='<%=basePath%>/plugins/jquery-week-calendar-master/jquery.weekcalendar.js'></script>
 

二、jsp程式碼

<div id='calendar'></div>

$(function() {
	$(".datepicker").datepicker({
		format : 'yyyy-mm-dd',
		autoclose: true,
		language :"cn",
		todayHighlight: true
	}).on("changeDate",changeasdDate);
	var $calendar = $('#calendar');
	//設定定時器,防止外掛未計算完單元格高度載入頁面導致頁面顯示有問題
	setTimeout(function() {
		$calendar.weekCalendar({
			timeslotsPerHour : 1,
			  timeslotHeight: 100,
		      allowCalEventOverlap : true,
		      overlapEventsSeparate: true,
			  timeFormat : "h:i",
		      dateFormat : "Y-m-d",
			  use24Hour: true,
			  readonly : false,
		      firstDayOfWeek : 0,
		      businessHours :{start: 0, end: 24, limitDisplay: true },
		      daysToShow : 7,
			  buttonText : {
		            today : "本週",
		            lastWeek : " < ",
		            nextWeek : " > "
		         },
		      height : function($calendar) {
		         return $(window).height() - $("h1").outerHeight() - 1;
		      },
		      calendarAfterLoad : function(calEvent) {
		         
		        
		      },
		      eventClick : function(calEvent, $event) {
		    	  
		    	  Date.prototype.Format = function (fmt) { //author: meizz 
		    			var o = {
		    	        "M+": this.getMonth() + 1, //月份 
		    	        "d+": this.getDate(), //日 
		    	        "h+": this.getHours(), //小時 
		    	        "m+": this.getMinutes(), //分 
		    	        "s+": this.getSeconds(), //秒 
		    	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		    	        "S": this.getMilliseconds() //毫秒 
		    			};
		    	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    	    for (var k in o)
		    	    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    	    return fmt;
		    	}
		    	  
		    	  if(calEvent==null || calEvent.title=='' || calEvent.title =="New Event") {
		    		  calEvent.readOnly = true;
		    	  }
		          if (calEvent.readOnly) {
		             return;
		          }
		          if(calEvent.title!=undefined &&calEvent.title!=null && calEvent.title!='' && calEvent.title !="New Event") {
		        	  var nowDateStr = calEvent.start.Format("yyyy-MM-dd hh:mm:ss");
		        	  $('.danyuangeTableTh').html("時間"+ nowDateStr);
		        	  $('#danyuangeTitle').html('<font style="font-size:15px;">'+calEvent.title+'</font>');
				      $('#event_edit_container').modal('show');
		          }
		       },
		      draggable : function(calEvent, $event) {
		         return calEvent.readOnly != true;
		      },
		      resizable : function(calEvent, $event) {
		         return calEvent.readOnly != true;
		      },
		      eventDrop : function(calEvent, $event) {
		          
		      },
		      eventResize : function(calEvent, $event) {
		      },
		      eventMouseover : function(calEvent, $event) {
		      },
		      eventMouseout : function(calEvent, $event) {
		      },
		      noEvents : function() {

		      },
		      data : function(start, end, callback) {
		         callback(getEventData(start));
		      }    
		});
	}, 200);
	
	
	 /*$(".wc-time-slot-wrapper .wc-time-slot").height(100);
     $(".wc-day-column-inner .wc-cal-event").css("display","block");*/
}); 
 

function getEventData(start) {
	/*var year = start.getFullYear();
    var month = start.getMonth();
    var day =  start.getDate();
    var dataArr111 = new Array();
    var dataObj111 = new Object();
    dataObj111.id =1;
    dataObj111.start = new Date(year, month, day, 15);
    dataObj111.end =  new Date(year, month, day, 16);;
    dataObj111.title =  "今天1111值班";
    
    var dataObj2 = new Object();
    dataObj2.id =1;
    dataObj2.start = new Date(year, month, day+1, 15);
    dataObj2.end =  new Date(year, month, day+1, 16);;
    dataObj2.title =  "今天2222值班";
    
    var dataObj3 = new Object();
    dataObj3.id =1;
    dataObj3.start = new Date(year, month, day+2, 15);
    dataObj3.end =  new Date(year, month, day+2, 16);;
    dataObj3.title =  "今天3333值班";
    
    dataArr111.push(dataObj111);
    dataArr111.push(dataObj2);
    dataArr111.push(dataObj3);
    
    var  weekObj = new Object();
    weekObj.events = dataArr111;
    alert(JSON.stringify(weekObj));
    return weekObj;*/
	var time1 = start.Format("yyyy-MM-dd");
	var year = start.getFullYear();
	var month = start.getMonth();
	var day =  start.getDate();
	var  weekObj = new Object();
	$('#staffWorkListToolbar input[name="scheduleDay"]').val(time1);
	$.ajax({
      type: "post",
      dataType: 'json',
      async: false,
      data : {"scheduleDay":time1,"shopCode":shopCode,"yearTime":year,"monthTime":month,"dayTime":day},
		url: contextPath + '/shopWorker/queryWorkerBatchFlex',
		success:function(json){
			 var dataRecords = json.data;
			 if(dataRecords!=null && dataRecords.length>=1) {
				 weekObj.events = dataRecords;
			 }else{
				 var initArr = new Array();
				 var count = 1;
				 for(var i=1;i<=1;i++) {
					 var initObj = new Object();
					 initObj.id = count;
					 initObj.start = new Date(year,month,day,10);
					 initObj.end= new Date(year,month,day,11);
					 initObj.title = null;
					 initArr.push(initObj);
				 }
				 weekObj.events = initArr;
			 }    
		},
      error: function () {
          alert('根據門店編碼查詢人員上班表錯誤!');
      }
	});
	return   weekObj;
}