使用eventRender时，Fullcalendar不会呈现颜色 [英] Fullcalendar doesn't render color when using eventRender
问题描述
当我设置fullCalendar并设置eventRender函数回调时，我想根据LeadId是否为null来设置事件的颜色。但是，即使文档如此描述，这似乎也不起作用： http：/ /arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-选项
是否有任何方法可以根据数据？
日历= $（'＃dayview'）。fullCalendar（{
....
timeFormat：'HH：mm'，
columnFormat：{
agendaDay：'dddd dd / MM / yyyy'
}，
eventClick：function（calEvent，jsEvent，view） {
var leadUrl =/ Leads /+ calEvent.LeadId;
window.location = leadUrl;
}，
eventRender：function（event，element）{
if（event.LeadId！= null）{
event.eventColor =＃B22222;
event.eventBackColor =＃B22222 ;
}
}，
更新：
这真的很奇怪。 事件具有从服务器返回的所有事件的事件。
元素只是该事件的DOM元素。当我拖动/移动事件到日历中的其他地方时，事件变成红色，并且如果我检查事件对象，它现在已将颜色设置为红色。所以问题是为什么不在第一次渲染中应用，而是在后续渲染中（即在移动之后）颜色被应用？
$ b
编辑1：也许不是一个错误。
最好的方法是在事件对象中设置className并将其添加到由'fc-event-skin'类找到的元素。然而，你添加的类将会在css后面出现，并且颜色不会优先，所以你必须使用！important。这也保留了虚假的圆角......
在日历上连线这个方法...
eventRender：
function（event，element，view）{
element.find（'。fc-event-skin'）。addClass（event.className。 join（''））;
}
这在您自己的样式表中...
.redGray
{
border-color：DarkGray！important;
background-color：LightGray！important;
颜色：红色！重要;
$ b原始答案：
p>我认为这是渲染代码中的一个小错误。元素参数是一个jQuery对象，因此您可以根据您的自定义事件数据进行修改。如果您设置元素的样式和文本，它将使用您设置的颜色进行渲染;然而，在我看来，从元素中删除了其他样式，例如圆角和时间和文本的格式。 eventRender：
function（event，element）{
if（event.LeadId！= null）{
element.css（'color'，'blue'）;
element.css（'background-color'，'yellow'）;
element.text（element.text）;
}
When I set-up fullCalendar and set eventRender function callback, I want to set the color of the event depending if LeadId is null or not. But this doesn't seem to work even though the documentation says so: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options
Is there any way to set the event color to change based on the data?
calendar = $('#dayview').fullCalendar({
....
timeFormat: 'HH:mm',
columnFormat: {
agendaDay: 'dddd dd/MM/yyyy'
},
eventClick: function (calEvent, jsEvent, view) {
var leadUrl = "/Leads/" + calEvent.LeadId;
window.location = leadUrl;
},
eventRender: function (event, element) {
if (event.LeadId != null) {
event.eventColor = "#B22222";
event.eventBackColor = "#B22222";
}
},
UPDATE:
This is really strange. The event has all my properties returned for the event off the server.
element is just the DOM element for the event. When I drag/move the event to somewhere else in the calendar, the event turns red, and if I inspect the event object it now has color set to Red. So the question is why isn't it applying on the 1st render, but on subsequent renders (i.e. after move) the colour gets applied?
解决方案 EDIT 2: Some new changes to the fc-event-skin class... it's now only fc-event, so styling shouldn't be an issue. Please check author's note here fullcalendar fc-event class...
EDIT 1: Maybe not a bug exactly.
The best approach is to set the className in the event object and add it to the elements found by an 'fc-event-skin' class. However, your added class will come later in the css and the colors will not take precedence, so you have to use !important. This also preserves the "fake" rounded corners...
Wire this method up on the calendar...
eventRender:
function (event, element, view) {
element.find('.fc-event-skin').addClass(event.className.join(' '));
}
This in your own style sheet...
.redGray
{
border-color: DarkGray !important;
background-color: LightGray !important;
color: red !important;
}
ORIGINAL ANSWER:
I think this is a minor bug in the rendering code. The element parameter is an jQuery object, so you can modify that based on your custom event data. If you set the style and text of the element, it will render with the color you set; however, it appears to me that other styles are removed from the element such as the rounded corners and the formatting of the time and text.
eventRender:
function (event, element) {
if (event.LeadId != null) {
element.css('color', 'blue');
element.css('background-color', 'yellow');
element.text(element.text);
}
这篇关于使用eventRender时，Fullcalendar不会呈现颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
