渲染事件顶部完整日历

Question

我们在工作中使用jquery插件fullCalendar。但是，我们希望在每个日期列的顶部显示具有特定属性的特定事件。问题是，我不想改变Fullcalendar.js的源代码，如果我不需要，它甚至似乎是使用缩小的。js渲染事件。

我知道它存在一个触发自定义事件eventRender: function (event, element)的触发器，但我不知道如何在顶部呈现事件。对于这个例子，我们可以说事件有一个important属性。

所以我想这个伪代码会让我的例子更清楚:

eventRender: function (event, element) {
    if(event.important) {
        //render at top
    }
}

Answer 1

任务的要求改变了，现在每个事件都有一个特殊的优先级，它是一个整数。数字越高，说明它越重要。

旧

:

// Old function, this won't sort based on importance first!
function segCmp(a, b) {
    return (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start);
}

新:

function segCmp(a, b) {
    var priorityDiff = ((a.event.priority || 0) < (b.event.priority || 0)) ? 1 : ((b.event.priority || 0) < (a.event.priority || 0)) ? -1 : 0;
    if(priorityDiff != 0) return priorityDiff;
    return (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start);
}

对于想要使用这个的人，您的事件JSON必须看起来像这样:

{
allDay: false,
color: "#7BD148",
id: "1",
key: "1",
start: "2013-01-28 13:07:00",
title: "test event",
url: "http://google.se",
priority: 10
},
{
allDay: false,
color: "#7BD148",
id: "2",
key: "2",
start: "2013-01-28 12:07:00",
title: "test event 2",
url: "http://google.se",
priority: 5
},

正如您可能看到的那样，第二个事件被安排得更早，但是添加的代码将根据它们的优先级对两个事件排序。因此，第一个事件将先出现，第二个事件紧随其后。

这就是我如何解决它，优先级是一个整数，我试图排序，除非它们是相同的，或者如果它们不存在(null/undefined)。按最大整数排序。

Answer 2

FullCalendar从v.2.4.0开始添加了此功能。它被称为"eventOrder"，是一组日历选项。你可以传入事件属性的名称作为参数，它会根据属性的字母顺序对事件进行排序。

// start calendar
var $calendar = $("#calendar").fullCalendar({
    // Start of calendar settings
    header: {
        left: 'title',
        right: 'today,month,agendaDay,agendaWeek prev,next'
    },
    // setting to display sorted based on this property
    eventOrder: "priority",
    events: data
}

例如，data为:

data = [
    {
        title: "event1",
        start: "2017-01-25"
        priority: "a"
    },
    {
        title: "event2",
        start: "2017-01-26"
        priority: "b"
    },
    {
        title: "event3",
        start: "2017-01-27"
        priority: "c"
    }
]