使用 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 + fend + event.title + '</span>'; evtcontent = evtcontent + '<span>' + event.description + '</span>'; evtcontent = evtcontent + '</a><span name="code">$(document).ready(function(){ ?//goto date functionif($.browser.msie){$("#calendar .fc-header-right table td:eq(0)").before('<td><div style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div 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());});});