CODEWITHSUNDEEP
jqueryfullcalendar
Deepak Keynes
Deepak Keynes

Reputation: 2339

events' title is not displayed in FullCalendar

I developed a full calendar page, in which the title of the 'holidays' event is not displayed and this happens while i give the rendering background only. It is annoying me for a while, for i do not know where am i making a mistake..

My code is as follows:-

$(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'

                    }                    
                ],
});

});

Through the controller, i am passing the holidays' event. In the above code if i comment the rendering - background then i get events' title.

My sample output is :-

Title not displayed while rendering

Upvotes: 0

Views: 3603

Answers (4)

Shanka SMS
Shanka SMS

Reputation: 654

I also try with several ways but finally bellow code helps for me

try this

eventRender: function (event, element) {       

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

Upvotes: 1

Janani Kumar
Janani Kumar

Reputation: 381

I have tried it. but when rendering the background, title didn't appear. i ended up with creating two events for the same day one for background and another for displaying title.my event array was like this.

$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');

one event for rendering background and another for displaying title

Upvotes: 1

Deepak Keynes
Deepak Keynes

Reputation: 2339

This worked for me..! This made the title of the event significantly.

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

Upvotes: 0

paramesh
paramesh

Reputation: 1

You Can try this one

$(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'
                    }
                }
            });
        }
    });
});

Upvotes: 0

Related Questions