CODEWITHSUNDEEP
formatfullcalendartitle
danyo
danyo

Reputation: 5846

fullcalendar event title and date format

I am currently using fullcalendar for a project and would like to format the title of the events palced on the calendar.

Currently if an event has a time specified it places the time before the event title so it looks something like this:

4pm Event Title Here

I would like to switch this around and have it look something llike this:

Event Title Here @ 4pm

Is this possible without hacking the core js file? I did look here but cant seem to find any reference.

Upvotes: 1

Views: 1846

Answers (1)

mijopabe
mijopabe

Reputation: 656

Use this after calling fullcalendar wherever (document.ready is preferable):

eventClick: function(data, event, view) {
        var first = $.fullCalendar.formatDate(data.start, "dddd, MMM yyyy @ HH:mmtt");
                    var second = $.fullCalendar.formatDate(data.end, "dddd, MMM yyyy @ HH:mmtt");
        var title = '<h5 style="margin:0;padding:0;">'+data.title+'</h5>'; 
        var content = '<p style="margin:0;padding:2px;"><b>Start:</b> '+first+'<br />' + 
            (second && '<p style="margin:0;padding:2px;"><b>End:</b> '+second+'</p>' || '') + 
            (data.description && '<p style="margin:0;padding:2px;"><b>What:</b> '+data.description+'</p>' || '') + 
            (data.location && '<p style="margin:0;padding:2px;"><b>Where:</b> '+data.location+'</p>' || '');
        tooltip.set({
            'content.title': title,
            'content.text': content
        }).reposition(event).show(event);
    },

You essentially take the data individually from the fullcalendar core file, assign variables to each, combine if you want (I did for 'start' and 'end' as I wanted that displayed after "When:" on my site), then call them in whatever order you want. I used Craig Thompson's qTip2 as it plays nicely with Adam Shaw's fullcalendar. Also, version 2.0.1 is out.

Upvotes: 1

Related Questions