FullCalendar: изменить цвет фона дня дня - PullRequest
9 голосов
/ 24 мая 2010

Хотя я видел этот вопрос, я не видел ответа. Я просто хочу иметь возможность раскрасить background-color из TD из определенного диапазона ..

Допустим, у меня есть календарь, в котором есть интервал минут каждые 15 минут, и с 9 утра до 9 вечера я бы хотел по-разному окрашивать только с 10 утра до 3 вечера.

Эта информация будет поступать из канала, но это не проблема. Я не нашел TD, относящихся к установленному времени в календаре. Возможно, я что-то пропустил? :) Я довольно новичок в jQuery и fullCalendar.

Также еще один быстрый вопрос, который не связан с основным:

  • Можно ли из обработчика событий получить id календаря, который его запустил? У меня есть несколько календарей на моей странице, чтобы имитировать что-то вроде представления Ганта. Это позволит мне выбрать правильный канал и заполнить нужные события.

Ответы [ 6 ]

13 голосов
/ 27 августа 2010

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

10 голосов
/ 27 ноября 2012

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

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

enter image description here

1 голос
/ 26 июля 2011

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

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

В версии 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);
}

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

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

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

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

0 голосов
/ 25 июня 2015

начиная с версии 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'
        }
    ]
});
0 голосов
/ 27 июня 2012

Вот быстрое и грязное доказательство концепции, которое работает с демо-файлом последней версии повестки дня. Он требует 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');
    }
}
0 голосов
/ 27 мая 2012

Я взял решение @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).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...