Используя FullCalendar, можно ли каким-либо образом программно раскрасить определенные дни по-другому, чем остальные дни? Например, в представлениях "месяц" или "неделя" я хотел бы раскрасить дни без каких-либо событий на них "красный" и дней с некоторыми событиями (но еще не полным расписанием) "желтый". Дни с полным расписанием будут раскрашены нормально (на белом фоне). Есть ли какие-либо обратные вызовы или теги CSS, которые я могу использовать, чтобы добавить это поведение? Спасибо.
В соответствии с ответом Regin здесь вы можете изменить цвет, установив событие dayRender в календаре следующим образом:
$( "#calendar" ).fullCalendar(function() {
dayRender: function (date, cell) {
if ( !dateHasEvent(date) )
cell.css("background-color", "red");
else if ( dateHasEvent(date) )
cell.css("background-color", "yellow");
}
});
function dateHasEvent(date) {
// some code here
}
Я согласен с оригинальным ответом гравитагона. Вы можете отслеживать запрос функции.
Я не верю, что существует некорректный способ реализации этого типа функций без модификации основного кода. Я думаю, что самое близкое, что вы можете придумать сейчас, это нечто вроде следующего. Однако вам нужно будет создать эти вызовы для addClass(), используя источники событий. Это работает только в режиме полного календаря и "ломается", когда у вас есть день месяца, который появляется дважды в представлении (из предыдущего или следующего месяца).
$("div.fc-day-number:contains('15')").parent().addClass("vacation");
<style>
.fc-grid .vacation {
background-color:#F00;
}
</style>
Я написал связанное сообщение в блоге с этим вопросом -
http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/
Использовать визуализацию вида для определенных дней.
viewRender: function(view,element){
$.ajax({
url: //your custom url,
data: {start:view.start.format(),end:view.end.format()},
type: 'GET',
dataType: "json",
contentType: "application/json",
success: function (data) {
$.each(data, function(i) {
$('.fc-day[data-date="'+data[i]["date"]+'"]').css('background', Your Color Code);
});
}
});
},
FullCalendar, кажется, очень надежный календарь jquery и редактирование исходного кода для этого может привести к некоторой боли в дороге, когда она будет обновлена автором. Мое предложение состояло в том, чтобы отправить письмо автору и попросить добавить эту функцию или какую-либо информацию о том, как редактировать поля, как вам нужно.
Вторая идея заключалась бы в том, чтобы посмотреть, какие селектора css создаются, когда каждая из ваших ситуаций встречается и меняет цвета фона в соответствии с ситуацией. Это оставило бы источник FullCal бесплатным для обновления и предоставил вам то, что вам нужно.
Надеюсь, что это поможет.
Обсуждение подхода в: http://code.google.com/p/fullcalendar/issues/detail?id=191
Мне нужно было выделить несколько дней, используя данные с сервера, без использования каких-либо событий fullcalendar. Это оказалось относительно легко с помощью jQuery. В примере кода вам нужно будет заполнить объект days датами в формате fullcalendar (возможно, через JSON). Формат (ГГГГ-ММ-ДД). За этим должно следовать значение: 0 - false 1 или более - true. Объект days должен быть инициализирован до события готовности документа (поэтому var days должен быть глобальным для document.ready). В примере 2016-03-05 и 2016-03-30 будут выделены, 2016-03-09 не будет.
$(document).ready(function(){
var days = {'2016-03-05': 1,'2016-03-09': 0,'2016-03-30': 1};
$("td, th").each(function(){
if(days[$(this).attr("data-date")]){
$(this).css("background-color","lime");
}
});
});
Я искал в Интернете для общего решения, подобного этому, без успеха. Многие люди подошли близко, но это делает то, о чем просили другие.
Надеюсь, что это поможет.
Дон
Если кто-то все еще ищет такое же решение, вот a JSFiddle.
JQuery
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-07-04',
editable: true,
events: [{
title: 'All Day Event',
start: '2014-07-01'
}, {
title: 'Long Event',
start: '2014-07-07',
end: '2014-07-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-16T16:00:00'
}, {
title: 'Meeting',
start: '2014-07-12T10:30:00',
end: '2014-07-12T12:30:00'
}, {
title: 'Lunch',
start: '2014-07-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2014-07-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-07-28'
}],
eventAfterAllRender: function(view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04', 'YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for (var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name == 'agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for (var j = 0; j < classNamesArray.length; j++) {
if (classNamesArray[j].indexOf('fc-col') > -1) {
$("td." + classNamesArray[j]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if (holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
});
});
CSS
body {
margin: 0;
padding: 50px 0 0 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 100%;
}
.holiday {
background: lightgray;
}
HTML
<div id="calendar"></div>