My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 918: Fullcalendar clientEvents not respecting timezone
2 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  May 2011


Sign in to add a comment
 
Reported by michaelc...@michaelcole.com, Apr 19, 2011
Hi, I could be doing this wrong, but I think "clientEvents" is munging dates somehow.  I'm getting tripped up on timezones with Fullcalendar.  I've tried setting ignoreTimezone to true and false, but it doesn't seem to matter.  (It's in the code below in two places because I wasn't exactly sure from the docs where it goes.)

My data source is a hidden form field.  Data that goes *out* of FullCalendar (using clientEvents) is adjusted by adding 5 hours (I'm in CDT).  Data that goes *in* to FullCalendar isn't adjusted by removing 5 hours.

On the back-end, I'm just saving and returning the JSON string without processing it (or even decoding it)

    Page Load:
      Data In: Empty, no data
      Data Edit: drag from noon to 2pm (CDT), then submit form
      Data Out: Use clientEvent to get data, and JSON.stringify to put into form field.
        [{"id":6844,"title":"Open","start":"2011-04-19T17:00:00.000Z","end":"2011-04-19T19:00:00.000Z","allDay":false}]
    
    Page Load (after submitting form):
      Data In: Use JSON.parse to load data from hidden form field.  This is the incoming data, but the event is shifted to 5pm (CDT) in the control.  
        [{"id":6844,"title":"Open","start":"2011-04-19T17:00:00.000Z","end":"2011-04-19T19:00:00.000Z","allDay":false}]
      Data Out:  Without changing the control, it's now:
        [{"id":6844,"title":"Open","start":"2011-04-19T22:00:00.000Z","end":"2011-04-20T00:00:00.000Z","allDay":false}]

I setup the Fullcalendar like this:

    // Fullcalendar for business hours page
    
    jQuery(document).ready(function() {
    
      jQuery('#edit-submit').bind("click", business_hours_set);
      jQuery('#edit-preview').bind("click", business_hours_set);
    
      jQuery('#calendar').fullCalendar({
    
        // configure display
        header: {
          left: '',
          center: '',
          right: ''
        },
        ignoreTimezone: false,
        defaultView: 'agendaWeek',
        allDaySlot: false,
        firstHour: 8,
    
        // configure selection for event creation
        selectable: true,
        selectHelper: true,
        select: business_hours_add,
    
        // configure data source
        editable: true,
        eventSources: [
        {
          events: jQuery.parseJSON(jQuery('#fullcalendar_data').val()),
          color: '#992B0A',
          textColor: 'white',
          ignoreTimezone: false
        }
        ],
    
        // configure editing
        eventClick: function(calEvent) {
          business_hours_delete(calEvent.id);
        }
      });
      alert(jQuery('#fullcalendar_data').val());
    });
    
    function business_hours_add(startDate, endDate) {
      var calendar = jQuery('#calendar');
      var newid = Math.ceil(Math.random()*64000);
      calendar.fullCalendar('renderEvent',
      {
        id: newid,
        title: "Open",
        start: startDate,
        end: endDate,
        allDay: false
      },
      true // make the event "stick"
      );
      calendar.fullCalendar('unselect');
    }
    
    var business_hours_selectedId = -1;
    function business_hours_delete(id) {
    
      business_hours_selectedId = id;
    
      jQuery( "#dialog-confirm" ).dialog({
        resizable: false,
        height:160,
        modal: true,
        buttons: {
          "Yes, delete!": function() {
            calendar = jQuery('#calendar');
            calendar.fullCalendar( 'removeEvents', business_hours_selectedId);
            jQuery( this ).dialog( "close" );
          },
          Cancel: function() {
            jQuery( this ).dialog( "close" );
          }
        }
      }, id);
    }
    
    function business_hours_set() {
      var data = jQuery('#calendar').fullCalendar( 'clientEvents' );
    
      // data is cyclical.  Create a new data structure to stringify.
      var ret = [];
      for(var i=0; i<data.length; i++) {
        var datum = {
          id: data[i].id,
          title: data[i].title,
          start: data[i].start,
          end: data[i].end,
          allDay: data[i].allDay
        }
        ret[i] = datum;
      }
      // stringify and return
      jQuery('#fullcalendar_data').val(JSON.stringify(ret));
      alert(JSON.stringify(ret));
    }

This seems like a bug, but maybe I'm doing it wrong?

Thanks in advance, Mike
Apr 20, 2011
#1 michaelc...@michaelcole.com
Hi, this is my workaround.  If I'm missing something, I'd be excited to know more.

function parseISO8601(s, ignoreTimezone) { // ignoreTimezone defaults to false
  // if browser Date can parse s, and get a timestamp, then use browser parser.
  if (!isNaN(Date.parse(s))) {
    return new Date(s);  // does not use ignoreTimezone
  }

  ...
}
May 8, 2011
Project Member #3 adamrs...@gmail.com
i believe your problem is related to  issue 750 .

in your workaround, you are relying on the native date object to parse the iso8601 date, which wont work in most browsers.

will get  issue 750  fixed soon
Status: Done
Sign in to add a comment

Powered by Google Project Hosting