FullCalendar时区不会修改客户端的时间

Question

I am experiencing a frustrating issue which I've been working on all night. Long story short, if someone in New York creates an event at 2Pm, I'd like that event to show as 8Pm for someone viewing the calendar in Europe (they are six hours ahead let's say).

My fullcalendar configs look like this:

  function renderSchedule(timezone) {
     var userSchedule = $('#user-schedule').fullCalendar({
             header: {
                 left: 'prev,next today',
                 center: 'title',
                 right: 'month,agendaWeek,agendaDay'
             },
             timezone: timezone,
             ignoreTimezone: false,
             events: baseurl + "load_schedule",
             editable: true,
             defaultView: 'agendaWeek',
             firstHour: 8,
             allDayDefault: false
         }

I do have more options, but those should suffice for the purpose of this question.As mentioned in the docs, fullcalendar passes a URL via GET which looks like this:

         mysite.com / my_page / load_schedule ? start = 2014 - 02 - 02 & end = 2014 - 02 - 09 & timezone = Europe % 2FChisinau & _ = 1391660233815 

Then, on the backend I am doing the following to convert fromMYSQL datetime toISO8601

$start = ($event['start']); 
$end = ($event['end']); 
$dateStart = new DateTime($start, new DateTimeZone($timezone)); 
$dateEnd = new DateTime($end, new DateTimeZone($timezone)); 
$dateStart - > setTimezone(new DateTimeZone($timezone)); 
$dateEnd - > setTimezone(new DateTimeZone($timezone)); 
$event['start'] = $dateStart - > format(DateTime::ISO8601); 
$event['end'] = $dateEnd - > format(DateTime::ISO8601); 
$newResult[] = $event;

The $timezone variable holds Europe/Chisinau which was of course passed by fullcalendar itself.

Here is what the above returns back to fullcalendar:

[{"id":"5","start":"2014-02-06T14:10:00+0200","end":"2014-02-06T15:00:00+0200","title":"My title"}]

Everything seems to be correct, but regardless of what I've tried the events show as 2PM.

NOTE This is important, I haven't mentioned this yet but I am passing in a timezone of my choice to the renderSchedule function. So, even though I am located on the East Coast of the US, I would like to be able to pass in a European Timezone and have the calendar render accordingly.

Also, I should point out that I'm using the beta version (2.0) which allows a timezone string to be passed (which I am doing) and uses moments via moment.js

Any idea what I'm doing wrong here?

Answer 1

I was able to get it to work from the demo. I updated your date format to include colons for the offset. Also the latest stable version of fullcalendar 1.6.4 doesn't have a timezone variable.

$('#calendar').fullCalendar({
        editable: true,
        header : {
            left:"prev,next",
            center:"title",
            right:"month,basicWeek,agendaWeek,basicDay,agendaDay"
            },
        ignoreTimezone: false,
        events: [
        {
            start: "2014-02-06T14:10:00+02:00",
            end:"2014-02-06T15:00:00+02:00",
            title:"My title",
            allDay: false
        }
});

If you are using the beta release 2.0, then you need to remove ignoreTimezone as this is no longer a parameter.

Updated Answer:

It turns out the issue was how the dates were being handled on the backend. Here is how I solved this problem.

date_default_timezone_set($timezone);
            $timestampStart = strtotime($mysql_start_date);
            $timestampEnd = strtotime($mysql_end_date);
            $local_time_start = $timestampStart + date('Z');
            $local_time_end = $timestampEnd + date('Z');
            $local_date_start = date('Y-m-d H:i:s', $local_time_start);
            $local_date_end = date('Y-m-d H:i:s', $local_time_end);

            $event['start'] = $local_date_start;
            $event['end'] = $local_date_end;