日期:2014-05-16  浏览次数:20394 次

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: '&nbsp;&#9668;&nbsp;',
          next: '&nbsp;&#9658;&nbsp;',
          prevYear: '&nbsp;&lt;&lt;&nbsp;',
          nextYear: '&nbsp;&gt;&gt;&nbsp;',