MMM-CalendarExt3

crisvdn

Hi there,

Installed your module which is really nice.
I have one question though.
At start up, it fetches all calendar’s I am using. However, it rendered and showed the calendars on the mirror before fetching. So its missing.

Obviously you can fix that by having a faster fetchInterval. But I feel that is kind of unnecessary, since you dont make changes in your agenda by the minute.

Is there a way to Fetch, and only populate the calendar on the mirror after all fetching is done?

Regards, Cris

MMRIZE

@crisvdn
There is ‘waifFetch’ config value to wait enough time.

Splashed

@MMRIZE

I am having some issues where events show up in my Calendar Module, but don’t always show up in my CalendarExt3 module. For instance, I currently have 5 working calendars displaying the upcoming events via the calendar module. All five calendars are displaying their information.

Currently though, only three of those calendars are showing in my monthly view of CalendarExt3. Sometimes, if I remove one or two of the calendars that do display, then I can get the ones that didnt work to show up on CalendarExt3. Currently however, I have removed all but two calendars, and still only one of them is displaying.

Overall, I have about 8 calendars Id like to link, and Ive never gotten more than about 4-5 to work at once, despite the fact that I can get them all to show in the Calendar module at the same time.

Any suggestions? I can post more details if desired.

sdetweil

@Splashed the default calendar clips off the broadcast events using the

maximumEntries

property. the doc says the max is 100, but that is never checked

it can be set above the calendars list
and this value is used for the TOTAL number of events sent
the code

return events.slice(0, this.config.maximumEntries);

or can also be set in a particular calendar

note that this size INCLUDES the PAST events if broadcastPastEvents:true
is set

MMRIZE

@Splashed
Maybe one of reason was mentioned by @sdetweil,
The other reason might be fetching finish synchronization issue. When you operate many calendars to fetch, some calendars might not end fetching before drawing CX3 due to hw performance, internet speed, server’s issue, etc.
There would be 2 general solution.

wait for next refreshing cycle. The fetching of calendars may be completed until then.
Or you can use ‘waitFetch’ config value to delay the rendering view.

crisvdn

@MMRIZE Thanks for your response. That actually did this.

The config name is a bit confusing though. It implies waiting to fetch the calendars?
Anyways, thank you for this awesome module :D

gonzonia

I’ve been using MMM-CalendarExt3 for a while now and all is good. Suddenly I’ve got a single event that’s an hour off. The events for the rest of the day are fine, and the time is correct on all other methods (Google Calendar, BusyCal, iOS Calendar).

MMRIZE

@gonzonia Could you send me the ice file(or downloadable url) and your config? (eouia0819@gmail.com)

Splashed

@MMRIZE Seems like you are correct with the refreshing interval. If I simply exercise patience and give it 5-10 minutes then all of my calendars do load.

wperry530

Hello all!

New to building out my magic mirror, and I’m running into a problem. If I understand correctly, this module would allow me to click an event from my google calendar and see the details. When I run the module, I am not getting that feature.

Is it something I’m doing wrong or am I misunderstanding something? Below is my config, and I have installed the lastest version of Electron.

{
  module: "calendar",
  header: "My Calendar",
  config: {
    calendars: [
      {
        symbol: "calendar",
        url: "**super secret**", // Replace with your actual Google Calendar ICS link
		name:"wes",
		color:"red"
      }
    ],
    maximumEntries: 10, // Number of events shown
    maximumNumberOfDays: 365, // Show events up to a year in advance
    displaySymbol: true, // Display the calendar symbol
    defaultSymbol: "calendar", // Default symbol if none specified for calendar
    // Other configuration options can be added here based on your preference
  }
},
{
  module: "MMM-CalendarExt3",
  position: "middle center",
  title: "",
  config: {
    mode: "week",
    instanceId: "basicCalendar",
    maxEventLines: 5,
    firstDayOfWeek: 0,
    calendarSet: ['wes']
  }

MMRIZE

@wperry530
Not only popover feature is not abled? Or some other symptom you have?
If only popover doesn’t work, What browser and version do you use? (Electron or Chromium version I need)

wperry530

@MMRIZE

I tried a fourth uninstall / reinstall along with rebooting and it started to work. Thank you for the quick response!

1lolo94

@MMRIZE - New to MagicMirror and need some help please! I finally got my calendar and google calendar sync’d… but now I lost my weather on the top right of the screen and for some reason the weather is showing for the next 5 days on the calendar - are these related?
Sorry my picture would not upload for some reason :(

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
 {
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "PRIVATE STUFF",                                 
				  name: "family",
                                  color: "yellow",
                                        user: 'xxxxxxxxxxx@gmail.com',
                                        pass: 'x',
                                        method: 'basic'
                                }
                                        ]
                                }
                },

		{
			module: "weather",
			position: "top_center",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "xxxxx",
				locationID: "5x1x7xxx2xx078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "xxxxxxx",
				roundTemp: true,
			}
		},
		{
			module: "weather",
			position: "top_center",
			//header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "xxxx",
				locationID: "51x72x0x78", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "xxxxxx",
				fade: false,
				colored: "true",
				roundTemp: true,
			}
		},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (type of module !== "undefined") { module.exports = config; }

CSS FILE (weather was working before adding calendar)


 body { 
 color: #000;
 }
 
 .dimmed {
  color: #000;
  }

.normal {
  color: #000;
}

.bright {
  color: #000;
}
.module.clock {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  color: #000;
}
.dimmed {
/*  color: #666; */
    color: #000;
}
.normal {
/*  color: #999;*/
    color: #000;
}
.bright {
  color: #000;
}
.header {
  color: #000;
}
.MMM-CalendarExt3 {
        margin-bottom: -5px;
        width: 100%;
        height: 575px;
        font-size: 20px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}

sdetweil

@1lolo94 said in MMM-CalendarExt3:

Sorry my picture would not upload for some reason

pic upload is the third icon from the right above the post editor

MMRIZE

@1lolo94
top_right? You positioned weather module top_center… I need pictures what you mean.

1lolo94

I had to resize - sorry

1lolo94

@MMRIZE - correct, sorry - I was testing it out both ways and was about 6 hours straight trying to get everything setup.

I would like it how it was in the top right. I removed all the calendar coding and the weather shows up correctly.

modules: [
   	{
   		module: "alert",
   	},
   	{
   		module: "updatenotification",
   		position: "top_bar"
   	},
   	{
   		module: "clock",
   		position: "top_left"
   	},
   	{
   		module: "weather",
   		position: "top_right",
   		config: {
   			weatherProvider: "openweathermap",
   			type: "current",
   			location: "xx",
   			locationID: "517xx2078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
   			apiKey: "1325b9a82957229ac168e428011778d8",
   			roundTemp: true,
   		}
   	},
   	{
   		module: "weather",
   		position: "top_right",
   		//header: "Weather Forecast",
   		config: {
   			weatherProvider: "openweathermap",
   			type: "forecast",
   			location: "xx",
   			locationID: "xxx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
   			apiKey: "1325b9a82957229ac168e428011778d8",
   			fade: false,
   			colored: "true",
   			roundTemp: true,
   		}
   	},
   ]
};

sdetweil

@1lolo94 just fyi. you can disable modules by adding a line for each

disabled:true,

between the module: and config: lines
note the trailing comma

sdetweil

@1lolo94 note that each section is a stack, 1st in config.js in that position goes first , next next, etc. if too much, it gets clipped off at the bottom of the screen.

so if ext3 cal is first, others are below it.
you could change css to prove it

in custom.css

body {
  overflow: default;
}

then try to scroll the page, up to see below the fold

1lolo94

@sdetweil So i did everything you said (and i may have messed up) and now all i see if the calendar at the bottom.

Config.js

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
 		{
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "https://calendar.google.com/calendar/ical/508cafe09ed07b094af03472b6e4b4df1afcc8f9bd961857492b70bcc6978e12%40group.calendar.google.com/private-9092589d68a2b474a7739751badffb79/basic.ics",                                 
				  name: "family",
                                  color: "yellow",
                                        user: 'xx@gmail.com',
                                        pass: 'xxxxxx',
                                        method: 'basic'
                                }
                                        ]
				}
                },
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "xx",
				locationID: "xx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "1325b9a82957229ac168e428011778d8",
				roundTemp: true,
			}
		},
		{
			module: "weather",
			position: "top_right",
			//header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "xx",
				locationID: "51xxx72078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "1325b9a82957229ac168e428011778d8",
				fade: false,
				colored: "true",
				roundTemp: true,
			}
		},
	]
};


/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

Custom CSS

/* MagicMirrorÂ² Custom CSS Sample
 *
 * Change color and fonts here.
 *
 * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
 *
 * MIT Licensed.
 */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */

:root {
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: black;

  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  
  --font-size: 20px;
  --font-size-small: 0.75rem;

  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  
  --gap-modules: 30px;
}

body {
  overflow: default;
}

 body { 
 color: #000;
 }
 
 .dimmed {
  color: #000;
  }

.normal {
  color: #000;
}

.bright {
  color: #000;
}
.MMM-CalendarExt3 {
        margin-bottom: -5px;
        width: 100%;
        height: 575px;
        font-size: 20px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
.module.clock {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  color: #000;
}
.dimmed {
/*  color: #666; */
    color: #000;
}
.normal {
/*  color: #999;*/
    color: #000;
}
.bright {
  color: #000;
}
.header {
  color: #000;
}