0

我真的很喜欢 fullcalendar 和它提供的各种功能。当视图在议程周或议程月上时，我想用它来显示每个事件的更多/自定义信息。检查这些不是问题。我可以使用轻松过滤视图表单

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

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

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

4

1 回答 1

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>
于 2012-06-16T03:57:24.680 回答