fullcalendar日历控件如何点击某一天后改变点击那一天的CSS样式
代码是这样的
<head>
<link rel='stylesheet' type='text/css' href='${base}/components/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='${base}/components/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='${base}/js/jquery-ui-1.10.2.custom.min.js'></script>
<script type='text/javascript' src='${base}/components/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='${base}/components/fullcalendar/gcal.js'></script>
<script language="javascript">
$(document).ready(function(){
if ($('#calendar') != null) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
dayClick: function(date, allDay, jsEvent, view) {
$(this).css('background-color', 'red');
var clickDate = view.calendar.formatDate(date,'yyyyMMdd');
window.location="${base}/admin/manager/holiday/save.action?holiday.date="+clickDate;
},
eventClick: function(calEvent, jsEvent, view) {
window.location="${base}/admin/manager/holiday/load.action?event.id="+calEvent.id;
},
firstDay: 1,
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames: ['周日','周一','周二','周三','周日','周五','周六'],
dayNamesShort: ['日','一','二','三','四','五','六'],
buttonText: {
prev: ' ◄ ',
next: ' ► ',
prevYear: ' << ',
nextYear: ' >> ',
today: '今天',
month: '月',
week: '周',
day: '日'
},
viewDisplay: function (view) {//动态把数据查出，按照月份动态查询
var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
$("#calendar").fullCalendar('removeEvents');
$.post("../../sr/AccessDate.ashx", { start: viewStart, end: viewEnd }, function (data) {
var resultCollection = jQuery.parseJSON(data);
$.each(resultCollection, function (index, term) {
$("#calendar").fullCalendar('renderEvent', term, true);
});
});
},
titleFormat: {
month: 'yyyy年MMMM',
week: "yyyy年MMMd{ '—' d}日",
day: 'yyyy年MMMMd日 dddd'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
day: 'dddd M/d'
},
timeFormat: { // for event elements
'': 'HH:mm-' // default
}
});
}
if($.browser.msie){
$("#calendar .fc-header-left").append('<span><input type="text" id="selecteddate" size="8" maxLength="10" class="mcrm-input"><SPAN class=fc-header-space></SPAN><span id="selectdate" title="查询日期格式为:yyyy-mm-dd" class="fc-button fc-state-default fc-corner-left fc-corner-right"><span class=fc-button-inner><SPAN class=fc-button-content><@ww.text name="search"/></span></span></span></span>');
}else{
$("#calendar .fc-header-left").append('<span><input type="text" id="selecteddate" size="8" maxLength="10" class="mcrm-input"><SPAN class=fc-header-space></SPAN><span id="selectdate" title="查询日期格式为:yyyy-mm-dd" class="fc-button fc-state-default fc-corner-left fc-corner-right"><span class=fc-button-inner><SPAN class=fc-button-content><@ww.text name="search"/></span></span></span></span>');
}
$("#selectdate").click(function() {
var selectdstr = $("#selecteddate").val();
var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");
$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
});
$("#selecteddate").datepicker({ changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
yearRange: '-10:+10',
duration: 'fast',
buttonImage: '${base}/images/default/date.png',
showOn: 'button',
buttonImageOnly: true,
buttonText: '选择时间'
});
});
</script>
<style type='text/css'>
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<div class="yui-b">
<div class="yui-gb">
<div id='calendar'></div>
</div>
</div>
