完整日历以显示详细信息

Question

我真的很喜欢完整的日历和它提供的各种功能。我想使用它来显示更多/自定义的信息，当视图在议程周或议程月上时。检查这些不是问题。我可以轻松地使用

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

问题是这样的：我正在构建一个系统来跟踪用户的活动。例如，一天可能包含用户应执行的 3 个活动。也许活动 1 从上午 9 点开始，活动 2 从上午 11：30 开始，最后活动 3 在下午 3 点开始。因此，该活动在一个街区，从上午 9 点至下午 3 点。我想自定义此块并在每个活动开始时显示它们，并且可能为了指示活动需要多长时间，我可能必须为每个活动包含不同的背景颜色。

注意：我只想创建一个事件，并设置样式以显示此活动。就像在现实生活中的会议一样，您有一个会议（事件）和多个议程。

Answer 1

看看下面的代码（小提琴可用）。这将向您展示如何在渲染事件 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>

然后，检查此代码（小提琴）。这显示了如何设置事件数据的格式以概括此概念。

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