Need to display event title before event time (fullcalendar)

问题

I have events that contain both the event title and event time. However, I need to have 'fc-event-title' show up first in the event, before 'fc-event-time'. Right now it's the opposite. How would I go about switching this?

Any help is greatly appreciated.

回答1:

User @ppumkin suggested that I edit the core javascript (fullcalendar.js), which proved to be the 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 'fc-event-title' span before 'fc-event-time'.

回答2:

I am adding my answer so that it might help someone who don't want to modify the javascript library (fullcalendar.js)

Here I am swaping the HTML of "fc-title" and "fc-time" at "eventRender" function. eventRender is triggered while an event is being rendered. And in "eventRender" function we can modify the calendar DOM.

This code worked for me.

Referece for eventRender: https://fullcalendar.io/docs/eventRender

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

回答3:

How far appart can the title be from the time?

_{(source: gyazo.com)}

If you don't mind it in the right hand corner you can just float the time right.

as all the 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;
}

来源：https://stackoverflow.com/questions/5943443/need-to-display-event-title-before-event-time-fullcalendar

标签

jquery

fullcalendar