CODEWITHSUNDEEP
jqueryfullcalendar
Walhalla
Walhalla

Reputation: 396

Enable timezone on FullCalendar

I'm rebuilding an existing project in which I need to have timezone support. The events get rendered fine by a json-feed. Example data:

[{
    "id":"1",
    "title":"Titel",
    "start":"2016-10-08T12:00:00+02:00",
    "end":"2016-10-08T12:30:00+02:00",
}]

As you see the event has Timezone-Data. (2016-10-08T12:00:00+02:00)

I want to use eventDrop to update an event, an when the user drags and drops an event, the data (eventId, start_time, end_time) is sent to the PHP, which updates the database.

My PHP-script should convert the received start_time & end_time to UTC and write it to the database.

The issue is that fullcalendar doesn't pass the timezone of the event to my PHP. I tried passing something like:

event_start: moment(event.start).format("YYYY-MM-DD HH.mm:ssZZ"),

The data I get is something like:

event_start: 2016-10-08 12.00:00+0000

And I expected it would be something like:

event_start: 2016-10-11 12.00:00+0200

With the timezone-information I could easily convert it to UTC.

How can I have access to the timezone on the PHP side?

Upvotes: 1

Views: 18300

Answers (2)

Genko
Genko

Reputation: 345

Wanted to add my two cents. I had similar issues, but it worked for my needs when I used:

timezone:"local" (I assume you could use "UTC" in your case)

and

format("yyyy-MM-dd'T'HH:mm:ssXXX").

Upvotes: 2

Luís Cruz
Luís Cruz

Reputation: 14970

You need to set the timezone property, probably to 'UTC'. So, something like:

$('#calendar').fullCalendar({
        events: [{
            "id":"1",
            "title":"Title",
            "start":"2016-10-08T12:00:00+02:00",
            "end":"2016-10-08T12:30:00+02:00"
        }],
        timezone: 'UTC'
    });

After that, when you retrieve the events, you should see a tzm: 120 on the start of each event and should be able to grab the correct timezone on server side.

I've created this jsfiddle with a button that retrieves the events and where you can verify this.

Okay, if you want to get the datetime as it is you have two options:

  1. Set the timezone property to the local you need. For instance, if you're using a 00:00+02:00, you could set the timezone to timezone: 'Europe/Belgrade'

  2. Just don't set the timezone at all (leave it to the default false)

Then you can get the the datetime with event.start.format(). Check this fiddle for a demo.

Upvotes: 7

Related Questions