It is necessary to display the title of the event before the time of the event (fullcalendar)

Question

I have events that contain the name of the event and the time of the event. However, I need the "fc-event-title" to be displayed first in the event, before the "fc-event-time". Now the opposite is true. How can I switch to this?

Any help is greatly appreciated.

Answer 1

User @ppumkin suggested I change the main javascript (fullcalendar.js), which turned out to be a solution. I took the following item on line 3665:

(!event.allDay && seg.isStart ? "<span class='fc-event-time'>" + htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) + "</span>" :'') + "<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" + 

And replaced it with the following:

 "<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" + (!event.allDay && seg.isStart ? "<span class='fc-event-time'>" + htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) + "</span>" :'') + 

Basically, I just put the space "fc-event-title" before "fc-event-time".

Answer 2

How far can the title bar be from time to time?

http://gyazo.com/866a825b53ac22eebfbbedc6ec6961c2.png

If you don't mind this in the right corner, you can just swim at the right time.

since all times have a class called fc-event-time <span class="fc-event-time">5p</span>

 .fc-grid .fc-event-time { float: right; font-weight: bold; } 

Answer 3

I am adding my answer so that it can help someone who does not want to modify the javascript library (fullcalendar.js)

Here I will swap "fc-title" and "fc-time" in the "eventRender" function. EventRender fires during event rendering. And in the function "eventRender" we can change the DOM calendar.

This code worked for me.

EventRender Link: https://fullcalendar.io/docs/eventRender

 eventRender: function (event, element, view) { element.find('.fc-title').each(function () { $(this).insertBefore($(this).prev('.fc-time')); }); }