FullCalender顯示詳細信息

Question

我真的很喜歡fullcalender和它提供的各種功能。我希望在查看日程或議程月份時使用它來顯示每個活動的更多/自定義信息。檢查這些不是問題。我可以舒適的使用過濾器

eventRender: function(event, element,view) { 
    if(view.name!="month"){ 
     //my code to come here   
    } 

這是問題的看法形式： 我建立一個系統來追蹤用戶的活動。例如，一天可能包含3個用戶應該執行的活動。也許活動1在上午9點開始，活動2在上午11點30分，最後在下午3點活動3。因此，活動在上午9點至下午3點之間進行。我想定製此塊，並在每個活動開始時顯示每個活動，並可能指示活動需要多長時間，我可能必須爲每個活動包含不同的背景顏色。

注：我想只創建一個事件，和風格來顯示這個activities.Just像在現實生活中的一個會議上，你有一個會議（活動）和幾個議程。

任何想法和貢獻是高度讚賞。由於

Answer 1

看看下面的代碼（fiddle available）。這說明你在呈現之前和之後，你如何編輯事件DOM。

<div style="border:solid 2px red;"> 
    <div id='calendar'></div> 
</div> 
<script> 
$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultView: 'agendaDay', 
     editable: true, 
     events: [ 
     { 
      id: 1, 
      title: "Meeting", 
      start: new Date(y, m, d, 9, 0), 
      end: new Date(y, m, d, 15, 0), 
      allDay: false} 
     ], 
     eventRender: function(event, element, view) { 
      element.find('.fc-event-content').append('<div class="fc-sub-event">9am - 11:30am</div>'); 
      element.find('.fc-event-content').append('<div class="fc-sub-event">11:30am - 1pm</div>'); 
      element.find('.fc-event-content').append('<div class="fc-sub-event">1pm - 3pm</div>'); 
     }, 
     eventAfterRender: function(event, element, view) { 
      var eleHgt = element.height()/3.5; 
      $('.fc-sub-event').height(eleHgt); 
     } 
    }); 
}); 
</script> 

然後，檢查此代碼（fiddle）。這說明了如何格式化您的事件數據來概括這一概念。

<div style="border:solid 2px red;"> 
    <div id='calendar'></div> 
</div> 
<script> 
$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultView: 'agendaDay', 
     editable: true, 
     events: [ 
     { 
      id: 1, 
      title: '<div class="fc-event-title">Meeting</div><div class="fc-sub-event">9am - 11:30am</div><div class="fc-sub-event">11:30am - 1pm</div><div class="fc-sub-event">1pm - 3pm</div>', 
      start: new Date(y, m, d, 9, 0), 
      end: new Date(y, m, d, 15, 0), 
      allDay: false} 
     ], 
     eventRender: function(event, element, view) { 
      element.find('.fc-event-content').html(element.find('.fc-event-content').text()); 
     }, 
     eventAfterRender: function(event, element, view) { 
      var eleHgt = element.height()/3.5; 
      $('.fc-sub-event').height(eleHgt); 
     } 
    }); 
}); 
</script>