Jquery FullCalendar - AgendaWeek 视图中可用时间段的默认背景和文本

Question

我正在使用 jquery FullCalendar agendaWeek 视图（没有其他视图）。
http://fullcalendar.io/views/agendaWeek/

我将实现 3 个 eventSources（每个都有不同的背景颜色）。
所有事件都将是 backgroundEvents。
http://fullcalendar.io/docs/event_rendering/Background_Events/

总结：我想实施一个标准周时间表，有 1 小时的时间段，如果时间可用则为绿色背景，如果时间不可用则为红色。
极其简单。

问题 1： 我想为所有可用时间段（= 没有事件的时间段）设置绿色背景。

问题 2： 我想在每个可用时间段内设置默认 "Foo" 文本。

代码如下：

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'

        },
        defaultDate: '2015-02-12',
        slotDuration: '00:60:00',
        minTime: "08:00:00",
        maxTime: "22:00:00",
        defaultView: 'agendaWeek',
        lang: "it",
        height: "auto",
        allDaySlot: false,
        axisFormat: 'H:mm',
        editable: true,
        events: [

            {
                id: 'Meeting1',
                start: '2015-02-11T10:00:00',
                end: '2015-02-11T11:00:00',
                rendering: 'background',
                backgroundColor: 'red'
            },
            {
                id: 'Meeting2',
                start: '2015-02-13T15:00:00',
                end: '2015-02-13T16:00:00',
                rendering: 'background',
                color: 'red'
            },


        ]
    });

请注意（如上所述），在实际项目中，事件数据将来自 3 ajax 个来源......但是（出于这个特定问题的目的）上面的代码作为数组传递。

Answer 1

对于您的第一个问题，您可以使用以下方法更改颜色 CSS：

.fc-widget-content {
    background-color: green;
}

.fc-axis {
    background-color: white;
}

.fc-bgevent {
    opacity: 1;
}

选中显示您想要的结果的 this jsfiddle。

你的第二个问题比较复杂，我还没有找到简单的解决办法。您需要知道日历是通过表格构建的，每个时间段都有两个单元格（<td>）。一个是时间轴（例如：09:00、10:00、11:00），另一个是所有天的事件。

这意味着您没有每个 timeslot/day 的单元格。即使你使用jQuery或CSS，每个时隙最多只能有一个"Foo"。

事件是 position: absolute 位于单元格顶部的 div。

解决您的问题的一种方法是（在服务器端）为每个可用的时间段创建一个具有绿色背景和 "Foo" 文本的事件。但是，这可能会增加呈现日历所需的时间。

Jquery FullCalendar - AgendaWeek 视图中可用时间段的默认背景和文本

Jquery FullCalendar - Default Background and Text for Available TimeSlots in AgendaWeek view

jquery

fullcalendar