Php FullCalendar以显示详细信息

我非常喜欢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点。我想自定义此块，并在每个活动开始时显示它们，也许为了指示一个活动需要多长时间，我可能需要为每个活动添加不同的背景色

---

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

请查看以下代码（）。这将向您展示如何在呈现事件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>

$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
defaultView:'agendaDay'，
是的，
活动：[
{
id:1，
标题：“会议”，
开始日期：新日期（y、m、d、9、0），
结束：新日期（y、m、d、15、0），
全天：假}
],
eventRender:函数（事件、元素、视图）{
元素.find（'.fc事件内容'）.append（'9am-11:30am'）；
元素.find（'.fc事件内容'）.append（'11:30am-1pm'）；
元素。查找（'.fc事件内容'）。追加（'1pm-3pm'）；
},
eventAfterRender:函数（事件、元素、视图）{
var eleHgt=element.height（）/3.5；
$（'.fc子事件'）。高度（eleHgt）；
}
});
});

然后，检查此代码（）。这显示了如何格式化事件数据以概括此概念

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

$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
defaultView:'agendaDay'，
是的，
活动：[
{
id:1，
标题：“上午9点至11:30上午11:30上午1点至下午1点至下午3点的会议”，
开始日期：新日期（y、m、d、9、0），
结束：新日期（y、m、d、15、0），
全天：假}
],
eventRender:函数（事件、元素、视图）{
element.find（'.fc event content'）.html（element.find（'.fc event content'）.text（））；
},
eventAfterRender:函数（事件、元素、视图）{
var eleHgt=element.height（）/3.5；
$（'.fc子事件'）。高度（eleHgt）；
}
});
});