изменить цвет фона событий в FullCalendar

Question

изменить цвет фона событий в FullCalendar

0

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

в моей таблице, имя таблицы резервируется:

id --- + ---   the_date   
 1           2014-02-25 
 2           2014-02-26
 3           2014-02-27
 4           2014-03-22
 5           2014-04-15
 6           2014-04-17

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

Любая идея, как я могу раскрасить по-разному каждое событие?

заранее спасибо

Renjitha 26 фев. 2014, в 11:36

Источник

0

обновите таблицу стилей в соответствии с вашим цветом.
Bharat soni 26 фев. 2014, в 10:39
0

возможный дубликат Fullcalendar - изменить цвет события в зависимости от значения
MarCrazyness 26 фев. 2014, в 21:10

Теги:

php

jquery

python

json

fullcalendar

4 ответа

2

если вы хотите изменить цвет фона событий, вы можете использовать

 eventRender: function (event, element, view) 
      {
              var date = new Date(); //this is your todays date

                if (event.start >= date)
                  $(element).css("backgroundColor", "red");

     }

и если вы хотите изменить цвет фона дня, тогда вы можете пользователь dayRender CallBack of Fullcalender

 dayRender: function (date, element, view) 
        {


                var date = new Date(date);
                var day = date.getDate().toString();
                if (day.length == 1)
                    day = 0 + day;
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                if (month.length == 1)
                    month = 0 + month;
                var dateStr = year + "-" + month + "-" + day ;

                // YourDates is Json array of your default dates

                for (var i = 0; i < YourDates.length; i++) 
               {
                 //here you campare calender dates to your default dates
                   if ( dateStr.toString() == YourDates[i].toString() ) 
                    {
                        $(element).css("background", "red"); // it will set backgroud of that date

                    }

                }


      }

Дополнительная информация: dayRender: FullCalender

Anil Mahajan 27 фев. 2014, в 09:05

1

Для изменения цвета фона я сделал таким образом

{
    title: 'Long Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2),
    backgroundColor: App.getLayoutColorCode('green')
}

Надеюсь это поможет....

Smit kalwal 01 март 2014, в 07:41

1

Календарь запускает событие eventAfterRender после каждого события. То же самое обеспечивает доступ к событию и элементу. Вы можете реализовать свое требование, сравнив дату event.start или event.end с текущей датой и изменив цвет элемента по мере необходимости.

loganup1 26 фев. 2014, в 10:39

Ещё вопросы

обновите таблицу стилей в соответствии с вашим цветом.
возможный дубликат Fullcalendar - изменить цвет события в зависимости от значения

ncrocfer · Accepted Answer · 2014-02-26T08-08-00.000Z

Вы можете установить свойство backgroundColor для определенных событий:

$('#calendar').fullCalendar({
    {
      title: '1',
      start: new Date(2014, 02, 25, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
    },
    {
      title: '2',
      start: new Date(2014, 02, 26, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
    },
    ...
});

Для остальной части дат просто используйте .fc-future и .fc-today CSS:

.fc-future,
.fc-today {
    background-color: #10CC55;
}

но мне нужно изменить цвет фона событий сегодняшнего дня. В нем все цвета фона дня отображаются зеленым. Мне не нужно менять цвет фона предыдущих дней.
Хорошо, используйте .fc-future и .fc-today .