87,907
社区成员
发帖
与我相关
我的任务
分享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: ' ◄ ',
next: ' ► ',
prevYear: ' << ',
nextYear: ' >> ',
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);
});
});
},
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){
$("#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{
$("#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: '选择时间'
});
});
</script>
<style type='text/css'>
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<div class="yui-b">
<div class="yui-gb">
<div id='calendar'></div>
</div>
</div>
在线求高手帮忙啊 ！
...全文
请发表友善的回复…
发表回复
一天一篇的博客 2016-08-10
- 打赏
- 举报
我的提示 Uncaught TypeError: Cannot read property 'calendar' of undefined
请大神解救
Anno_ying 2015-09-18
- 打赏
- 举报
楼主你这问题当时解决了吗？希望能给我说一下，我现在也是这问题，非常感谢！
柒苒 2013-12-27
- 打赏
- 举报
好呢 我试试这个方法！
柒苒 2013-12-27
- 打赏
- 举报
额 不是吧！修改代码是不是太麻烦了点！
柒苒 2013-12-27
- 打赏
- 举报
viewDisplay这个事件能替换你的updateCells(firstTime) 么？
别闹腰不好 2013-12-26
- 打赏
- 举报
你这的修个插件元代吗
Go 旅城通票 2013-12-26
- 打赏
- 举报
保存直接用ajax发送你的数据到数据库就好了，懒的话直接window.open你那个url地址也行
dayClick: function (date, allDay, jsEvent, view) {
$(this).css('background-color', 'red');
var clickDate = view.calendar.formatDate(date, 'yyyyMMdd');
$.post('${base}/admin/manager/holiday/save.action', {"holiday.date": clickDate;});
},
设置节日，你可以viewDisplay事件中动态查询这个月的节日，然后对比日期获取td设置焦点就好，可以参考这个：fullCalendar设置日期td样式
pxy1510742 2013-12-26
- 打赏
- 举报
那你需要加背景色的数据肯定是从数据库中取出来的吧？
我项目的需求也差不多。
我是在fullcalendar.js文件中的function updateCells(firstTime) {}方法里面添加一个异步请求数据然后填充日历。
注： updateCells方法在每次变换（切换到上、下月）的时候会被调用。你可以试一下
柒苒 2013-12-26
- 打赏
- 举报
额 现在是可以有效果了 但是我想让页面初始化也显示特殊的日期这个要怎么实现啊？
pxy1510742 2013-12-26
- 打赏
- 举报
你这不是设置了，没有效果？
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;
},
保存可以考虑用异步
柒苒 2013-12-25
- 打赏
- 举报
来个人帮帮忙把！在线等啊 ！
柒苒 2013-12-25
- 打赏
- 举报
补充下 点击某天将该天的日期存入数据库中并且将该天显示为假日红色！
