CODEWITHSUNDEEP
javascriptjsonfullcalendarmomentjs
Wes
Wes

Reputation: 764

fullcalendar - date format for end/start events

This (I hope) is a basic question. I'm not seeing calendar events in fullcalendar, and I believe the issue is the date format I am attempting to use for start/end events. I am attempting to setup a basic calendar by loading JSON events. Here is my JSON output (trimmed to one event so as not to take up much room):

[{"id":"89","title":"A Title","start":"June 2nd 2015","end":"August 14th 2015"}]

My javascript looks like this:

$(document).ready(function() {
    $('#calendar').fullCalendar({
        editable: false,
        events: "data.php"
    });
});

Again, very basic. I know for certain that the issue for the events not appearing is due to the date format I am using, but I am not certain how to tell fullCalendar to use the MMMM Do YYYY format for start/end events with moment.js. Does anyone have advice on how this is accomplished?

EDIT:

Attempted to add something along these lines...but still no luck:

var start = moment(event.start).format("MMMM Do YYYY");
var end = moment(event.end).format("MMMM Do YYYY");

Upvotes: 1

Views: 9713

Answers (2)

Wes
Wes

Reputation: 764

I'm not sure if this would be considered an answer or more of a workaround, but I'll post it as an answer anyway.

I ended up just converting the date format in the json output as Bruno had suggested in the above comment. Sort of wished I could have figured it out with the javascripting, but after hours of trying I could never get the events to display in the calendar.

I'll go ahead and post my php source for those curious (just showing the start date):

    $start = $row['startdate'];
    $start_obj = new \DateTime($start);
    $events['start'] = $start_obj->format('Y-m-d');

Upvotes: 1

Ray
Ray

Reputation: 223

I accomplished something similar by defining a function for the events, iterating through the data creating moment.js objects for the start field using my desired format. The docs have the basics for how to accomplish this.

EDIT: I copied the example from the docs and modified the start time using moment.js.

$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
    $.ajax({
        url: 'myxmlfeed.php',
        dataType: 'xml',
        data: {
            // our hypothetical feed requires UNIX timestamps
            start: start.unix(),
            end: end.unix()
        },
        success: function(doc) {
            var events = [];
            $(doc).find('event').each(function() {
                events.push({
                    title: $(this).attr('title'),
                    start: moment($(this).attr('start'), 'MMMM Do YYYY') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

Upvotes: 0

Related Questions