Question

I am working on a full calendar on a webpage. Currently, the layout of each day block is:

Time
Title
Description

but I would like title goes first and then time. But I cannot find anywhere I can make this change in the code.

$(document).ready(function() {
    $("#cal").fullCalendar({
        header: {
            left: 'prev,next',
            right: 'month,agendaDay'
        },
        aspectRatio: 2,
        editable: false,
        timeFormat: 'h:mmt{-h:mmt}',
        eventTextColor: 'black',
        eventBackgroundColor: '#FFFF77',
        allDayDefault: false,
        eventSources: [{
            url: 'path/to/fullcalendar',
            color: 'green',
            textColor: 'black'
            }],
        eventRender: function(event, element) {
            element.find('.fc-event-title').html(event.title + "<br/>" + event.description).text();
        }
    });
});

So anyone can help me figure out where should I modify to make the change to swap title and time?

Thank you

Answer 1

Inside of eventRender you need to alter the element layout so the time comes after the title. Something like this:

eventRender : function(event, element) {
  var time = element.find('.fc-event-time').detach();
  element.find('.fc-event-title').after(time);
  ... any other code here ...
}