顶级fullcalendar上的渲染事件

我们在工作中使用jquery插件fullCalendar。但是，我们希望在每天的列中显示某些属性在顶部的特定事件。问题是我不想更改Fullcalendar.js的源代码，如果我不需要，它甚至似乎使用缩小的.js来渲染事件。顶级fullcalendar上的渲染事件

我知道它存在一个触发器触发一个自定义事件eventRender: function (event, element)，但我想出点东西来渲染事件。对于这个例子，我们可以说事件得到了important属性。

所以我想这个伪代码将使我的例子更加清晰：

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

来源

2013-03-05 Ms01

所以，你要根据重要性重新排序的事件（某一天），对不对？另外，你的活动是否有时间或只是约会？ – ganeshk 2013-03-05 19:17:17

我不认为这是完全可能的。您将不得不操纵js并创建一个重要行，例如表中的allDay行。 – 2013-03-05 22:17:36

这是正确的ganeshk。我准备编辑js并创建重要行。但我真的不知道从哪里开始编辑。代码有点混乱。但我想我得试试。 – Ms01 2013-03-05 22:54:58

我的任务要求中，现在每一个事件都有一个特殊的优先级是一个整数这样一种方式改变。数字越高，重要性越高。

老：

// 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 
},

，你可能看到第二个事件是在早些时候预定的，但添加了代码后，它将按照它们的优先级排序。所以第一场比赛将首先举行，接下来的第二场比赛将进行。

这就是我解决它的方法，优先级是一个整数，我试图按照它排序，除非它们相同或者它们不存在（空/未定义）。它按最高整数排序。

该函数在fullCalendar.js中。

来源

2013-03-07 10:56:17 Ms01

这是一个有用的功能。你应该打开请求[问题]（http://code.google.com/p/fullcalendar/issues/list）让FC将该函数作为回调函数公开.. – MaxD 2013-03-07 21:22:58

我实际上向FC-repo提出了pull请求github昨天。但我在那里找不到任何问题。但我想他们已经在谷歌代码上。谢谢，会做的。 – Ms01 2013-03-08 12:32:46

@cubsink我们该如何堆栈所有结束时间大于下一个事件开始时间的事件？例如，如果事件从前一个日期开始，则应该位于顶部。您的帮助将受到高度赞赏:) – 2013-04-05 06:18:05

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 = [ 
    { 
     title: "event1", 
     start: "2017-01-25" 
     priority: "a" 
    }, 
    { 
     title: "event2", 
     start: "2017-01-26" 
     priority: "b" 
    }, 
    { 
     title: "event3", 
     start: "2017-01-27" 
     priority: "c" 
    } 
]

来源

2017-02-25 09:46:44 Shaunlgs

顶级fullcalendar上的渲染事件

回答

相关问题