使用 fullCalendar

1.本地化

$(document).ready(function(){
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();
      // page is now ready, initialize the calendar...
      $('#calendar').fullCalendar({
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          today: ["今天"],
          buttonText: {
          today: '今天',
	  month: '月',
	  week: '周',
	  day: '日'
          },

      
      });

});

 

2.设置日历项的显示

$(document).ready(function(){ 
       eventAfterRender : function(event, element, view) {
          var fstart  = $.fullCalendar.formatDate(event.start, "HH:mm");
          var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");
          if(view.name=="agendaWeek"){
            var evtcontent = '<a>';
            evtcontent = evtcontent + '<span class="fc-event-bg"></span>';
            evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + "-" +  fend + event.title + '</span>';
            evtcontent = evtcontent + '<span>' +  event.description + '</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);
          }
        }

});

 

3.添加一个 "转到某日"功能.

$(document).ready(function(){
        //goto date function
	if($.browser.msie){
		$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
	}else{
		$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
	}

	$("#selecteddate").datepicker({
		dateFormat:'yy-mm-dd',
		beforeShow: function (input, instant) {
			setTimeout(
				function () {
					$('#ui-datepicker-div').css("z-index", 15);
				}, 100
			);
		}
	});

	$("#selectdate").click(function() {
		var selectdstr = 	$("#selecteddate").val();
		var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");
		$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
	});

});