イベントごとの背景色をユニークにする

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のから来ていますハードコーディングされるよりも。

1日あたりの各イベントの作成方法に関する考えは、同じ日にリストされた他のイベントとは異なる背景色でレンダリングされますか？

読んでいただきありがとうございます！

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

今はあなた次第です。私は今日は忙しいスケジュールを実行しているので非常に申し訳ありません。誰かがこれからLaneさんのために適切な解決策を生み出すことができたら嬉しいです（この回答を編集しても）。

ありがとうございます。