fullCalendar日历视图切换问题

[code=javascript]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  <link rel="StyleSheet" type="text/css" href="/xd/css/yui/reset-fonts-grids.css" />
  <link rel="StyleSheet" type="text/css" href="/xd/css/yui/layout-core.css" />
  <link rel="StyleSheet" type="text/css" href="/xd/css/yui/layout-skin.css" />
  <link rel="stylesheet" type="text/css" href="/xd/css/yui/menu.css" />
  <link rel="stylesheet" type="text/css" href="/xd/css/yui/resize.css" />
  <link rel="stylesheet" type="text/css" href="/xd/css/yui/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="/xd/css/yui/container.css" />  
  
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/ico-light.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/ico.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/fam-css-sprite.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/default.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/menu.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/ui.theme.css" />
  <link rel="Stylesheet" type="text/css" href="/xd/css/default/jquery-ui.css" />

  <script type="text/javascript" src="/xd/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/xd/js/jquery.cookie.js"></script>
  <script type="text/javascript" src="/xd/js/jquery.outerHTML-2.0.0-min.js"></script>
  <script type="text/javascript" src="/xd/js/ui.datepicker.min.js"></script>
  <script type="text/javascript" src="/xd/js/ui.datepicker-zh-CN.min.js"></script>  <script type="text/javascript" src="/xd/js/default/menu.js"></script>
  <script type="text/javascript" src="/xd/js/default/mcrm.js"></script>
  <script type="text/javascript" src="/xd/js/admin.js"></script>
  <script type="text/javascript" src="/xd/js/checkform.js"></script>
  <script type="text/javascript" src="/xd/components/My97DatePicker/WdatePicker.js"></script>  <script type="text/javascript" src="/xd/js/yui/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="/xd/js/yui/element-min.js"></script>
  <script type="text/javascript" src="/xd/js/yui/selector-min.js"></script>
  <script type="text/javascript" src="/xd/js/yui/layout-min.js"></script>
  <script type="text/javascript" src="/xd/js/yui/dragdrop-min.js"></script>
  <script type="text/javascript" src="/xd/js/yui/container-min.js"></script>
  <script type="text/javascript" src="/xd/js/layer/layer.min.js"></script>     <link rel="Stylesheet" type="text/css" href="/xd/css/zTreeStyle/zTreeStyle.css" />
  <script type="text/javascript" src="/xd/js/zTreeStyle/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="/xd/js/zTreeStyle/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="/xd/js/zTreeStyle/jquery.ztree.exedit-3.5.js"></script>  <style type="text/css">
        /*
        #hd, .yui-layout-unit-top {
            background-color: blue;
            color: white;
        }
        */
        #bd, .yui-layout-unit-center {
            background-color: #ffffff;
        }

        #ft, .yui-layout-unit-bottom {
            background-color: #A8A8A8;
            color: #000000;
            height:30px;
            text-align:center;
        }
        /*
        #nav, .yui-layout-unit-left {
            background-color: #808080;
        }
        */
    .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
  </style>
  <script language="javascript">
        viewDisplay: function (view) {//动态把数据查出，按照月份动态查询

                var viewStart = $.fullCalendar.formatDate(view.start, "yyyyMMdd");
                var viewEnd = $.fullCalendar.formatDate(view.end, "yyyyMMdd");
                var URL="/xd/admin/manager/holiday/list.action";
                $.ajax({
                 url:URL,
                 type:'POST',
                 data:{viewStart:viewStart,viewEnd:viewEnd},
                 dataType:'html'
                });
                var days=[{"_databaseId":"mysql","databaseId":"mysql","date":"20131201","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131207","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131208","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131214","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131215","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131221","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131222","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131228","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131229","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20131231","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140104","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140105","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140111","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140112","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140118","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140119","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140125","id":0,"new":true},{"_databaseId":"mysql","databaseId":"mysql","date":"20140126","id":0,"new":true}];
                var currentDate=view.start;
                setFocusDays(days,'calendar',currentDate,view.name);
        },
        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
        }
      });
    }
  function setFocusDays(days,calendarID,currentDate,viewName) {
    //fullCalendar由于没有重新生成table，所以上一次对比可能成功的样式没有去掉
        //要注意先清空可能已经设置的td样式，要不对不不成功上一次设置的td样式还会保留下来
   $('#' + calendarID + ' th,#' + calendarID + ' td').removeClass({ 'background-color': 'red', color: 'white'});
   var divDay = viewName == 'month' ?  $('#' + calendarID + ' div.fc-day-number'):''
    , d, td, currentYear = currentDate.getFullYear(), currentMonth = currentDate.getMonth(), date = currentDate.getDate();
    //获取fullCalendar显示日期的div容器
        //获取fullCalendar显示日期的div容器
        var divDay = $('#calendar div.fc-day-number'), d, td,currentYear = currentDate.getFullYear(), currentMonth = currentDate.getMonth();
        var divMonth=$('#calendar div.fc-month-number');
        for (var i = 0; i < days.length; i++) {
        var yearStr=days[i].date.substr(0,4);
        var monthStr=days[i].date.substr(4,2);
        var dstr=days[i].date.substr(6,6);
         if (yearStr != currentYear || monthStr != currentMonth+1) continue;//不是当前年和月份继续下一次循环
         if(dstr<10){
         dstr=dstr.substr(1,1);
         }
            d = dstr; //获取日部分数据
             if (viewName == 'basicDay') { //按日显示,currentDate即为显示的日期
                if (d == date)//日对比成功
                    $('#' + calendarID + ' div.fc-view-basicDay').find('th,td').addClass({ 'background-color': 'red', color: 'white'});
                continue;
            }else if (viewName == 'basicWeek') { //按周显示，currentDate即为显示的周的星期一
                for (var j = 0; j < 7; j++)
                    if (d == date + j) {
                        $('#' + calendarID + ' div.fc-view-basicWeek').find('th:eq(' + j + ')').addClass({ 'background-color': 'red', color: 'white'}).end().find('td:eq(' + j + ')').addClass({ 'background-color': 'red', color: 'white'});
                        break;
                    }
                continue;
            }

            divDay.each(function () {//遍历fullCalendar日部分
                td = $(this).closest('td');
                //对比成功，还需要判断这个日期不是其他月份
                if (this.innerHTML == d && td.attr('class').indexOf('fc-other-month') == -1) {
                    td.css({ 'background-color': 'red', color: 'white'});
                }
            });
        }
    }</script>
<style type='text/css'>
#calendar {
  width: 900px;
  margin: 0 auto;
}
#cls  {
'background-color': 'red',
color: 'white'
}
.specialday{background-color:red;color:white}这是页面上浏览器编译后的代码为什么周和日的样式不改变呢？
days是日期对象数组，你要转换过来 var days=[new Date("2013/12/01"),new Date("2013/12/07")....];改正上面那样，如果你的days是自动生成的，要自己通过date对象生成上面这种形式的数据

调试易

fullCalendar日历视图切换问题

解决方案 »