Question

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

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

摘要：我想实现一个标准周时间表，1小时时间，绿色背景（如果小时可用）和红色（如果不可用）。
非常简单。

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

问题2：我想设置默认＆＃34; Foo＆＃34;每个可用时间段内的文字。

以下是代码：

    $('#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），另一个用于所有日子的事件。

这意味着您每个时段/天都没有单元格。即使你使用jQuery或CSS，你可以拥有的最多就是一个＆＃34; Foo＆＃34;对于每个时段。

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

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

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

1 个答案: