MMM-CalendarExt2

[BKeyport]

@steverichab I’d name the calendar. The example is thus:

{
    name: "US holiday",
    className: "holiday", // This allows you to modify it in css
    url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
  },

Compare to a working config:

		{
			module: "MMM-Block",
			position: "top_right",
		},
		{
			module: "MMM-CalendarExt2",
			config: {
				calendars : [
					{
						url: "[private]",
						name: "Main Calendar", // Optional, Recommended
						maxItems: 99,
						scanInterval: 1000*60*1, // every minute, Appt Book, needs this speed
						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,
						beforeDays: 0,
						afterDays: 999,
						maxIterations: 999,
						forceLocalTZ: false,
					},
				],
				views: [
					{
						mode: "daily",
						position: "top_right",
						slotCount: 99,
						timeFormat:"h:mm A",
						hideOverflow: false,
						filterPassedEvent: true,
						name: "Daily View",
						className: "remove_empty_slot",
						calendars: ["Main Calendar","Seahawks Calendar"],
						transform: function(event) {
							if (event.title.search("Recycle") > -1) {
								event.icon = "mdi:recycle";
								event.className = "lemay";
							}
							if (event.title.search("Yard Waste") > -1) {
								event.icon = "entypo-leaf";
								event.className = "lemay";
							}
							if (event.title.search("Seahawks") > -1) {
								event.icon = "fa-solid:football-ball";
								event.className = "seahawks";
							}
							return event;
						},
					},
				],
				scenes: [
					{
						name: "DEFAULT",
					},
				],
			},
		},

[rmcelwee]

My calendar flashes every 60 seconds but as far as I can tell, I have all my calendars updating every 180 seconds.

					{
			  module: 'MMM-CalendarExt2',
			  config: {
			   
				calendars : [
				  
				  {
				    className: "vacation",
					scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },
				  {
				    className: "nights",
				    scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },
				  {
				    className: "days",
				    scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },
				  {
				    className: "bob",
				    scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },
				  {
				    className: "bunny",
				    scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },
				{
				    className: "special",
				    scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },				    
						],
				views: [
				  {
					name: "view1",
					mode: "week",
					slotCount: 8,
					maxItems: "1000",
					hideOverflow: "false",
					//slotMaxHeight: "64px",
					slotMaxHeight: "105px",
					monthFormat: "MMMM YYYY",
					position: "bottom_bar",
					updateInterval: "1000*180",
					calendars: []
					
					 
				  },
				],
				scenes: [
				  {
					name: "DEFAULT",
				  },
				],
			  },
			},

[rmcelwee]

I would like to center the text on my events (or whatever they are called - the yellow, green, white, etc lines). I’ve tried a few things but it has not worked for me. My calendar position is “bottom_bar”.

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:56px;
  }
.module.currentweather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:22px;
  }
.module.weatherforecast {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  height: 200;
  }/*
 .MMM-GooglePhotos {
  margin-top: -300px;
  margin-left: -123;
    }*/
    #GPHOTO_INFO {
	display:none;
}
  #GPHOTO_BACK {
	display:none;
}
.module.MMM-CalendarExt2 {
  background-color:rgba(255,255,255,0.5);
  height: 870px;
    }
.CX2 .weeksmark {
display:none;
}
.CX2 .vacation.fullday {
background-color:#00FF00;
color:#000;
}
.CX2 .nights.fullday {
background-color:#009DFF;
color:#000;
}
.CX2 .special.fullday {
background-color:#FF0000;
color:#000;
}
.CX2 .days.fullday {
background-color:#FFFF00;
color:#000;
}
/*.region.bottom_bar {
  text-align: center;
  }
.CX2 .days.eventTitle {
text-align:center;
}*/
  .module.MMM-EventHorizon {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  }/*
body {
  position: absolute;
  margin: 2;
  height: 100%;
  width: 99%;
}*/
.region.top.left {
  position: absolute;
  top: -52px;
  left: 0px;
  bottom: -2px;
  width: 270px;
  }
.region.middle.center {
  width: 100%;
  left: -15px;
  top: 640px;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

[BKeyport]

@rmcelwee

.CX2 .[view_mode] .eventTitle {
  text-align:center;
}

eg:

 .CX2 .daily .eventTitle {
  text-align:center;
}

[rmcelwee]

@BKeyport said in MMM-CalendarExt2:

 .CX2 .daily .eventTitle {
  text-align:center;
}

This is not working for me for some reason???

.CX2 .week .eventTitle {
text-align:center;
}

[BKeyport]

@rmcelwee Looks like that’s the only one that isn’t assigned a class for CSS, I can’t find anything in the defaults that’ll do what you want.

Sorry.

[DJ6sTep]

I’m a noob to this MM/java stuff, so please be patience with me. I just need help with a few things:

• How do I move the position of my calendar so it’s above my WIFI-PASSWORD module?
• How do I remove the weekly count on the left side of the calendar (ie- 1st week, 2nd week, etc)?
• Is there any way I could make the calendar size smaller? So it doesn’t take up the whole screen?
• Why did the calendar move my garbage & recycling icons to the far right, covering the temperature?

Really appreciate the help & this module is so sick!!

[BKeyport]

@DJ6sTep said in MMM-CalendarExt2:

• How do I move the position of my calendar so it’s above my WIFI-PASSWORD module?

normally, the order of things coming up is determined by the order in config.js - however, in this case, the module is using a fake container, so it’ll load AFTER everything else. It’s best to use it’s own region for it.

see: https://forum.magicmirror.builders/topic/286/regions?_=1610316572966

• How do I remove the weekly count on the left side of the calendar (ie- 1st week, 2nd week, etc)?

Take a look at https://github.com/MMM-CalendarExt2/MMM-CalendarExt2/blob/master/docs/Configuration/Views/week%2C-month.md

in particular weeksFormat

• Is there any way I could make the calendar size smaller? So it doesn’t take up the whole screen?

Yep. Change your view and/or region.

• Why did the calendar move my garbage & recycling icons to the far right?

The calendar wedges itself into a region, and expands the region to fit. the icons must be right justified.

Be aware that the author of the module has left the project, and nobody has picked it up, so we’re just helping from what we know.

Good luck.

[DJ6sTep]

@BKeyport I was able to get my calendar in the position I want now. Thanks so much for all the great info man.

Still having these issues:

• What parameter do I use for weeksFormat? I tried using false & disabled & it still didn’t remove the weekly count on the left. I couldn’t find any of the parameter options in the link you posted.
• I’m having issues finding info on how to resize my calendar & how to resize the font size of events inside a date.

I really appreciate the support & your quick response to my questions man.

[BKeyport]

@DJ6sTep

@DJ6sTep said in MMM-CalendarExt2:

@BKeyport I was able to get my calendar in the position I want now. Thanks so much for all the great info man.

Still having these issues:

• What parameter do I use for weeksFormat? I tried using false & disabled & it still didn’t remove the weekly count on the left. I couldn’t find any of the parameter options in the link you posted.

Try

weeksFormat: "",

in the view section of your config. Effectively, that tells it to display nothing.

• I’m having issues finding info on how to resize my calendar & how to resize the font size of events inside a date.

That sounds like css, and honestly, even though I’ve written a module, I’m lost when it comes to css, someone else should see this and help, hopefully.

[rmcelwee]

@rmcelwee said in MMM-CalendarExt2:

My calendar flashes every 60 seconds but as far as I can tell, I have all my calendars updating every 180 seconds.

					{
			  module: 'MMM-CalendarExt2',
			  config: {
			   
				calendars : [
				  
				  {
				    className: "vacation",
					scanInterval: "1000*180",
					url: "https://calendar.google.com/calendar/ical/...",
				  },

I forgot to post what fixed this for me. I added (without quotes):

" updateInterval: 1000*600, "

in between config: { and calendars : [ at the top. scanInterval does something completely different but I don’t know what. Now my calendar only updates every 10 minutes. Hopefully this will help someone. Thanks!

[rmcelwee]

@DJ6sTep said in MMM-CalendarExt2:

Still having these issues:

• What parameter do I use for weeksFormat? I tried using false & disabled & it still didn’t remove the weekly count on the left.

I am still learning this but I put this in my custom.css to get rid of the week count:

.CX2 .weeksmark {
display:none;
}

[rmcelwee]

@DJ6sTep said in MMM-CalendarExt2:

• Is there any way I could make the calendar size smaller? So it doesn’t take up the whole screen?

I had a ton of trouble with the sizing on my modules and basically fixed them via trial and error. Go to your config.js and add this to your views config (play with your px number and you will see):

slotMaxHeight: “105px”,

I think I also messed with this as well (in the same section):

slotCount: 8,

Good luck! Glad to see another newbie in here. Makes me feel a little better with the two month struggle I went through to get my mirror looking right!

[DJ6sTep]

@rmcelwee said in MMM-CalendarExt2:

slotCount: 8,

Appreciate the tips man, adding that weekformat line in the custom.css file did the trick.

Sorry man, I have a few more questions if you know :)

• How do I change the font size & the size of that background color that’s behind all my events? I find the default font size is too big. And I could probably fit more event slots in each day, if it was smaller font.

• How to update the calendar so it just shows the days of that month? Instead of it showing the previous days of the month before, because it’s on the last week as the new month. Same with it showing the days of the next month in the last week of the current month. Hopefully that makes sense. lol

Thanks for all the encouragement man & us newbies gotta help each other out. I’m on week 4 of this & I’m starting to see the finish line :)

[DJ6sTep]

I almost have my calendar how I want it to be, how would I move my calendar just a few inches down from it’s current position? Closer to my WIFI password module.

I’ve attached a pic of what I’m talking about & highlighted in RED the empty space I want to lower my calendar to.

Do I have to exit the custom.css with something like this? I could be way off on this one. lol.
.cx2 {
width: 800px;
}

[rmcelwee]

@DJ6sTep said in MMM-CalendarExt2:

I almost have my calendar how I want it to be, how would I move my calendar just a few inches down from it’s current position? Closer to my WIFI password module.

I did this in the custom.css to move my photos around (note the negative numbers):

.MMM-GooglePhotos {
margin-top: -300px;
margin-left: -123;
}*/
#GPHOTO_INFO {
display:none;
}

[DJ6sTep]

@rmcelwee That worked & it moved my calendar down, where I wanted it to be. Thanks so much for the pro tip man!

[rmcelwee]

@DJ6sTep It took me DAYS of trial and error to get everything where I wanted it. I still have a weird problem where my weather forecast window changes size from time to time. Not sure why. I don’t have a picture of it but my upper left window will shrink and leave a thick black line between the picture and the weather.

[DJ6sTep]

@rmcelwee I had that problem when I used MMM-JAST module (stock ticker) & it made my current weather module disappear. I ended up contacting the developer of that module & he made updates to it to resolve my issue. It could be the wallpaper module you’re using. Which wallpaper module are you using? I’m using MMM-Wallpaper & I’m having issues of it displaying my pictures in the correct orientation. I’ve contacted the developer on that one as well. So I might try the same wallpaper module you’re using.

BTW- Your MM looks dope man!

[DJ6sTep]

@rmcelwee I can’t change the background of my events. Say I want to have all my “bday events” a certain color. I tried to add that to my custom.css, I’ve tried the following:

.CX2 .bday, .bday.event.fullday {
background-color: #00FFFF;
}

.CX2 .bday {
background-color: #00FFFF;
}

Nothing works :( What am I missing?