1

Reference: FullCalendar 3.9.0, FullCalendar-Scheduler 1.9.4

Can anyone confirm whether or not it is possible to group Google calendar events by resource? Adding a resourceId parameter to a calendar source as follows:

    var myCalSrc = {
    id: 1,
    googleCalendarId: '<myCalSrcURL>',
    color: '<myCalSrcColor>',
    className: '<myCalSrc-events>'
};

results in a blank display. The following note in the FullCalendar-Scheduler gcal.html file located in the demos directory states:

  /*
  NOTE: unfortunately, Scheduler doesn't know how to associated events from
  Google Calendar with resources, so if you specify a resource list,
  nothing will show up :(  Working on some solutions.
  */

However, the following threads appear to suggest there may have been a fix for this:

GitHub - Add ResourceId Parameter to gcal.js (fix supplied)

GitHub - Specify resourceId in Event Source settings

However, checking the gcal.js file reveals the fix has not been added to that file.

Is it possible to manually assign a resourceId to each of the Google Calendar feeds in order to replicate the Resources and Timeline view indicated by the FullCalendar Timeline View documentation?

Any guidance would be greatly appreciated.

ADyson
  • 57,178
  • 14
  • 51
  • 63
ridgedale
  • 190
  • 1
  • 1
  • 14
  • Changing the code to: `var myCalSrc = { id: 1, googleCalendarId: '', color: '', resourceID: 'a' className: '' };` and adding: `$('#calendar').fullCalendar({ ... resources: [ { id: '1', title: '' }, ... ], ... ` fails to display any events. – ridgedale Jun 21 '18 at 09:32

1 Answers1

2

As per the issue in your second GitHub link (which your first one was merged with), https://github.com/fullcalendar/fullcalendar-scheduler/issues/124, the fix you mentioned is still awaiting testing (as of 11 Mar 2018). So if you're patient it will likely be added to a future release, assuming it passes the tests. In the meantime, here is a potential workaround:

In fullCalendar it's possible to define a separate eventDataTransform for every event source.

Therefore I think you should be able to use this to set a resource ID for each event depending on the Google Calendar it came from:

eventSources: [
  { 
    googleCalendarId: 'abc@group.calendar.google.com', 
    color: 'blue',
    eventDataTransform: function(event) {
      event.resourceId = 1;
      return event;
    } 
  }, 
  { 
    googleCalendarId: 'def@group.calendar.google.com', 
    color: 'green', 
    eventDataTransform: function(event) {
      event.resourceId = 2;
      return event;
    } 
  }, 
  { 
    googleCalendarId: 'ghi@group.calendar.google.com', 
    color: 'red' ,
    eventDataTransform: function(event) {
      event.resourceId = 3;
      return event;
    } 
  }
]

I'm not able to test this right now but it looks like it should work. Hopefully this will take place before it's rendered on the calendar and needs to belong to a resource.

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • Hi ADyson, Thank you for the workround. That now allows the events to be displayed correctly. One thing I've noticed though is that an fc-icon class is added before the resource titles (effectively showing as an unnecessary preceeding space) when switching from agendaDay view to timelineMonth. If I set the default view to timelineMonth the an fc-icon class is not initially added and so the titles display without the unnecessary initial space before the titles. – ridgedale Jul 05 '18 at 16:49
  • That sounds like a separate UI question related to the timeline view. If the answer above helped you with the google calendar question, please remember to mark it as accepted - thanks. I suggest you ask a new question regarding the icon issue. – ADyson Jul 06 '18 at 09:03
  • Thanks, ADyson. Will do. – ridgedale Jul 07 '18 at 05:18