Сделайте цвет фона события уникальным для каждого события - PullRequest
Новая
       1

Сделайте цвет фона события уникальным для каждого события

0 голосов
/ 26 января 2012

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

Я интегрирую FullCalendar с ExpressionEngine и модулем Calendar для EE, и у меня есть рендеринг событий в FancyBox.

My onlyОстается проблема в том, что фон каждого события одного цвета.То, чего я хочу достичь, это в любой конкретный день сделать так, чтобы несколько событий имели разный цвет фона, чтобы идентифицировать событие как уникальное.В документации объясняется, как изменить цвет фона, но это решение «все или ничего».

Я также пытался настроить стили, но это делало каждый день для ячейки цвет фона, а не фактические отдельные события.

Код, который создает календарь и заполняет события из EE,перечислены следующим образом: 

$(document).ready(function() {  
  $('#calendar').fullCalendar({
    header: {
       left: 'prev,next',
       center: 'title',
       right: ''
    },
    editable: false,
    events: [ {}
      {exp:calendar:events event_id="{segment_3}" sort="asc" dynamic="off"}
        {occurrences}
          ,{title: '{event_title}',
          url: '{url_title_path="path_to/event/"}',
          start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
          end:  new Date({occurrence_end_date format="%Y,%n-1,%j"}),
          allDay: true,}
        {/occurrences}
      {/exp:calendar:events}
    ],
    eventClick: function(event) {
        if (event.url) {
        $("a").fancybox(event.url);
            return false;
        }
    }
});  });

Это было бы просто сделать, если бы события заполнялись вручную, но данные поступают из ExpressionEngine, а не жестко кодируются.

Любые мыслио том, как сделать так, чтобы каждое событие на ежедневной основе отображалось с другим цветом фона, чем любое из других событий, перечисленных в тот же день?

Спасибо за чтение !!!

Ответы [ 3 ]

0 голосов
/ 27 января 2012

Вы можете использовать здесь css3 nth дочерние селекторы. Это позволит CSS автоматически менять цвета для вас. См .: http://css -tricks.com / how-nth-child-works /

Вы, конечно, должны быть нацелены на соответствующие элементы, но без полного DOM нам будет очень трудно помочь с этим здесь.

0 голосов
/ 02 декабря 2014

Вы можете использовать eventAfterAllRender, который срабатывает после того, как все события закончили рендеринг в fullCalendar из обоих источников. 

eventAfterAllRender: function( view ) {
    var allevents = $('#calendar').fullCalendar('clientEvents');
}

Теперь с помощью объекта allevents вы можете делать все, что пожелаете.

Вот тот, который я взял для себя: 

eventAfterAllRender: function(view) {
                    var allevents = $('#calendar').fullCalendar('clientEvents');
                    var countevents = 0;
                    if( allevents.length ) {
                        countevents = countevents + allevents.length;
                    }
                    if(!countevents) {
                        // alert('event count is'+countevents);
                        console.log('event count is',countevents);
                    }
                }

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

$('#calendar').fullCalendar('removeEvents', allevents[i].id);

Теперь все зависит от вас. Очень жаль, потому что у меня сейчас плотный график. Я рад, если кто-то из них найдет правильное решение для мистера Лейна (даже отредактировав этот ответ).

Спасибо.

0 голосов
/ 26 января 2012

Текущая версия fullCalendar имеет свойство для объекта события '.backgroundColor', которое можно установить для изменения цвета фона этого события.Конечно, вам придется написать некоторый код, чтобы настроить цвета фона, чтобы все они были уникальными в течение дня.

...