![](/img/trans.png)
[英]How to change “AgendaDay” day title format in fullcalendar.js
[英]How to highlight a day which has an event in FullCalendar.js?
我在我的网站上使用 FullCalendar.js。 我已经从后端设置了事件。 我想更改有活动当天的外观。 换句话说,我需要某种 class,其中包含“fc-day”和一个事件。
$('#calendar').fullCalendar({
events: [{
title: 'event1',
start: '2013-01-01'
}, {
title: 'event2',
start: '2013-12-05',
end: '2013-12-07'
}, {
title: 'event3',
start: '2013-12-15'
}]
})
您可以使用Full Canendar的eventRender()属性。
这适用于fullcalendar v2:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = moment(event.start).format('YYYY-MM-DD');
$('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
注意:为此,您将需要Moment库。
我在Fullcalendar的文档中找不到所需的属性或方法。
我想出了一种麻烦的解决方案: 通过数据属性添加类:
function addClassByDate(date) {
var dataAttr = getDataAttr(date);
$("[data-date='" + dataAttr + "']").addClass("hasEvent");
}
function getDataAttr(date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};
您在问题中提供的设置对它的工作正常。
可以在以下位置找到工作示例: http : //jsfiddle.net/6NShN/9/
这就是我为每个事件赋予背景颜色的方式。
events: [
{
title: 'Test1',
start: new Date(2014, 2, 28, 12, 0),
end: new Date(2014, 2, 30, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test2',
start: new Date(2014, 2, 14, 3, 55),
end: new Date(2014, 2, 21, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test3',
start: new Date(2014, 2, 2, 12, 0),
end: new Date(2014, 2, 2, 12, 0),
backgroundColor: '#E82525',
}
]
希望这可以帮助。 请参阅: http : //arshaw.com/fullcalendar/docs/event_data/Event_Object/
最后,这对我来说是如何工作的
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
weswesweswes几乎是正确的view.element应该是view.el
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
这些都不适用于> = v2.0,因为fullCalendar开始使用moment.js进行日期格式化。
以下对我有用(传递给fullCalendar初始化函数):
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
您可以在fullcalender .fc-event类的基础上添加类,这不是直接方法,而是其工作原理。
$(document).ready(function (){
$(".fc-event").addClass("myclass");
});
这是另一个小提琴JS FIDDLE
只需添加
textColor: 'white',
backgroundColor:'purple'
你可以改变风格
JS代码:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: [
{
title : 'event1',
start : '2013-01-01'
},
{
title : 'event2',
start : '2013-12-05',
end : '2013-12-07'
},
{
title : 'event3',
start : '2013-12-15'
}],
textColor: 'white',
backgroundColor:'purple'
}
// any other event sources...
]
});
Fullcalendar v2,用于scheduleWeek视图:
eventRender: function(event, element, view ){
if(view.name=='agendaWeek') {
var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var eventweekday = $.fullCalendar.moment(event.start).format('d');
$('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
}
},
突出显示所有活动日。
遇到了同样的问题,并为 FullCalendar 的旧版本找到了一堆解决方案(无论如何看起来有点老套)。 但是,在 v5 中,您可以使用 eventDidMount 并将 DOM 向上遍历到日期单元格。
JS代码:
eventDidMount: function(info) {
$(info.el).closest(".fc-daygrid-day").addClass("has-event");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.