이벤트별로 배경 색상을 고유하게 설정하십시오.

Question

간단한 해결책이 있지만 기존 게시물과 설명서를 읽은 후에는 아직 찾을 수 없었습니다. 이것은 내 첫 번째 게시물이므로, 어떤 도움을 많이 주시면 감사하겠습니다.

FullCalendar를 ExpressionEngine 및 EE 용 일정 모듈과 통합하려고하며 FancyBox에서 이벤트를 렌더링했습니다.

내 남은 문제는 각 이벤트의 배경이 같은 색이라는 것입니다. 내가 원하는 목표는 이벤트를 고유 한 이벤트로 식별하기 위해 여러 이벤트의 배경색을 다르게하는 것입니다. 이 문서에서는 배경색을 변경하는 방법을 설명하지만 "전부 또는 전무"솔루션입니다.

또한 스타일을 조정하려고 시도했으나 실제 셀 이벤트가 아닌 매일 배경색이 변경되었습니다.

달력을 구축하고 다음과 같이 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에서오고있다 하드 코드 된 것보다

일일 기준으로 각 이벤트를 작성하는 방법에 대한 생각은 당일에 나열된 다른 이벤트와 다른 배경색으로 렌더링됩니까?

읽어 주셔서 감사합니다.

Answer 1

현재 버전의 fullCalendar에는 해당 이벤트의 배경색을 변경하도록 설정할 수있는 이벤트 객체 '.backgroundColor'에 대한 속성이 있습니다. 물론 배경색을 설정하는 코드를 작성하여 하루 만에 모두 고유하게 만들 수 있습니다.

Answer 2

여기서 css3 번째 자식 선택기를 사용하는 것이 좋습니다. 이렇게하면 CSS가 자동으로 색상을 변경할 수 있습니다. 참조 : http://css-tricks.com/how-nth-child-works/

물론 적절한 요소를 대상으로 지정해야하지만 전체 DOM을 보지 않아도 여기에서 도움이 될 것입니다.

Answer 3

모든 이벤트가 두 원본의 fullCalendar에서 렌더링을 완료 한 후 트리거되는 eventAfterAllRender을 사용할 수 있습니다.

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); 
        } 
       } 

하나는 중복 이벤트의 ID를 얻을 수있었습니다

지금은 같은 루프 내에서 중복 이벤트를 삭제할 수 있습니다

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

이제 귀하에게 달려 있습니다. 요즘 바쁜 일정을 운영하고있어 죄송합니다. 나는 누군가가 이것을 (심지어이 답변을 편집하여) Mr. Lane에게 적절한 솔루션을 생성한다면 기쁩니다.

감사합니다.