FullCalendar：更改agendaDay背景颜色

Question

虽然我已经看到这个问题，但我还没有看到答案。我只是希望能够从某个范围为background-color的{​​{1}}着色..

假设我的日历每隔15分钟有一个时段分钟，从早上9点到晚上9点，我想只在上午10点到下午3点之间进行颜色调整。

此信息将来自Feed，但这不是问题。我没有找到与日历中的设定时间相关的TD。也许我错过了什么？ :)我对TD和jQuery很新。

另外，另一个与主要问题无关的快速问题：

• 是否可以从事件处理程序获取启动它的日历的fullCalendar？我的页面上有多个日历来模拟甘特视图。这将使我能够获取正确的Feed并填充正确的事件。

Answer 1

这是您第一个问题的功能请求： http://code.google.com/p/fullcalendar/issues/detail?id=144 确保将其加注星标以接收更新。感谢

Answer 2

我写了一些简单的注释支持来做这种功能，可以从

找到

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

Answer 3

我在现在正在工作的项目中需要此功能。这是一个学校项目，如果那天是假日活动+周末，我必须用红色突出显示背景。请注意，这里所有星期六都不是假期。有些学校只在第二个星期六或某些学校有假期，随机星期六将被选为工作日。

不知怎的，我克服了这个问题，即使它不是一个优雅的解决方案。

在版本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);
}

调用完整日历后，不要忘记删除全局变量。

我知道创建一个全局变量并不是一件好事。但考虑到完整的日历非常活跃，经常修复错误和新功能，我不想过多介入代码。我不知道如何将变量作为一个选项传递出去，并轻松地将其传递到我想要的位置。

这仅在月视图上完成。我们也需要在其他观点上做同样的事情......

无法发布预览但您可以看到here。

Answer 4

我采用@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-holiday元素上引入了td css类。

如果我们将假日数组项格式化为时间戳，然后再调用$.inArray(+date, calendar.options.holidays)，则可以改进性能。

Answer 5

这是一个快速而肮脏的概念验证，适用于周视图中最新版本的“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');
    }
}

Answer 6

从2.2版开始，您可以使用Background Events

$('#calendar').fullCalendar({
    defaultDate: '2014-11-10',
    defaultView: 'agendaWeek',
    events: [
        {
            start: '2014-11-10T10:00:00',
            end: '2014-11-10T16:00:00',
            rendering: 'background'
        }
    ]
});