当前位置: 代码迷 >> JavaScript >> fullcalendar日历控件怎么点击某一天后改变点击那一天的CSS样式
  详细解决方案

fullcalendar日历控件怎么点击某一天后改变点击那一天的CSS样式

热度:2227   发布时间:2014-01-03 14:10:51.0
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;',
          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);
                    });

                });