Search code examples
javascriptfullcalendar-3

Event Object property "source" returns [object Object]

I would like to render events differently based on the source of the Event Object, but even though the fullcalendar documentation states

source "Event Source Object. Automatically populated. A reference to the event source that this event came from."

I am unable to query the "source" property of the Event Object.

console.log(event.source); results in [object Object]

I am using multiple Google Calendar eventSources, but nothing in the documentation seems to indicate that I shouldn't be able to do this.

I initially planned to render events based on filtered eventSources (triggered by a custom button which invokes a modal containing checkboxes), but I spent way to long reading up docs, code samples and numerous suggestions before I finally decided to throw in the towel on this idea. In the end I removed all eventSources using 'removeEventSources' before adding each source one by one using 'addEventSource' (depending on what filter options are selected).

It seems that there is no built in mechanism or straight forward functionality to filter eventSources (especially Google Calendars) and I suspect the ability to query the "sources" property of the Event Object would allow us a different approach to accomplish such functionality and improve load times.

Other use case example:

If want to determine the "source" at eventClick or render to decide whether to use certain fields e.g. 

if event source == Holiday Cal do not display event.start & event.end

or

if source == eventSource1 use Modal1 else use Modal2

etc

So my question is:

Does anyone know why I cannot query the "source" property of the Event Object as documented in the following link?

https://fullcalendar.io/docs/event-object

Fullcalendar documentation screen shot:

enter image description here

Solution

  • The message you're seeing tells you that event.source is an Object, so console.log() won't show you much. But console.dir() will, including:

    ...
calendar: t {loadingLevel: 0, ignoreUpdateViewSize: 0, freezeContentHeightDepth: 0, el: w.fn.init(1), viewsByType: {…}, …}
className: ["TestCase"]
googleCalendarId: "e0kujgeepc0ev00eojborllms8@group.calendar.google.com"
... etc

    You can use any of those properties to test which source you're looking at, for eg (not sure why className is an array but that's not relevant to this problem):

    $target = (event.source.className[0] === 'HolidaysUK') ? $modal1 : $modal2;

    Here's a much simplified Codepen which opens your events on click in different modals, depending on source, which is what I understand is one of the things you are trying to do.

    Side note - you'll make it much easier for ppl to help if you try to create a minimal, complete, and verifiable example of your problem. Your Codepen includes loads of stuff entirely unrelated to the problem, which we have to wade through and evaluate and discard while looking at the problem.