虽然我看到了这个问题，但我还没有看到答案。我只是希望能够从某个范围内为background-color的着色..TD
假设我的日历每 15 分钟有一个时段，从上午 9 点到晚上 9 点，我只想在上午 10 点到下午 3 点使用不同的颜色。
此信息将来自提要，但这不是问题。我还没有TD在日历中找到与设定时间相关的 s。也许我错过了什么？:) 我对jQueryand比较陌生fullCalendar。
另外，另一个与主要问题无关的快速问题：
id启动它的日历？我的页面上有多个日历来模拟甘特视图之类的东西。这将使我能够获取正确的提要并填充正确的事件。这是您的第一个问题的功能请求： http ://code.google.com/p/fullcalendar/issues/detail?id=144 确保为它加星以接收更新。谢谢
我写了一些简单的注释支持来做这种功能，可以从
https://github.com/elhigu/fullcalendar
希望它在某个时候被合并到官方分支
可以像这样添加注释：
$('#calendar').fullCalendar({
....
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
}
],
annotations: [{
start: new Date(y, m, d, 13, 0),
end: new Date(y, m, d, 15, 30),
title: 'My 1st annotation', // optional
cls: 'open', // optional
color: '#777777', // optional
background: '#eeeeff' // optional
}, { next annotation }, ...]
});
})
如何使用注释的完整示例可以在这里找到： https ://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html
我现在正在工作的项目中需要此功能。这是一个学校项目，如果那天是假日活动+周末，我必须用红色突出背景。请注意，这里所有的星期六都不是节假日。一些学校只在第二个星期六放假，或者在一些学校随机选择星期六作为工作日。
不知何故，我克服了这个问题，即使它不是一个优雅的解决方案。
在版本 1.5.1 的第 2291 行添加此行
var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix
从 2300 到 2304 用以下代码替换行
if (+date == +today) {
cell.addClass(tm + '-state-highlight fc-today');
}else if($.inArray(+date, refDate)!=-1){ //Added by me
cell.addClass(tm + '-state-error'); //Added by me
}else{
cell.removeClass(tm + '-state-highlight fc-today');
cell.removeClass(tm + '-state-error'); //Added by me
}
在调用完整的日历之前，您需要创建一个转换为 js 日期对象的日期数组，然后通过在其前面添加一个 + 符号将其转换为长整数，像这样
var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31'];
window.holidays = [];
for(var i=0; i<holidayArray.length;i++){
holidays.push(+(mysqlDateToJSDate(holidayArray[i])));
}
最后我找到了一个将mysql日期转换为js日期对象的js函数。
function mysqlDateToJSDate(date) {
var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/;
var parts=date.replace(regex,"$1 $2 $3").split(' ');
return new Date(parts[0],parts[1]-1,parts[2],0,0,0);
}
调用完整日历后，不要忘记删除全局变量。
我知道创建一个全局变量不是一件好事。但是考虑到完整的日历非常活跃，经常修复错误和新功能，我不想过多地干预代码。我不知道如何将变量作为选项传递并轻松将其放在我想要的位置。
这仅在月视图上完成。我们也需要对其他视图做同样的事情......
无法发布预览，但您可以在此处查看。
我采用了@Jegatheesh 的解决方案并将其更改为不访问全局变量并使用内置格式。这是针对 1.5.3
--- i/fullcalendar.js
+++ w/fullcalendar.js
@@ -29,6 +29,7 @@ var defaults = {
right: 'today prev,next'
},
weekends: true,
+ holidays: [],
// editing
//editable: false,
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) {
}
if (+date == +today) {
cell.addClass(tm + '-state-highlight fc-today');
+ cell.removeClass(tm + '-holiday');
+ }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) {
+ cell.addClass(tm + '-holiday');
}else{
- cell.removeClass(tm + '-state-highlight fc-today');
+ cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday');
}
cell.find('div.fc-day-number').text(date.getDate());
if (dowDirty) {
它在元素上引入了fc-holidaycss 类。td
如果我们将假期数组项格式化为时间戳然后调用，则可以提高性能$.inArray(+date, calendar.options.holidays)。
这是一个快速而肮脏的概念证明，适用于周视图中最新版本的“agenda-views.html”演示文件。它需要带有 time.js 的 datejs（用于 TimeSpan），并且当前不适用于滚动，但可以轻松调整。另请参阅整页要点：https ://gist.github.com/3005635
var resAvail = [
{
DayOfWeek: 0,
Start: new Date(y, m, d, 10, 0),
End: new Date(y, m, d, 17, 30)
},
{
DayOfWeek: 1,
Start: new Date(y, m, d, 9, 0),
End: new Date(y, m, d, 19, 30)
},
{
DayOfWeek: 4,
Start: new Date(y, m, d, 12, 0),
End: new Date(y, m, d, 20, 00)
}
]
var view = calendar.fullCalendar('getView');
var slotHeight = view.getSlotHeight();
var slotMins = calendar.fullCalendar('option', 'slotMinutes');
var minTime = calendar.fullCalendar('option', 'minTime');
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top;
// rip through days of week
for (i = 0; i < 7; i++) {
for (r = 0; r < resAvail.length; r++) {
var currentRes = resAvail[r];
if (currentRes.DayOfWeek == i) {
addAvailBlock(currentRes);
}
}
}
function addAvailBlock(currentRes) {
var dayColumn = getDayColumn(i);
var $availBlock = $('<div class="avail-block"></div>');
dayColumn.append($availBlock);
$availBlock.css('width', $availBlock.parent().css('width'));
// Where we start the availability block
var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime);
var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart);
var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60);
var startOffsetSlots = startOffsetMins / slotMins;
var startOffsetHeight = startOffsetSlots * slotHeight;
var blockSpan = new TimeSpan(currentRes.End - currentRes.Start);
var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60);
var blockSlots = blockMins / slotMins;
var blockHeight = blockSlots * slotHeight;
$availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight);
}
function getDayColumn(dayOfWeek) {
switch (dayOfWeek) {
case 0:
return $('.fc-sun');
case 1:
return $('.fc-mon');
case 2:
return $('.fc-tue');
case 3:
return $('.fc-wed');
case 4:
return $('.fc-thu');
case 5:
return $('.fc-fri');
case 6:
return $('.fc-sat');
}
}
从 2.2 版开始，您可以使用后台事件
$('#calendar').fullCalendar({
defaultDate: '2014-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2014-11-10T10:00:00',
end: '2014-11-10T16:00:00',
rendering: 'background'
}
]
});