fullCalendar日历视图切换问题

柒苒 2014-01-02 10:45:58

<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: 0,

        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, "yyyyMMdd");

                var viewEnd = $.fullCalendar.formatDate(view.end, "yyyyMMdd");

                var URL="${base}/admin/manager/holiday/list.action";

                $.ajax({

                	url:URL,

                	type:'POST',

                	data:{viewStart:viewStart,viewEnd:viewEnd},

                	dataType:'html'

                });

                var days=${jsonDate};

                var currentDate=view.start;

                setFocusDays(days,currentDate);

        },

        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){   

    alert('1111');

        $("#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{   

    alert('1111');

        $("#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: '选择时间'

	                                });



  });

  function setFocusDays(days,currentDate) {

        //获取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; //获取日部分数据

            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'

}

</style>



</head>

        <div class="yui-b">

          <div class="yui-gb">

          	<div></div>

            <div id='calendar'></div>

          </div>

        </div>

现在周个日的视图不能显示特殊显示周末并且周视图切换为月视图时周末显示错乱上月的周末日期（dd）在本月也会特殊显示为周末请高手帮忙看看那些错啦？

...全文

1142 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2014-01-02

打赏
举报

days是日期对象数组，你要转换过来 var days=[new Date("2013/12/01"),new Date("2013/12/07")....]; 改正上面那样，如果你的days是自动生成的，要自己通过date对象生成上面这种形式的数据

柒苒 2014-01-02

打赏
举报

[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} 这是页面上浏览器编译后的代码为什么周和日的样式不改变呢？