[英]Fullcalendar -> Change color selected event
我正在使用FullCalendar,并且无法更改所选日期的事件的背景。 您单击的其他日子用红色标记,但事件编号。 我认为它是由CSS编写的,但是我不知道如何对其进行修改才能正常工作。
我的代码: http : //jsfiddle.net/y33wb52n/
Java脚本
$(document).ready(function() {
var fecha_seleccionada;
var tempVar = "";
$('#calendar').fullCalendar({
lang: "es",
selectable: true,
select: function(a, b) {
fecha_seleccionada = a.format();
//alert(fecha_seleccionada);
var input_fecha = document.getElementById("input_fecha");
input_fecha.value = fecha_seleccionada;
},
//defaultDate: '2015-02-12',
editable: false,
eventLimit: false, // allow "more" link when too many events
events: [
{
title: 'Evento',
width: '0',
start: '2015-09-17'
},
{
title: 'Evento',
width: '0',
start: '2015-09-19'
}
],
dayClick: function(date, allDay, jsEvent, view) {
// change the day's background color just for fun
if (tempVar == "")
{
$(this).css('background-color', 'red');
tempVar = this;
}
else
{
$(this).css('background-color', 'red');
$(tempVar).css('background-color', '#f6f6f6');
tempVar = this;
}
}
});
});
的CSS
.fc-event-skin {
margin: -20px auto 0px auto; /* spacing between events and edges */
padding: 30px 0px;
border-radius: 0px !important;
}
的HTML
<div id='calendar' style='margin:3em 0;font-size:13px'></div>
有什么帮助吗? 谢谢!
我相信这是因为,如果您单击某个事件,就不会在当天单击。 我与你提供的示例一出戏,如果你点击它不变色事件这是真的,但实际上你可以点击它会改变它的颜色事件背后的那一天。
http://i.stack.imgur.com/OKDiR.png
因此,单击事件时,不会触发dayClick事件,而会触发eventClick事件。
http://fullcalendar.io/docs/mouse/eventClick/
不确定如何从回调内部获取事件发生的日期。
只需将其添加到您的CSS中:
.fc-highlight {
background-color:red;
}
单击day时此方法有效,因此您应该在全日历jQuery中使用它:
$(document).ready(function() {
$('#calendarID').fullCalendar({
dayClick: function(date, jsEvent, view) {
// some code
$('#calendarID').fullCalendar('select', date);
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.