是否可以根据标题分配 FullCalendar 事件的背景颜色?
Is it possible to assign the background colour of a FullCalendar event based on its title?
由于 FullCalendar 无法读取分配给 Google 日历中事件的颜色,我需要能够根据各个事件标题的文本内容设置事件显示方式的样式。
阅读了尽可能多的关于此事的帖子后,似乎 FullCalendar 的 'eventRender' 是最有可能采取的路线,但我能找到的最接近我需要的是一些类似的东西的:-
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
我的问题是,(a) 我需要将 eventRender 应用于事件标题而不是它们的描述,并且 (b) 我需要它是 'if the title includes the words blah-blah',而不是 'if the title is an exact match for blah blah'.
希望以上内容不要太乱码和无意义。对于这一切,我仍然非常摸索;因此,我们将不胜感激地收到任何帮助、建议、想法或引导正确的方向! :)
非常感谢您的宝贵时间。
已编辑:
附加信息。我在 FullCalendar html 页面上使用的脚本(没有 API 键和 Google ID)
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,month',
},
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
}
},
// Google API key
googleCalendarApiKey: 'xxxxxxxxx',
// Diary Dates
events: 'xxxxxxxxx',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
你基本上尝试了吗?
if(-1 != event.title.indexOf("blah blah")) {
element.css('background-color', '#ff000');
}
在 eventRender 回调中
if(-1 != event.title.indexOf("blah blah")) {
element.find('.fc-title').css('background-color', '#ff000');
}
会的。
或者更好的是,应用样式 element.addClass("event-bg-class");
#希望对您有所帮助
element.addClass("custom-event-0");
element.addClass("custom-event-1");
$(document).ready(function() {
var eventsdata = [];
var i = 0;
$('#calendar').fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,month',
},
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
}
},
// Google API key
googleCalendarApiKey: 'xxxxxxxxx',
// Diary Dates
events: 'xxxxxxxxx',
eventRender: function(event, element) {
if(eventsdata.length == 0){
eventsdata.push(event.title);
i++;
}else{
var tmp = eventsdata.indexOf(event.title);
if(tmp == -1){
eventsdata.push(event.title);
i++;
}
}
element.addClass("custom-event-"+eventsdata.indexOf(event.title));
},
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
由于 FullCalendar 无法读取分配给 Google 日历中事件的颜色,我需要能够根据各个事件标题的文本内容设置事件显示方式的样式。
阅读了尽可能多的关于此事的帖子后,似乎 FullCalendar 的 'eventRender' 是最有可能采取的路线,但我能找到的最接近我需要的是一些类似的东西的:-
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
我的问题是,(a) 我需要将 eventRender 应用于事件标题而不是它们的描述,并且 (b) 我需要它是 'if the title includes the words blah-blah',而不是 'if the title is an exact match for blah blah'.
希望以上内容不要太乱码和无意义。对于这一切,我仍然非常摸索;因此,我们将不胜感激地收到任何帮助、建议、想法或引导正确的方向! :)
非常感谢您的宝贵时间。
已编辑: 附加信息。我在 FullCalendar html 页面上使用的脚本(没有 API 键和 Google ID)
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,month',
},
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
}
},
// Google API key
googleCalendarApiKey: 'xxxxxxxxx',
// Diary Dates
events: 'xxxxxxxxx',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
你基本上尝试了吗?
if(-1 != event.title.indexOf("blah blah")) {
element.css('background-color', '#ff000');
}
在 eventRender 回调中
if(-1 != event.title.indexOf("blah blah")) {
element.find('.fc-title').css('background-color', '#ff000');
}
会的。
或者更好的是,应用样式 element.addClass("event-bg-class");
#希望对您有所帮助
element.addClass("custom-event-0");
element.addClass("custom-event-1");
$(document).ready(function() {
var eventsdata = [];
var i = 0;
$('#calendar').fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,month',
},
eventRender: function(event, element) {
if(event.description == "blah blah") {
element.css('background-color', '#ff000');
}
},
// Google API key
googleCalendarApiKey: 'xxxxxxxxx',
// Diary Dates
events: 'xxxxxxxxx',
eventRender: function(event, element) {
if(eventsdata.length == 0){
eventsdata.push(event.title);
i++;
}else{
var tmp = eventsdata.indexOf(event.title);
if(tmp == -1){
eventsdata.push(event.title);
i++;
}
}
element.addClass("custom-event-"+eventsdata.indexOf(event.title));
},
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});