MMM-CalendarExt2

A Former User

@BKeyport

As you can see in the bottom region, module header will respect the region align itself by default.
Usually, if you want to override the align of module header of a specific module, you can just do like this;

.MMM-CalendarExt2 header.module-header {
  text-align:center;
}

This CalendarExt2 is using a trick of fake-module for each view, so above CSS rule would make module header of all views to text-align:center;

If you want to specify the view in some region, Check this. (See the red titled view on the top right corner)

.region.top.right .MMM-CalendarExt2 header.module-header {
  text-align:left;
  color:#F00;
  font-weight:bold;
}

Be careful about white-space between CSS selectors.

BKeyport

@Sean Odd - I originally had it for both left and right regions (I like centered headers on a display) as

.region.right {
  text-align:center;
}

.region.left {
  text-align:center;
}

and it didn’t work. Now, once I put that back in, it works.

Okay then, Moving on…

Marcel1803

@Sean

Thank you :slightly_smiling_face:
That’s what i was looking for…

I think the “type”-property is missing on your documentation, or I haven’ seen it…
Thank you.

JHermann

Re: MMM-CalendarExt2
Hi,
Need some assistance to identify the reason and possible fix to my issue please, very new to this and a steep learning curve.
I have the calendar working and displaying correctly with other modules but i must leave the Daily view (7 day view) set to Bottom-bar.
When I change the region to any other region the Daily view (7 day view) disapears and will not display in any other region.
I want to move the daily view to the upper-third region to keep all the calendar elements together if possible.
Any guidance will be appreciated, have included the entire code.

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
	address: "localhost", // Address to listen on, can be:
	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	                      // - another specific IPv4/6 to listen on a specific interface
	                      // - "", "0.0.0.0", "::" to listen on any interface
	                      // Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
	                                                       // or add a specific IPv4 of 192.168.1.5 :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "en",
	timeFormat: 12,
	units: "metric",
	// serverOnly:  true/false/"local" ,
			     // local for armv6l processors, default 
			     //   starts serveronly and then starts chrome browser
			     // false, default for all  NON-armv6l devices
			     // true, force serveronly mode, because you want to.. no UI on this device
	
	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module:"MMM-CalendarExtMinimonth",
			position:"top_left",
			defaults:{
				calendars: ["Jaimie","Simona and Jaimie","Birthdays"],
			}
		},
		{
    			module: "MMM-forecast-io",
    			position: "top_right",  // This can be any of the regions
    			config: {
      				// See 'Configuration options' for more information.
      				apiKey: "54c88fa603b438556e08c96636167cd3", // Dark Sky API key.
				showWind: true,
      				showSunrise: true,
      				showSummary: true,
      				showPrecipitationGraph: true,
				precipitationGraphWidth: 400,
				precipitationGraphHeight: 400,
      				showForecast: true,
    				latitude: -27.437647,
      				longitude: 151.940703
    			}
		},
		{
			module: "MMM-APOD",
			position: "bottom_center",
			config: {
				appid: "L3A4DMGtMRahyV6Ulqh6BWdQm6I5WNPZhcZuzido", // NASA API key (api.nasa.gov)
				updateInterval: 1000000,
			}
		},
		{
			module: 'MMM-CalendarExt2',
			config: {
				calendars: [
			{
				name: "Jaimie",
				url: "https://calendar.google.com/calendar/ical/////////////////////////////////////////////////",
			},
			{
				name: "Simona and Jaimie",
				url: "https://calendar.google.com/calendar/ical//////////////////////////////////////////////////////////////",
			},
			{
				name: "Birthdays",
				icon: "emojione-monotone:birthday-cake",
				url: "https://calendar.google.com/calendar/htmlembed?src/////////////////////////////////////////////",
			},
		],
				views: [
			{
				name: "Upcoming Events",
				title: "Upcoming Events",
				mode: "upcoming",
				position: "top_left",
				maxItems: 5,
				maxDays: 7,
				locale: "en",
				hideOverflow: false,
				filterPassedEvent: true,
				dateTimeFormat:"M/D h:mm A",
				calendars: ["Jaimie","Simona and Jaimie","Birthdays"],
			},
			{
				name: "Calendars",
				title: "All Calendars",
				mode: "daily",
				type: "row",
				position: "bottom_bar",
				slotCount: 5,
				locale: "en",
				hideOverflow: false,
				filterPassedEvent: true,
				dateTimeFormat:"M/D h:mm A",
				calendars: ["Jaimie","Simona and Jaimie","Birthdays"],
			},
		],
				scenes: [
			{
				name: "DEFAULT",
				views: [],
			},
		],
	},
},
			{
    			module: "MMM-quote-of-the-day",
    			position: "bottom_bar",
    			config: {
        			language: "en",
        			updateInterval: "1h"
				}
		},
	]

};

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

A Former User

@JHermann
If possible, can you send me configuration with real ical url? eouia0819@gmail.com

JHermann

This post is deleted!

BKeyport

@JHermann Bit of testing here - I took your config, modified it for my URLs rather than your stub urls, removed my custom.css and found an interesting layout.

I’m using a 1920x1080 monitor.

In landscape mode (wide monitor) - the daily view is interfering with the upcoming view in either position.
in portrait mode (Tall monitor) - the daily view does show for me in upper_third, but clashes with upcoming view. If daily view is in bottom_bar, it shows clean, but upcoming and parts of Minical and your weather app is hidden behind the NOAA picture.

I suspect what’s happening is the NOAA picture is covering up your view in the config that you have.

Do you have custom.css in place at all?
Have you tried commenting out the NOAA picture and seeing if it works in upper-third then?

– B

Edit: while @Sean likes to test with the normal URLs, I figure if they’re showing in one position, they should show with all of them, unless there’s something else wrong - some of my URLs are still google.

JHermann

@BKeyport Hi Mate, I have res set to 1920x1080 and am using portrait mode via screen layout editor and choosing orientation of right.
Am using a LED TV as the display, I have been emailing Sean and he has the same thoughts that other modules are interfering and he could can get daily view to display in other regions with only the calendar Ext2 module.
custom.css has only the below in it to reduce margins:

body {
margin: 20px;
position: absolute;
height: calc(100% - 40px);
width: calc(100% - 40px);
}
I have deleted all other modules from the Config file and still cant display the daily view in other regions at all…weird.
There must be something I am doing wrong but as as I am inexperienced I am struggling.
The new Config is below and have emailed Sean a screenshot (havent been able to upload a picture to this forum) and this config as well:
Any assistance is appreciated.

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
	address: "localhost", // Address to listen on, can be:
	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	                      // - another specific IPv4/6 to listen on a specific interface
	                      // - "", "0.0.0.0", "::" to listen on any interface
	                      // Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
	                                                       // or add a specific IPv4 of 192.168.1.5 :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "en",
	timeFormat: 12,
	units: "metric",
	// serverOnly:  true/false/"local" ,
			     // local for armv6l processors, default 
			     //   starts serveronly and then starts chrome browser
			     // false, default for all  NON-armv6l devices
			     // true, force serveronly mode, because you want to.. no UI on this device
	
	modules: [
		{
			module: 'MMM-CalendarExt2',
			config: {
				calendars: [
			{
				name: "Jaimie",
				url: "https://calendar.google.com/calendar/ical///////////////////",
			},
			{
				name: "Simona and Jaimie",
				url: "https://calendar.google.com/calendar/ical///////////////////////////",
			},
			{
				name: "Birthdays",
				icon: "emojione-monotone:birthday-cake",
				url: "https://calendar.google.com/calendar/htmlembed?src=///////////////////////////////",
			},
		],
				views: [
			{
				name: "Upcoming Events",
				title: "Upcoming Events",
				mode: "upcoming",
				position: "top_left",
				maxItems: 5,
				maxDays: 7,
				locale: "en",
				hideOverflow: false,
				filterPassedEvent: true,
				dateTimeFormat:"M/D h:mm A",
				calendars: ["Jaimie","Simona and Jaimie","Birthdays"],
			},
			{`
				name: "Calendars",
				title: "All Calendars",
				mode: "daily",
				type: "row",
				position: "top- right",
				slotCount: 4,
				locale: "en",
				hideOverflow: false,
				filterPassedEvent: true,
				dateTimeFormat:"M/D h:mm A",
				calendars: ["Jaimie","Simona and Jaimie","Birthdays"],
			},
		],
				scenes: [
			{
				name: "DEFAULT",
				views: [],
			},
		],
	},
},
	]

};

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

A Former User

@JHermann
Have you done something on css/custom.css or main.css or any other css file?

JHermann

@Sean Only the Custom.css per below to reduce margins. No other changes to any ,css file as far as i recolect.

body {
margin: 20px;
position: absolute;
height: calc(100% - 40px);
width: calc(100% - 40px);
}

Maybe i should uninstall and start over?

A Former User

@JHermann
Well , this kind of problem is not related to installation. Reinstall might solve the issue, but we don’t know why and how. And there is still possibility of not-solving.

The most common pitfall might be mistyping.

position: "top- right",

This is not a proper symbol of top_right region.

JHermann

@Sean Good point, that was a definite typo.

Hram2008

Multiple Icon in upcoming View

Please confirm how I can add more then one Icon in the upcoming view, I used the Transform event in "Views"but I can only get one icon to show…

A Former User

@Hram2008
Not possible. Why do you need? By the case, I could consider that feature, but normally, why is it needed?
You can transform the title to use emoji instead icon.

Hram2008

@Sean
Sorry, I am not not able attach an image. What i am trying to do is is the Transform event with specific text to add an emoji to the upcoming view… i.e Calendar event with “Birthday” in name would add a Birthday cake emoji to the event… I want to do this for other text… " Christmas" = x-mas Tree emoji…where other text would display other emoji…

A Former User

@Hram2008
First, I’m not sure emoji could be displayable on Electron(Chromium) of Raspbian without any additional things(font?). I have no RPI at this moment, so can’t test.
But I believe it could, And at least, on my other SBCs, it works.

Frankly says, How to transform exists already in the wiki of github repository, Anyway, I’ll show it again with another sample.

Before

Add transform into your target View. (Or you can apply it globally by defaultSet

transform: (event) => {
  event.title = event.title.replace(/FC/g, "⚽")
  event.title = event.title.replace(" - ", " VS. ")
  event.title = event.title.replace("(T.B.A.)", "")
  event.title = event.title.replace("Bayern München", `< img src='https://logodix.com/logo/337534.jpg' height='20px' width='100px' >`)
  return event
}

Then It will show like this;
After

Hram2008

@Sean
Thank you for taking the time to respond, not quite what i was looking to do but it did point me in the right direction.

CharlesDS

Are they known issues on raspberry pi 2? I’m working on configs without success. Black screen, nothing, but other modules, appears.
Thanks

A Former User

@CharlesDS
Without log I cannot tell anything. More detailed info be needed. And Of course, on RPI2, it works.

Zinkeler

Hello,
everything works fine in landscape-mode. If i change to portrait-mode (display_rotate=1
avoid_warnings=1 in /boot/config.txt) my calender is not shown. All other modules are on my mirror.
Can someone give me a hint?
thx
Ralph