CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapfullcalendar
Derek
Derek

Reputation: 5037

Format eventRender date in Fullcalendar

I am using FullCalendar to render events from PHP/MySQL and all is working fine. I looked through the FullCalendar documentation and bootstrap to achieve my popover event. I use the FullCalendar eventRender and I have access to the event and element using

eventRender: function(event, element) {
    $(element).popover({
        placement : 'top',
        html : true,
        trigger : 'hover',
        title : event.title + ' <a href="#" class="close" data-dismiss="alert">×</a>',
        content : '<p>' + event.start + '</p><p>' + event.end + '<p>' + event.description + '</p>'
    });

When it shows the date (such as event.start) it looks like this on the front end 1485427500000 then I learned I could use the Javascript date function. After realizing this gave me the wrong format so I tried toLocaleTimeString() which gave me the following results:

enter image description here

The first date time you see uses new Date(event.start) the second uses new Date(event.end).toLocaleTimeString(). But there are 2 problems I can not seem to figure out.

Question: How can I format both event.start and event.date to be my timezone (you notice the time is different on the calendar and on the popup) and to be something like (for example) 5:00pm Thursday Jan 26th, 2017 ?

Upvotes: 2

Views: 2720

Answers (2)

wivku
wivku

Reputation: 2703

Starting FullCalendar v4, Moment is optional plugin.

You can use Intl.DateTimeFormat:

content: '<p>' + new Intl.DateTimeFormat('default', {
  month: 'short', day: 'numeric',
  hour: '2-digit', minute: '2-digit', hour12: false,
}).format(new Date(info.event.start))

Upvotes: 0

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14520

Dates returned by FullCallendar are Moment objects, which means you can format them using the Moment syntax. There are examples of format strings on the Moment site. Something like this should work for the example format you specified:

content: '<p>' + event.start.format('h:mm a ddd MMM Do YYYY') ...

Upvotes: 3

Related Questions