导航
  • 全部
...

fullCalendar日历视图切换问题

柒苒 2014-01-02 10:45:58 
  1. <head>

  3. <link rel='stylesheet' type='text/css' href='${base}/components/fullcalendar/fullcalendar.css' />
  4. <link rel='stylesheet' type='text/css' href='${base}/components/fullcalendar/fullcalendar.print.css' media='print' />

  6. <script type='text/javascript' src='${base}/js/jquery-ui-1.10.2.custom.min.js'></script>
  7. <script type='text/javascript' src='${base}/components/fullcalendar/fullcalendar.min.js'></script>
  8. <script type='text/javascript' src='${base}/components/fullcalendar/gcal.js'></script>
  9. <script language="javascript">
  10.   $(document).ready(function(){
  11.     if ($('#calendar') != null) {
  12.       var date = new Date();
  13.       var d = date.getDate();
  14.       var m = date.getMonth();
  15.       var y = date.getFullYear();
  16.       
  17.       $('#calendar').fullCalendar({
  18.         header: {
  19.           left: 'prev,next today',
  20.           center: 'title',
  21.           right: 'month,basicWeek,basicDay'
  22.         },
  23.         dayClick: function(date, allDay, jsEvent, view) {
  24.           $(this).css('background-color', 'red');
  25.           var clickDate = view.calendar.formatDate(date,'yyyyMMdd');
  26.           window.location="${base}/admin/manager/holiday/save.action?holiday.date="+clickDate;
  27.           
  28.         },
  29.         eventClick: function(calEvent, jsEvent, view) {
  30.           window.location="${base}/admin/manager/holiday/load.action?event.id="+calEvent.id;
  31.         },
  32.         
  33.         firstDay: 0,
  34.         monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  35.         monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  36.         dayNames: ['周日','周一','周二','周三','周日','周五','周六'],
  37.         dayNamesShort: ['日','一','二','三','四','五','六'],
  38.         buttonText: {
  39.           prev: ' ◄ ',
  40.           next: ' ► ',
  41.           prevYear: ' << ',
  42.           nextYear: ' >> ',
  43.           today: '今天',
  44.           month: '月',
  45.           week: '周',
  46.           day: '日'
  47.         },
  48.         viewDisplay: function (view) {//动态把数据查出，按照月份动态查询
  49.         
  50.                 var viewStart = $.fullCalendar.formatDate(view.start, "yyyyMMdd");
  51.                 var viewEnd = $.fullCalendar.formatDate(view.end, "yyyyMMdd");
  52.                 var URL="${base}/admin/manager/holiday/list.action";
  53.                 $.ajax({
  54.                 	url:URL,
  55.                 	type:'POST',
  56.                 	data:{viewStart:viewStart,viewEnd:viewEnd},
  57.                 	dataType:'html'
  58.                 });
  59.                 var days=${jsonDate};
  60.                 var currentDate=view.start;
  61.                 setFocusDays(days,currentDate);
  62.         },
  63.         titleFormat: {
  64.           month: 'yyyy年MMMM',
  65.           week: "yyyy年MMMd{ '—' d}日",
  66.           day: 'yyyy年MMMMd日 dddd'
  67.         },
  68.         columnFormat: {
  69.           month: 'ddd',
  70.           week: 'ddd M/d',
  71.           day: 'dddd M/d'
  72.         },
  73.         timeFormat: { // for event elements
  74.           '': 'HH:mm-' // default
  75.         }
  76.       });
  77.     }
  78.     if($.browser.msie){   
  79.     alert('1111');
  80.         $("#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>');
  81.     }else{   
  82.     alert('1111');
  83.         $("#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>');
  84.     }   
  85.   
  86.     $("#selectdate").click(function() {
  87.         var selectdstr = $("#selecteddate").val();   
  88.         var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");   
  89.         $('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
  90.     });   
  91.     $("#selecteddate").datepicker({ changeMonth: true,
  92. 	                                changeYear: true,
  93. 	                                showButtonPanel: true,
  94. 	                                dateFormat: 'yy-mm-dd',
  95. 	                                showOtherMonths: true,
  96. 	                                yearRange: '-10:+10',
  97. 	                                duration: 'fast',
  98. 	                                buttonImage: '${base}/images/default/date.png',
  99. 	                                showOn: 'button',
  100. 	                                buttonImageOnly: true,
  101. 	                                buttonText: '选择时间'
  102. 	                                });

  104.   });
  105.   function setFocusDays(days,currentDate) {
  106.         //获取fullCalendar显示日期的div容器
  107.         var divDay = $('#calendar div.fc-day-number'), d, td,currentYear = currentDate.getFullYear(), currentMonth = currentDate.getMonth();
  108.         var divMonth=$('#calendar div.fc-month-number');
  109.         for (var i = 0; i < days.length; i++) {
  110.         var yearStr=days[i].date.substr(0,4);
  111.         var monthStr=days[i].date.substr(4,2);
  112.         var dstr=days[i].date.substr(6,6);
  113.          if (yearStr != currentYear || monthStr != currentMonth+1) continue;//不是当前年和月份继续下一次循环
  114.         	if(dstr<10){
  115.         		dstr=dstr.substr(1,1);
  116.         	}
  117.             d = dstr; //获取日部分数据
  118.             divDay.each(function () {//遍历fullCalendar日部分
  119.                 td = $(this).closest('td');
  120.                 //对比成功，还需要判断这个日期不是其他月份
  121.                 if (this.innerHTML == d && td.attr('class').indexOf('fc-other-month') == -1) {
  122.                     td.css({ 'background-color': 'red', color: 'white'});
  123.                 }
  124.             });
  125.         }
  126.     }
  127. </script>
  128. <style type='text/css'>
  129. #calendar {
  130.   width: 900px;
  131.   margin: 0 auto;
  132. }
  133. #cls  { 
  134. 	'background-color': 'red', 
  135. 	color: 'white'
  136. }
  137. </style>

  139. </head>
  140.         <div class="yui-b">
  141.           <div class="yui-gb">
  142.           	<div></div>
  143.             <div id='calendar'></div>
  144.           </div>
  145.         </div>

现在周个日的视图不能显示特殊显示周末 并且周视图切换为月视图时周末显示错乱 上月的周末日期（dd）在本月也会特殊显示为周末请高手帮忙看看那些错啦？
...全文
给本帖投票
1305 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
斯洛文尼亚旅游 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" /> <!--[if IE]><LINK rel=StyleSheet type=text/css href="/xd/css/default/menu_ie.css"><![endif]--> <!--[if IE 8]><LINK rel=StyleSheet type=text/css href="/xd/css/default/menu_ie8.css"><![endif]--> <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> <!-- Ztree --> <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} 这是页面上浏览器编译后的代码 为什么周和日的样式不改变呢？
fullCalendar 增加年视图版
基于fullCalendar2.2.7 增加年视图，方便大方
fullcalendar日历 可点击事件
fullcalendar日历 可点击事件
周视图日历+日程Demo
简单Android周视图日历 + 日程Demo，代码简单，日程用横向ListView（HorizontalListView）列表形式，用于参考
fullcalendar支持农历 年历
fullcalendar支持农历 节气 节假日 完成年历功能 可以支持假期，选择等功能
Strues2+JSP+Fullcalendar 日历任务提醒
支持日、周、月三视图，和google calendar很相似！后台struts2
JavaScript

87,994

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章
手机看
关注公众号

关注公众号

 客服 返回
顶部