javascript 如何突出显示在 FullCalendar.js 中有事件的一天？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20728054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to highlight a day which has an event in FullCalendar.js?
提问by Ahmed Ali
I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have "fc-day" and an event in it.
我在我的网站上使用 FullCalendar.js。我已经从后端设置了事件。我想改变当天有活动的样子。换句话说，我需要某种课程，其中有“fc-day”和一个事件。
My code looks like and you see it on jsFiddle:
$('#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'
}]
})
采纳答案by Artyom Neustroev
I could not find a desired property or method to use in the documentation of Fullcalendar.
我在 Fullcalendar 的文档中找不到所需的属性或方法。
I came up with a kind of a messy solution: adding a class by data-attributes:
我想出了一种凌乱的解决方案：通过数据属性添加一个类：
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());
};
It works fine for the settings, you've provided in your question.
它适用于您在问题中提供的设置。
The working example could be found here: http://jsfiddle.net/6NShN/9/
可以在这里找到工作示例：http: //jsfiddle.net/6NShN/9/
回答by Manwal
You can use eventRender()property of Full Canendar.
您可以使用Full Canendar 的eventRender()属性。
This works for me with fullcalendar v2:
这适用于我的 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');
}
});
Note:You will need Momentlibrary for this.
注意：为此您将需要Moment库。
回答by Smit kalwal
This is how I did it to give background color to each and every events.
这就是我为每个事件赋予背景颜色的方式。
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',
}
]
Hope this helps. Refer : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
希望这可以帮助。参考：http: //arshaw.com/fullcalendar/docs/event_data/Event_Object/
回答by Subodh Ghulaxe
Finally this is how it worked for me take a look at this
最后，这就是它对我的工作方式，看看这个
$('#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');
}
});
回答by neonwired
weswesweswes is nearly correct view.element should be view.el
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');
}
回答by davidwmartin
None of these will work for >=v2.0, since fullCalendar started using moment.js for date formatting.
这些都不适用于 >=v2.0，因为 fullCalendar 开始使用 moment.js 进行日期格式化。
The following worked for me (passed to fullCalendar initialization function):
以下对我有用（传递给 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');
}
回答by Kai Noack
Fullcalendar v2, for agendaWeek view:
Fullcalendar v2，用于议程周视图：
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');
}
},
Highlights all days with events.
用事件突出显示所有日子。
回答by Neha
You can add class on base of the fullcalender .fc-event class its not direct approach but its works.
您可以在 fullcalender .fc-event 类的基础上添加类，它不是直接的方法，而是它的工作原理。
$(document).ready(function (){
$(".fc-event").addClass("myclass");
});
回答by Satinder singh
Heres another Fiddle JS FIDDLE
这是另一个 Fiddle JS FIDDLE
Just by adding
只需添加
textColor: 'white',
backgroundColor:'purple'
You can change the style
你可以改变风格
JS code:
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...
]
});
