Question

我想在basicweek中使用与在Agendaweek中相同的事件视图。（较暗的标题包含事件和事件的时间）然后浅蓝色包含信息。我在哪里可以推荐这种风格？

问候亚历山大

Answer 1

创建样式并将新样式名称添加到事件中的classname属性。

您可以在文档的“事件颜色”部分找到更多详细信息。 http://arshaw.com/fullcalendar/docs/event_rendering/Colors/

编辑

以下是一些示例代码：

＆lt; style type =“text / css”＆gt;

    .holiday, 
    .fc-agend a .holiday .fc-event-time,
    .holiday a
    {
        background-color: Olive; /* background color */
        border-color: Olive;     /* border color */
        color: White;           /* text color */
    }
    .holiday div
    {
       background-color: Black;
    }
    .vacation, 
    .fc-agend a .vacation .fc-event-time,
    .vacation a
    {
        background-color: Maroon; /* background color */
        border-color: Maroon;     /* border color */
        color: White;           /* text color */
    }
    .other, 
    .fc-agend a .other .fc-event-time,
    .other a
    {
        background-color: Fuchsia; /* background color */
        border-color: Fuchsia;     /* border color */
        color: White;           /* text color */
    }

</style>



    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev, next today',
                center: 'title',
                right: 'month, basicWeek, basicDay'
            },
            events: [
            {
                title: 'Top Half<div>Bottom Half</div>',
                start: new Date(y, m, 1),
                description: 'long description',
                className: 'holiday',
                id: 1
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, 1),
                description: 'long description3',
                className: 'vacation',
                id: 2
            }]
        });

    });

$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev, next today', center: 'title', right: 'month, basicWeek, basicDay' }, events: [ { title: 'Top Half<div>Bottom Half</div>', start: new Date(y, m, 1), description: 'long description', className: 'holiday', id: 1 }, { title: 'Long Event', start: new Date(y, m, d - 5), end: new Date(y, m, 1), description: 'long description3', className: 'vacation', id: 2 }] }); });

Answer 2

要获得两种颜色，您需要一些额外的步骤。您必须在一个地方修改fullcalendar.js脚本。

fullcalendar删除所有HTML，因此您必须修改行~3900并添加以下内容：

    return s.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#039;')
    .replace(/"/g, '&quot;')
    .replace(/\n/g, '<br />')
    .replace(/&lt;div&gt;/g, '<div>')
    .replace(/&lt;\/div&gt;/g, '</div>');

然后标题的格式化将是：

事件：'上半部＆lt; div＆gt;下半部分＆lt; / div＆gt;'

并在样式中为新div添加新样式

.holiday div { 背景颜色：黑色; }

自定义事件视图在基本视图中，如议程视图中

2 个答案: