How to use with randomBrainstormer/MMM-GoogleCalendar?

[kennyviperhk]

Hi I have tried with below config but seems not able to display the calendar. It works with normal calendar as in your Readme example

Is there an example I could follow on the config for MMM-GoogleCalendar?
thanks!

`

	{
		module: "MMM-CalendarExt3",
		position: "top_left",
		title: "",
		config: {
			mode: "week",
			instanceId: null,
			firstDayOfWeek: 1,
			useSymbol: true,
			locale: "en-US",
			maxEventLines: 5,
			firstDayOfWeek: 1,
			calendarSet: [],
			displayLegend: true,

		}
	},
	{
		module: 'MMM-GoogleCalendar',
		header: "My Google Private Cal",
		position: "top_left",
		hiddenOnStartup: false,
		config: {
			broadcastPastEvents: true,
			broadcastEvents: true,
			calendars: [
				{
					symbol: "calendar-week",
					calendarID: "calendarID",
					name: "cal"
				},
				// add another calendar HERE if needed
			],
		}
	},

`

[eouia]

You need to read this section
https://github.com/MMRIZE/MMM-CalendarExt3#compatible-with-randombrainstormermmm-googlecalendar

[simsl]

Hey,
Co-opting this thread as I have the same question and it seems dead - hope that's ok!

I've read the section for Google Calendar linking and tried to implement as I understood it, but without success:

     modules: [
            {
              module: 'MMM-GoogleCalendar',
              header: "My Google Private Cal",
              position: "bottom_left",
                config: {
                    calendars: [
                            {
                            name: "f1cal",
                            symbol: "flag-checkered",
                            calendarID: "removedcalendaridhere"
                            },
                    ],
                }
            },
	{
	  module: "MMM-CalendarExt3",
	  position: "top_right",
	  title: "CALENDAR TEST",
	  config: {
	    mode: "week",
	    weekIndex: "0",
	    weeksInView: "1",
	    instanceId: "basicCalendar",
	    locale: 'en-GB',
	    maxEventLines: 5,
	    firstDayOfWeek: 1,
	    calendarSet: ['f1cal'],
	    fontSize: '30px',
	    eventHeight: '34px',

	   	 preProcessor: (e) => {
	  		if (e.start?.dateTime) {
	        		e.startDate = new Date(e.start.dateTime).valueOf()
			} else if (e.start?.date) {
		        	e.startDate = new Date(`${e.start.date}T00:00:00`).valueOf()
			}

	    		if (e.end?.dateTime) {
	    			e.endDate = new Date(e.end.dateTime).valueOf()
			} else if (e.end?.date) {
		        	e.endDate = new Date(`${e.end.date}T00:00:00`).valueOf()
	    		}

			e.title = e.summary
			e.fullDayEvent = (e.start?.date) ? true : false
			return e
		 }
	  }
	},
]

The Google Calendar pops up in the bottom left with events, but CalendarExt3 doesn't show up at all because it doesn't seem to find the GoogleCalendar.

I've tried:
0. Ripping down config to just GoogleCalendar and CalendarExt3.

1. Replacing Google Calendar module with basic calendar module from MM example - this works as expected with basic events showing in the CalendarExt3.
   
2. Changing CalendarSet to [] or null (which I understand should grab all calendars) - but this doesn't make a difference to trying to get the events showing in CalendarExt3.
3. Swapping out the code from the example using PreProcessor to eventTransformer as per example in another issue I found Will it work with MMM-GoogleCalendar module? #5 (reply in thread) - this didn't change the result either.

I'm new to Magic Mirrors so might be missing something obvious here, but does that config look right/anything else I can try/more info I can provide?

Thanks!

[KristjanESPERANTO]

Two issues in your config:

1. MMM-GoogleCalendar needs broadcastEvents: true in its config to emit events at all — without it, no events are broadcast and CX3 receives nothing.

2. preProcessor is not a valid option and has no effect. The correct option to transform the MMM-GoogleCalendar payload format is eventPayload:

{
  module: "MMM-CalendarExt3",
  config: {
    eventNotification: "CALENDAR_EVENTS",
    eventPayload: (payload) => payload.map(e => ({
      ...e,
      startDate: e.start?.dateTime
        ? new Date(e.start.dateTime).valueOf()
        : new Date(`${e.start.date}T00:00:00`).valueOf(),
      endDate: e.end?.dateTime
        ? new Date(e.end.dateTime).valueOf()
        : new Date(`${e.end.date}T00:00:00`).valueOf(),
      title: e.summary,
      fullDayEvent: !e.start?.dateTime,
    })),
    // ... rest of your config
  }
}

[KristjanESPERANTO]

Closing this due to inactivity, but leaving a note for anyone who finds this later.