FullCalendar with Gcal won't display events after 7 pm in basicDay view

Question

For some reason fullcalendar won't display any events that occur after 7PM in the basicDay view. The events show up in month view, but not in basicDay view.

Any thoughts would be appreciated.

Here is my code. I have two calendars on the same page. The first one is month view, the second is basicDay view.

  $(document).ready(function() {

  // page is now ready, initialize the calendar...

  $('#calendar').fullCalendar({
   weekMode:'variable',
   events: $.fullCalendar.gcalFeed(
    "http://www.google.com/calendar/feeds/google_account/public/basic"
   ),
   eventClick: function(event) {
    if (event.url) {
     window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
     return false;
    }
   }
  });

  $('#calendar_min').fullCalendar({
   height:193,
   header:false,
      defaultView: 'basicDay',
   events: $.fullCalendar.gcalFeed(
    "http://www.google.com/calendar/feeds/google_account/public/basic"
   ),
   eventClick: function(event) {
    if (event.url) {
     window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
     return false;
    }
   }
  });
 });

Answer 1

What error are you getting? When I replace your google feed with an event after 7pm it displays fine. (Although your example has an extra )}; that needs to be removed.

       $('#calendar_min').fullCalendar({
            height: 193,
            header: false,
            defaultView: 'basicDay',
            events: [
            {
                title: 'Day',
                start: new Date(y, m, d, 20),
                end: new Date(y, m, d, 21),
                description: 'long description3',
                id: 2
            }],
            eventClick: function(event) {
                if (event.url) {
                    window.open(event.url, "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
                    return false;
                }
            }
        });

Answer 2

This is caused because you're located in EST. When creating a new event the time is 12:00am GMT, so -5 hours = 7pm. You may want to look at using ignoreTimezone at http://arshaw.com/fullcalendar/docs/event_data/

Answer 3

I had a similar issue. The Google Calendar timezone was EDT and the last 4 hours of event were missing from the display.

I changed fetchAndRenderEvents() in fullcalendar.js (line 849) to fix the issue.

It was:

function fetchAndRenderEvents() {
        fetchEvents(currentView.start, currentView.end);
            // ... will call reportEvents
            // ... which will call renderEvents
    }

I added one day to the currentView.end

function fetchAndRenderEvents() {
    // Add 1 day to end to ensure all events are fetched  when the time zone is applied.
    fetchEvents(currentView.start, currentView.end.add(1, 'days'));
        // ... will call reportEvents
        // ... which will call renderEvents
}