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>