事件'标题不会显示在FullCalendar中

时间:2016-07-05 10:28:52

标签: jquery fullcalendar

我开发了一个完整的日历页面,其中标题为“假期”。事件未显示,只有我给出渲染背景时才会发生这种情况。有一段时间我很讨厌,因为我不知道我在哪里弄错了..

我的代码如下: -

$(document).ready(function() {

$('#calendar').fullCalendar({

utc: true, 
header: { 
left: 'prev,next today EventButton', 
center: 'title', 
right: 'month,agendaWeek,agendaDay' 
}, 

editable: false, 
droppable: true, 

eventSources: [                        
                    {
                        url: "<?php echo base_url() ?>common/calendar/show_holidays",
                        rendering : 'background',
                        type: 'POST',
                        //backgroundColor : '#A4F80E',
                        //color: '#DAF7A6',   
                        //textColor: 'black'

                    }                    
                ],
});

});

通过控制器,我正在通过假期&#39;事件。在上面的代码中,如果我评论渲染 - 背景,那么我得到事件&#39;标题。

我的示例输出是: -

Title not displayed while rendering

4 个答案:

答案 0 :(得分:1)

我也试过几种方法,但最后波纹管代码对我有帮助...... 试试这个

eventRender: function (event, element) {       

    if(event.rendering=='background'){
        $('.fc-day[data-date="' + event.date + '"]').html('&nbsp;<span style="float:left">' + event.name + '</span>');
    }

}

答案 1 :(得分:0)

我试过了。但是在渲染背景时,标题没有出现。我最终在同一天创建了两个事件,一个用于背景,另一个用于显示title.my事件数组是这样的。

$event[] = array('id' => $row->id, 
                 'name' => $row->name,
                'date' => $row->date,
                'backgroundColor' => '#1ab394',
                'rendering'=> 'background');
$event[] = array('id' => $row->id, 
                 'name' => $row->name,
                'date' => $row->date,
                'backgroundColor' => '#1ab394',
                'title' => 'Holiday');

一个用于渲染背景的事件和另一个用于显示标题的事件

答案 2 :(得分:0)

你可以尝试这个

$(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, basicWeek, basicDay'
        },
        //events: "Calendar.asmx/EventList",
        //defaultView: 'dayView',
        events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1),
            description: 'long description',
            id: 1
        },
        {
            title: 'Long Event',
            start: new Date(y, m, d - 5),
            end: new Date(y, m, 1),
            description: 'long description3',
            id: 2
        }],
        eventRender: function(event, element) {
            element.qtip({
                content: event.description + '<br />' + event.start,
                style: {
                    background: 'black',
                    color: '#FFFFFF'
                },
                position: {
                    corner: {
                        target: 'center',
                        tooltip: 'bottomMiddle'
                    }
                }
            });
        }
    });
});

答案 3 :(得分:0)

这对我有用..!这使得该活动的名称显着。

eventAfterRender: function(event, element, view) { 
element.append(event.title);
}