MMM-MyCalendar

[Hotstepper]

This post is deleted!

[Hotstepper]

@rrrene said in MMM-MyCalendar:

Hello,

first of all thanks for the great looking module.
Unfortunately I don‘t get it up on my side…

It doesnt‘t show anything no matter if I load your example ics or my iCloud calendar Url (is this supposed to work?)

Hi,

I have had the same issue and have searched the error for a while…
My fault was, that the entry in the “MMM-Carousel”-Module in the slides-Section was missing.
So the Module wasn’t showing.

		module: 'MMM-Carousel',
        		
                		slides: [
                    				['MMM-MyCalendar',.....],
                			],

Best regards

Lutz

[fabbr]

I can’t find out why the left panel is stretched so much. when I turn this module off it goes back to normal. Any ideas?

Here’s my code:

		{
		module: "MMM-MyCalendar",
		position: "top_left",	// This can be any of the regions. Best results in left or right regions.
		config: {
				colored: true,
				maxTitleLength: 10,
				maximumEntries: 5,
				fade: true,
				calendars: [
					{
						url: 'webcal://mycalendar',
						symbol: 'calendar',
						color: "#6666ff"
					},
					{
						url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics",
						color: "#ffffcc"

					},
							],
				}
		},

[ninjabreadman]

@fabbr There is nothing (iirc) that really constrains the MM regions … they expand to fit their content. Moreover, I think some modules aren’t written with a landscape orientation in mind. I suggest you try the following in your custom.css:

.module.MMM-MyCalendar {
min-width: 200px; /* adjust number as necessary */
}

Alternatively, you can try instead using:

.region.top.left {
max-width: 30%;
}

[fabbr]

@ninjabreadman Thank, that didn’t work however, I found the file MMM-MyCalendar.css and there I changed this and got my problem solved, thank you !!!

.MMM-MyCalendar {
  max-width: 250px;  //original was 500
}

[j.e.f.f]

@fabbr you’re better off putting this change in custom.css. If you update the module down the road, the change you made will be overwritten.

A better solution here is to revert your change and set a width for the container, like as follows:

region.left,
region.left .module-content {
  width: 250px;
  max-width: 250px;
  min-width: 250px;
}

This will size the entire left column to 250px, including anything you put in top_left, bottom_left, etc. If you want to limit it to just top_left replace region.left with region.top.left.

[fabbr]

@j.e.f.f I agree with you, however for some reason I can’t make that work. Did those changes worked on your custom.css? if yes, would you mind sharing your code with me? I might be doing something wrong.

Thanks

[j.e.f.f]

@fabbr Try also setting a maximum width for MMM-MyCalendar in your custom.css file as well. Here is exactly what I have in my custom.css file:

.region.left,
.region.left .module-content {
  width: 555px;
  max-width: 555px;
  min-width: 555px;  
}

.MMM-MyCalendar {
  max-width: 555px;
}

Adjust 555px to whatever you like.

[fabbr]

@j.e.f.f Very strange mine is completely ignoring the CSS. No change is made on the screen. Here’s my CSS:

 body {
  		 .region.left,
		.region.left .module-content {
 			  width: 555px;
			  max-width: 555px;
			  min-width: 555px;  
		}

		.MMM-MyCalendar {
			  max-width: 555px;
		}
 }

 

[ninjabreadman]

@fabbr You can’t nest the braces in CSS. Just take out the body { and last } entirely.