FullCalendar: изменить цвет фона повестки дня

вот запрос функции для вашего первого вопроса: http://code.google.com/p/fullcalendar/issues/detail?id=144 не забудьте пометить его, чтобы получать обновления. Благодарность

Я написал несколько простых аннотаций для поддержки такого рода функций, их можно найти в

https://github.com/elhigu/fullcalendar

Надеюсь, в какой-то момент он будет объединен с официальной веткой

Аннотации можно добавлять так:

    $('#calendar').fullCalendar({
        ....
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            }
        ],
        annotations: [{
                start: new Date(y, m, d, 13, 0),
                end: new Date(y, m, d, 15, 30),
                title: 'My 1st annotation', // optional
                cls: 'open', // optional
                color: '#777777', // optional
                background: '#eeeeff' // optional
            }, { next annotation }, ...]        
    });

})

Полный пример использования аннотаций можно найти здесь: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html.

Мне нужна эта функция в проекте, над которым я сейчас работаю. Это школьный проект, в котором я должен выделить фон красным цветом, если в этот день праздничное мероприятие + выходные. Обратите внимание, что здесь не все субботы - праздничные дни. В некоторых школах каникулы только во вторую субботу, а в некоторых школах суббота будет случайным образом выбрана в качестве рабочего дня.

Каким-то образом я преодолел эту проблему, хотя это не изящное решение.

В версии 1.5.1 в строке номер 2291 добавьте эту строку

var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix

С 2300 по 2304 замените строки следующим кодом

if (+date == +today) {
    cell.addClass(tm + '-state-highlight fc-today');
}else if($.inArray(+date, refDate)!=-1){ //Added by me
    cell.addClass(tm + '-state-error');  //Added by me
}else{
    cell.removeClass(tm + '-state-highlight fc-today');
    cell.removeClass(tm + '-state-error'); //Added by me
}

Перед вызовом полного календаря вам необходимо создать массив дат, преобразованных в объекты даты js, а затем преобразованные в длинное целое число, добавив перед ним символ +, например

var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31'];
    window.holidays = [];
    for(var i=0; i<holidayArray.length;i++){
        holidays.push(+(mysqlDateToJSDate(holidayArray[i])));
    }

Наконец, я нашел функцию js, которая конвертирует даты mysql в объекты даты js.

function mysqlDateToJSDate(date) {
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/;
    var parts=date.replace(regex,"$1 $2 $3").split(' ');
    return new Date(parts[0],parts[1]-1,parts[2],0,0,0);
}

После вызова полного календаря не забудьте удалить глобальную переменную.

Я знаю, что создание глобальной переменной - неприятное дело. Но учитывая, что полный календарь очень активен, с частым исправлением ошибок и новыми функциями, я не хочу слишком сильно вмешиваться в код. Я не знаю, как передать переменную в качестве опции и легко получить ее там, где я хочу.

Это было сделано только для просмотра по месяцам. Нам нужно сделать то же самое и с другими представлениями ...

Невозможно опубликовать предварительный просмотр, но вы можете увидеть его здесь.

Я взял решение @Jegatheesh и изменил его, чтобы не обращаться к глобальной переменной и использовать встроенное форматирование. Это против 1.5.3

--- i/fullcalendar.js
+++ w/fullcalendar.js
@@ -29,6 +29,7 @@ var defaults = {
                right: 'today prev,next'
        },
        weekends: true,
+       holidays: [],

        // editing
        //editable: false,
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) {
                        }
                        if (+date == +today) {
                                cell.addClass(tm + '-state-highlight fc-today');
+                               cell.removeClass(tm + '-holiday');
+                       }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) {
+                               cell.addClass(tm + '-holiday');
                        }else{
-                               cell.removeClass(tm + '-state-highlight fc-today');
+                               cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday');
                        }
                        cell.find('div.fc-day-number').text(date.getDate());
                        if (dowDirty) {

Он вводит класс fc-holiday css для элемента td.

Выполнение можно улучшить, если отформатировать элементы массива праздников в метку времени, а затем вместо этого вызвать $.inArray(+date, calendar.options.holidays).

Вот быстрое и грязное доказательство концепции, которое работает с демо-файлом последней версии «schedule-views.html» в режиме просмотра «Неделя». Он требует datejs с time.js (для TimeSpan) и в настоящее время не работает с прокруткой, но его можно легко настроить. См. Также полную суть страницы: https://gist.github.com/3005635

var resAvail = [
    {
        DayOfWeek: 0,
        Start: new Date(y, m, d, 10, 0),
        End: new Date(y, m, d, 17, 30)
    },
    {
        DayOfWeek: 1,
        Start: new Date(y, m, d, 9, 0),
        End: new Date(y, m, d, 19, 30)
    },
    {
        DayOfWeek: 4,
        Start: new Date(y, m, d, 12, 0),
        End: new Date(y, m, d, 20, 00)
    }
]

var view = calendar.fullCalendar('getView');
var slotHeight = view.getSlotHeight();
var slotMins = calendar.fullCalendar('option', 'slotMinutes');
var minTime = calendar.fullCalendar('option', 'minTime');
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top;

// rip through days of week
for (i = 0; i < 7; i++) {
    for (r = 0; r < resAvail.length; r++) {
        var currentRes = resAvail[r];
        if (currentRes.DayOfWeek == i) {
            addAvailBlock(currentRes);
        }
    }
}

function addAvailBlock(currentRes) {
    var dayColumn = getDayColumn(i);
    var $availBlock = $('<div class="avail-block"></div>');
    dayColumn.append($availBlock);
    $availBlock.css('width', $availBlock.parent().css('width'));

    // Where we start the availability block
    var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime);
    var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart);
    var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60);
    var startOffsetSlots = startOffsetMins / slotMins;
    var startOffsetHeight = startOffsetSlots * slotHeight;

    var blockSpan = new TimeSpan(currentRes.End - currentRes.Start);
    var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60);
    var blockSlots = blockMins / slotMins;
    var blockHeight = blockSlots * slotHeight;
    $availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight);
}

function getDayColumn(dayOfWeek) {
    switch (dayOfWeek) {
        case 0:
            return $('.fc-sun');
        case 1:
            return $('.fc-mon');
        case 2:
            return $('.fc-tue');
        case 3:
            return $('.fc-wed');
        case 4:
            return $('.fc-thu');
        case 5:
            return $('.fc-fri');
        case 6:
            return $('.fc-sat');
    }
}

начиная с версии 2.2 вы можете использовать фоновые события

$('#calendar').fullCalendar({
    defaultDate: '2014-11-10',
    defaultView: 'agendaWeek',
    events: [
        {
            start: '2014-11-10T10:00:00',
            end: '2014-11-10T16:00:00',
            rendering: 'background'
        }
    ]
});