MMM-CalendarExt2

[A Former User]

@jani-karna
https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling
Each event has eventSub (and its sub-elements eventLocation and eventDescription). By default, agenda(upcoming and current) views would reveal eventSub, so, you can use that CSS selector to specify.

[jani.karna]

@Sean said in MMM-CalendarExt2:

@jani-karna
https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling
Each event has eventSub (and its sub-elements eventLocation and eventDescription). By default, agenda(upcoming and current) views would reveal eventSub, so, you can use that CSS selector to specify.

Missed that styling part… :grimacing_face: got it working, thank you again!

[code999]

Hello again. is there a way to scroll the events when there are so many on a single day with displaying the (+x).

Thanks.

[A Former User]

@code999
no. i was tried scrolling in my older CALEXT but too burden to rpi.

[A Former User]

@code999
Instead, you can sort and filter the order of events to be shown.

[ChickenBeard]

Did CalendarExt in Weeks (or Month) view automatically adjust the height of the day to accommodate the events?
I swear if there was only one or two events for a day (in a given week), the whole row was shorter.

[A Former User]

@ChickenBeard
Not adjusted automatically. you can set the height of the slot manually.

[ChickenBeard]

@Sean said in MMM-CalendarExt2:

Not adjusted automatically. you can set the height of the slot manually.

Is it CX2 .slot ?

[A Former User]

@ChickenBeard
if you mean some table views (month, week), set slotMaxHeight of view configuration.
https://github.com/eouia/MMM-CalendarExt2/wiki/2c4.-View:week,-month

[code999]

@Sean okay. it would be great to have though. not seeing the events is not good. limited space on the screen so i cant just make more room because then i will lose a full week from the month view.
thanks.

[code999]

@Sean could you help me do that anyway? lol
i would really like it to do that.
Thanks.

[A Former User]

@code999

could you help me do that anyway? lol
i would really like it to do that.

do what?

[code999]

@Sean make the events under a date that is not showing scroll.
I am trying to figure it out but I have no coding knowledge at all so I just randomly change things and see what it does but I am not getting anywhere doing that at all.

[A Former User]

@code999
To show more events in a cell, just set bigger slotMaxHeight. And shrinking the font-size and height of event element could be help.

But anyway, Usual MagicMirror Screen has not so enough space to show many events with Table Views(month and week view). Even normal Desktop calendar programs like Google Calendar MS-Office or Apple Calendar couldn’t show too many events in a cell.

Maybe you can make show 5 or 6 events in a day cell. But What about 7 events or 8 events? It could not be solved at last.

Auto-scroll could be the ideal solution, but RPI has not enough power to maintain so many scrolling effects. (Maybe RPI4 could have enough power but many ppl also are using even RPI0)
However, you want it, use MMM-CalendarExt instead. It has that feature but will be very slow.

Another possible approach would be to filter and/or to sort events to show. Some of the events will not be more important than others to show in that view. You can filter unimportant events not to show, Or at least, you can sort them to hide.

[cskenney]

Just a general question. I have my calendar pulling from 6-7 different Google calendars. I have the module configured to retrieve the calendar data every 5 minutes. I did this to allow changes made to an entry to be updated pretty quickly on my display.

The issue is if I modify a calendar entry in my Google calendar it doesn’t get updated in the MM calendar display. If I stop MM and then restart it then everything will be correct. But leaving it running it doesn’t update with the changes. I have also seen this if I deleted a calendar entry it will remain in my MM calendar on the display.

Here is the code I am using. I put the scan interval for the calendars in the default section.

				locale: "en",
				defaultSet: {
						calendars: {
							maxItems: 500,
							scanInterval: 1000*60*5,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},

[A Former User]

@cskenney
scanInterval is just for scanning calendars, finding something changed, then loading them. So, your modified events would definitely be loaded on the module.
But displaying is another issue. rotateInterval(when you are using multi-scenes) or updateInterval (When you are using single-scenes) could make refreshing the displaying.
https://github.com/eouia/MMM-CalendarExt2/wiki/2e.-Configuration:Others

[cskenney]

@Sean I have the rotateInterval set to 0 and the updateInterval set to (5 minutes).

I will post my code below but I will need to removed the URL to my calendars.

		{	/*MMM-CalendardExt2*/
			module: 'MMM-CalendarExt2',
			config: {
				rotateInterval: 0,	//rotate between scenes default = 60*1000; 0 disables
				updateInterval: 5*60*1000,	//If not auto-rotated
				firstDrawingDelay: 10*1000,	//delay to allow calendar parsing
				locale: "en",
				defaultSet: {
						calendars: {
							maxItems: 500,
							scanInterval: 1000*60*5,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},
						view: {
							timeFormat: "h:mm A",
							transform: function(event) {
								if (event.title.search("Panic") > -1) {
								event.icon = "noto-softball";
								event.className = "view_panic";
								} else if (event.title.search("Arin") > -1) {
								event.icon = "noto-softball";
								} else if (event.title.search("Violin") > -1) {
								event.icon = "emojione-monotone:violin";
								}
								return event;
							},							
						},
						scene: {}
				},
				calendars: [
					{
						name: "Chris",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_chris",
					},
					{
						name: "Kim",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						icon: "twemoji-medical-symbol",
						className: "cal_kim",
					},
					{
						name: "Lauren",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_lauren",
					},
					{
						name: "Ryan",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_ryan",
					},
					{
						name: "MHS Softball",
						url: "https://calendar.google.com/calendar/ical/...basic.ics",
						icon: "noto:softball",
						className: "cal_mhs_softball",
					},
					{
						name: "Softball Badgers",
						url: "https://calendar.google.com/calendar/ical/...basic.ics",
						icon: "noto-badger",
						className: "cal_badgersoftball",
					},
					{
						name: "BOPA",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						icon: "emojione-musical-score",
						className: "cal_bopa",
					},
				],
				views:[
					{
						name: "View_Daily",
						mode: "daily",
						position: "top_left",
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
						hideOverflow: false,
						filterPassedEvent: false,
						slotCount: 2,
						maxItems: 500,
					},
					{
						name: "View_Upcoming",
						mode: "upcoming",
						slotTitle: "UPCOMING",
						position: "top_center",
						maxItems:10,
						maxDays: 3,
						hideOverflow: false,
						filterPassedEvent: true,
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
						className: "views_upcoming",
					},
					{
						name: "View_5D_Overview",
						title: "CALENDAR",
						mode: "daily",
						type: "row",
						position: "bottom_bar",
						maxItems: 500,
						slotCount: 5,
						hideOverflow: false,
						filterPassedEvent: false,
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
					},
				],
				scenes:[
					{
						name: "DEFAULT",
						views: ["View_Daily","View_5D_Overview"],
						className: "Scene_Default",
					},
				],
			},
		},//end of calendarext2 module
	],

};

[BKeyport]

hey, Sean -

three minor issues and I got my install perfect:

1. I’m trying to set up a wider slot for the calendar - I’ve got the region expanded and adjusted, but how do I get the item slots to match?:
   

.region.top.center {
  left: 40%;
  -moz-transform: translateX(-40%);
  -o-transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
  -ms-transform: translateX(-40%);
  transform: translateX(-40%);
  min-width: 750px;
}

2. I’d like to get rid of the refresh fade. I find it annoying - how to do so?

3. When I have the “Seahawks” calendar enabled, only the trash calendar loads initially, and after first refresh, the others come in. Can you help with why?

{
			module: 'MMM-CalendarExt2',
				config: {
					calendars : [
						{
							url: "https://calendar.google.com/calendar/ical/PRIVATE",
							name: "Main Calendar", // Optional, Recommended
							maxItems: 100,
							scanInterval: 1000*60*1, // every minute, Appt Book, needs this speed
							beforeDays: 0,
							afterDays: 999,
							maxIterations: 999,
							forceLocalTZ: false,
						},
						{
							url: "https://calendar.google.com/calendar/ical/PRIVATE2",
							name: "Trash Calendar", // Optional, Recommended
							maxItems: 100,
							scanInterval: 24*60*60*1000, // Once a day
							beforeDays: 0,
							afterDays: 999,
							maxIterations: 999,
							forceLocalTZ: false,
						},
						{
							url: "http://www.trumba.com/calendars/seattle-seahawks-schedule.ics",
							name: "Seahawks Calendar", 
							maxItems: 100,
							scanInterval: 24*60*60*1000, // Once a day (Is once a week acceptable???) 
							beforeDays: 0,
							afterDays: 999,
							maxIterations: 999,
							forceLocalTZ: false,
						},
						
					],
					views: [
						{
							mode: "daily",
							position: "top_center",
							slotCount: 99,
							timeFormat:"h:mm A",
							hideOverflow: false,
							name: "Daily View",
							className: "remove_empty_slot",
							calendars: ["Main Calendar","Trash Calendar","Seahawks Calendar"],
							transform: function(event) {  
								if (event.title.search("Recycle") > -1) {
									event.icon = "mdi:recycle";
								}
								if (event.title.search("Yard Waste") > -1) {
									event.icon = "entypo-leaf";
								}
								if (event.title.search("Seahawks") > -1) {
									event.icon = "fa-solid:football-ball";
								}
								return event;
							},
//
						},
					],
					scenes: [
						{
							name: "DEFAULT",
						},
					],
				},
		},

Edit: I guess I have a fourth - I’d like to adjust anything to do with Seahawks (the transform above) to have the inverse color like an all day event. Possible?

[A Former User]

@cskenney
That will take 5 minutes to refresh displaying. However, That’s not synced to scanInterval(Those are individual for each other), so, at most 10 minutes could be taken to show modified events in unlucky case.

[A Former User]

@BKeyport

Overwrite these values in your css/custom.css

1. Adjust default size: (If you want to modifying on specific view, choose a proper CSS Selectors)
   https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling

.CX2 { /* default values which are used frequently or dependently */
  --row-min-width: 100px;
  --row-max-width: 1000px;
  --column-min-width: 300px;
  --column-max-width: 400px;
  --font-size: 16px;
}

2. Adjust css animation duration; Or change animation-name to any other improper name.

.CX2.hidden {
  opacity:0;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

.CX2.shown {
  display:block;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

3. That is because just parsing of other calendars is not finished before the first drawing of current loaded events. Just wait, in the next turn remains will be displayed.
   Or set enough time of firstDrawingDelay to wait for all the parsing be completed.
   https://github.com/eouia/MMM-CalendarExt2/wiki/2e.-Configuration:Others

4. Give the className to your targetted events like what you do with icon. Define CSS styles with that className.
   https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling