CODEWITHSUNDEEP
javascriptphpmysqlfullcalendarfullcalendar-3
Maryam Ait
Maryam Ait

Reputation: 63

how can i display more than the title in fullcalendar

i need help please, i'm using full calendar and i can now display the title of the events but i want also to display an other element from my database (like the full name or description for example) just next to the title how can i do this by using php ?

this is my full calendar script:

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        eventLimit: true, 
        selectable: true,
        selectHelper: true,

        select: function(start, end) {

            $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD '));
            $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD '));
            $('#ModalAdd').modal('show');
        },
        eventRender: function(event, element) {
            element.bind('dblclick', function() {
                $('#ModalEdit #id').val(event.id);
                $('#ModalEdit #title').val(event.title);
                $('#ModalEdit').modal('show');
            });
        },
        eventDrop: function(event, delta, revertFunc) { 

            edit(event);

        },
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 

            edit(event);

        },
        events: <?php print json_encode($events);?>
    });

    function edit(event){
        start = event.start.format('YYYY-MM-DD ');
        if(event.end){
            end = event.end.format('YYYY-MM-DD ');
        }else{
            end = start;
        }

        id =  event.id;

        Event = [];
        Event[0] = id;
        Event[1] = start;
        Event[2] = end;

        $.ajax({
         url: 'editEventDate.php',
         type: "POST",
         data: {Event:Event},
         success: function(rep) {
                if(rep == 'OK'){
                    alert('Saved');
                }else{
                    alert('Could not be saved. try again.'); 
                }
            }
        });
    }

});

Upvotes: 0

Views: 4135

Answers (1)

Shivendra Singh
Shivendra Singh

Reputation: 3006

with eventRender you can append more details with event title. 'fc-title' is default class for event on calendar.

element.find('.fc-title').append(" " + event.description);

eventRender code.

eventRender: function(event, element) {
    //Check what is the key for description in event and use that one.
    element.find('.fc-title').append(" " + event.description); 
     element.bind('dblclick', function() {
            $('#ModalEdit #id').val(event.id);
            $('#ModalEdit #title').val(event.title);
            $('#ModalEdit').modal('show');
        });
}

Upvotes: 4

Related Questions