[英]FullCalendar: Change agendaDay background-color
虽然我已经看到这个问题,但我还没有看到答案。 我只是希望能够在一定范围内为TD
的background-color
。
假设我的日历每15分钟有一个时段分钟,从早上9点到晚上9点,我想只在上午10点到下午3点之间进行颜色调整。
此信息将来自Feed,但这不是问题。 我没有找到TD
与日历内的设定时间有关。 也许我错过了什么? :)我对jQuery
和fullCalendar
很新。
另外,另一个与主要问题无关的快速问题:
id
? 我的页面上有多个日历来模拟甘特视图。 这将让我能够获取正确的Feed并填充正确的事件。 以下是针对您的第一个问题的功能请求: 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])));
}
最后我找到了一个js函数,它将mysql日期转换为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) {
它在td
元素上引入了fc-holiday
css类。
如果我们将假日数组项格式化为时间戳,然后调用$.inArray(+date, calendar.options.holidays)
,则可以改进性能。
这是一个快速而肮脏的概念验证,适用于周视图中最新版本的“agenda-views.html”演示文件。 它需要datejs和time.js(对于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'
}
]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.