Question

我非常喜欢fullcalendar及其提供的各种功能。当视图在agendaWeek或agendaMonth上时，我想用它来显示每个事件的更多/自定义信息。检查这些不是问题。我可以使用

轻松过滤视图表单

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

查看以下代码（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>

FullCalendar显示详细信息

1 个答案: