MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-CalendarExt3

    Scheduled Pinned Locked Moved Utilities
    689 Posts 82 Posters 2.9m Views 86 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 1 Offline
      1lolo94 @sdetweil
      last edited by

      @sdetweil YOU ARE AMAZING!

      a0114972-119e-4543-a869-d30d3ed70156-image.png

      Last two questions and I will leave you alone :)

      1. what settings do i need to change to get the calendar to fit the entire bottom of the screen? Is that possible?

      2. How can I add a background to this - but have the calendar, weather, etc in front of it? I have seen some others have nature, clouds, etc.

      Thanks again!

      S 1 3 Replies Last reply Reply Quote 0
      • S Do not disturb
        sdetweil @1lolo94
        last edited by

        @1lolo94 background

        use one of the modules that displays what you like and use position fullscreen_below, 3d, below is furthest away from the viewer , above is closest to the viewer and default is between them

        calendar full width. I don’t know, mm sets margin, all the way around so content is NOT jammed against the edge…

        see css/main.css at the top, 60px as I recall

        you can override that in custom.css

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Do not disturb
          sdetweil @1lolo94
          last edited by

          @1lolo94 said in MMM-CalendarExt3:

          and I will leave you alone

          I am here every day. am moderator
          ask away.
          others smarter than me will jump in too

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 Offline
            1lolo94 @1lolo94
            last edited by

            @sdetweil I was able to get the module - MMM-Wallpaper installed and working great - but depending on the picture, i cannot see the the calendar, events, days, etc. I’m assuming that is in the custom cc settings?

            S 1 Reply Last reply Reply Quote 0
            • S Do not disturb
              sdetweil @1lolo94
              last edited by

              @1lolo94 no cool thing there. some background images will conflict w the foreground…

              I want dynamic opposite, but… no such thing

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • B Offline
                bobbylx
                last edited by

                Hello all, just have a couple fine tuning questions for you. Both seem easy but I can’t seem to figure out why it’s not working. FWIW my MM has been running great for months now, finally doing some tweaking.

                So I’ve got MMM-Calendarext3 setup to only show 1 calendar, it’s my family google account. The last 2 things I would like to accomplish are having the text for long events scroll with useMarquee: true and then also to have the eventTransformer search for a name in the event title and change the color according to that.

                For some reason, I can’t get either of these to work. Config.js below. If I understand correctly, I shouldn’t need to add anything to custom.css correct? With the config file below, my calendar does not load at all, just get blank screen stating please create a config file, if I hash out the transformer stuff then it loads but never scrolls (marquee). Any advice from ya’ll smart folks?

                {
                                               module: "MMM-CalendarExt3",
                                               position: "bottom_bar",
                                               title: "",
                                               config: {
                                                 mode: "",
                                                 weekIndex: 0,
                                                 weeksInView: 5,
                                                 instanceId: "basicCalendar",
                                                 locale: 'en-EN',
                                                 maxEventLines: 5,
                                                 fontSize: '26px',
                                                 firstDayOfWeek: 0,
                                                 refreshInterval: 120000,
                                                 animationSpeed: 0,
                                                 useMarquee: true,
                                                 useSymbol: false,
                                                 useWeather: true,
                                                 displayWeatherTemp: true,
                                                 calendarSet: ['us_holiday','family'],
                                               weatherPayload: (payload) => {
                         if (Array.isArray(payload?.forecastArray)) {
                           payload.forecastArray = payload.forecastArray.map((f) => {
                             f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
                             f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
                             return f
                           })
                         }
                         return payload
                       }
                                       eventTransformer: (ev) => {
                                        if (ev.title.search('Allie') > -1) ev.color = 'blue'
                                        return ev
                                       }
                                       }
                                       },
                       
                
                
                H M 2 Replies Last reply Reply Quote 0
                • H Offline
                  hrmax @bobbylx
                  last edited by

                  @bobbylx It could be because you aren’t settings the mode to week or month? It seems that the default is week but that would require that you omit the tag altogether rather than explicitly setting it to an empty string.

                  B 1 Reply Last reply Reply Quote 0
                  • M Offline
                    MMRIZE @bobbylx
                    last edited by

                    @bobbylx said in MMM-CalendarExt3:

                         }
                         return payload
                       } // <== HERE
                                       eventTransformer: (ev) => {
                                        if (ev.title.search('Allie') > -1) ev.color = 'blue'
                                        return ev
                                       }
                    

                    You’ve missed comma(,) in the end of weatherPayload definition.

                    1 Reply Last reply Reply Quote 0
                    • B Offline
                      bobbylx @hrmax
                      last edited by

                      @hrmax said in MMM-CalendarExt3:

                      @bobbylx It could be because you aren’t settings the mode to week or month? It seems that the default is week but that would require that you omit the tag altogether rather than explicitly setting it to an empty string.

                      I have it with no mode and a 5 week rolling view, so the current week is always at the top. I did change it back to month for testing but made no difference.

                      @MMRIZE said in MMM-CalendarExt3:

                      @bobbylx said in MMM-CalendarExt3:

                           }
                           return payload
                         } // <== HERE
                                         eventTransformer: (ev) => {
                                          if (ev.title.search('Allie') > -1) ev.color = 'blue'
                                          return ev
                                         }
                      

                      You’ve missed comma(,) in the end of weatherPayload definition.

                      Awesome, thank you! That did it.

                      Last one, using the Marquee for long calendar events. Is there anything else I need to do to make that work? See my config.js above, I added useMarquee: ‘true’ but it changed nothing. I assume I’m missing something simple again.

                      1 Reply Last reply Reply Quote 0
                      • L Offline
                        Lilleberg
                        last edited by

                        I have an issue trying to show events from Googles shared family calendar. I have several Google calendars that shows perfectly in the CalendarExt3 module. But to show events from the shared family calendar has been quite an issue.
                        I found out that I had to install the MMM-GoogleCalendar. In this module I manage to show the events from the shared calendar. But they won´t show up in the CalendarExt3 module.

                        I found this code (https://github.com/MMRIZE/MMM-CalendarExt3/wiki/Compatible-with-randomBrainstormer-MMM-GoogleCalendar) that should resolve it, but when i paste this code at the end of the config of the CalendarExt3 module. No events show up. Even the events that allready shows from the other Google Calendars.

                        I have the default calendar module to fetch the events from all of my Google Calendars, and the the GoogleCalendar module to fetch the shared calendar. I tried removing the default calendar module from the config file, and with just one calendar in the GoogleCalendar module. But no result.

                        It shows just fine in the GoogleCalendar module, so it seems to be a problem to convert the events from the GoogleCalendar module to the CalendarExt3 module.

                        S M 2 Replies Last reply Reply Quote 0
                        • S Do not disturb
                          sdetweil @Lilleberg
                          last edited by sdetweil

                          @Lilleberg ext3 gets it’s events from another calendar module. either the default calendar or another.

                          so if you use MMM-GoogleCalendar then it has the calendar url.

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          L 1 Reply Last reply Reply Quote 0
                          • L Offline
                            Lilleberg @sdetweil
                            last edited by

                            @sdetweil Not sure if I understod you here. What do you mean with the last sentence?

                            S 1 Reply Last reply Reply Quote 0
                            • S Do not disturb
                              sdetweil @Lilleberg
                              last edited by

                              @Lilleberg typo, calendar url

                              Sam

                              How to add modules

                              learning how to use browser developers window for css changes

                              1 Reply Last reply Reply Quote 0
                              • M Offline
                                MMRIZE @Lilleberg
                                last edited by

                                @Lilleberg Show us your config.

                                L 1 Reply Last reply Reply Quote 0
                                • L Offline
                                  Lilleberg @MMRIZE
                                  last edited by

                                  Here is my config- I have replaced the calendar urls under as I dont want to show them to the world.

                                  modules: [
                                  		{
                                  			module: 'MMM-Remote-Control',
                                  			// uncomment the following line to show the URL of the remote control on the mirror
                                  			// position: 'bottom_left',
                                  			// you can hide this module afterwards from the remote control itself
                                  			config: {
                                              apiKey: 'c92e9765778gh56h83f66fffd333c6a5'
                                  			}
                                  		},
                                  		{
                                  			module: "alert",
                                  		},
                                  		{
                                  			module: 'MMM-YrThen',
                                  			position: 'top_left',
                                  			config: {
                                  				location: '1-107159',
                                  				showAll: "false",
                                  				details: "false",
                                  				title: "Været på Frekhaug neste uke",
                                  				header: "true",
                                  				size: "medium",
                                  				windGust: "true",
                                  				windUnit: "m/s",
                                  			}
                                  		},
                                  		{
                                  			module: "clock",
                                  			position: "top_right",
                                  			config: {
                                  			dateFormat: "dddd, D. MMMM YYYY",
                                  			showSunTimes: "true",
                                  			lat: "60.520806",
                                  			lon: "5.237736",
                                  			},
                                  		},
                                  		{
                                  			module: 'MMM-YrNow',
                                  			position: 'top_right',
                                  			config: {
                                  				locationId: '1-107159',
                                  				showWeatherForecast: true
                                  			}
                                  		},
                                  		{
                                  			module: "calendar",
                                  			position: "top_left",
                                  			hiddenOnStartup: "true",
                                  			config: {
                                  				broadcastPastEvents: true, // <= IMPORTANT to see past events
                                  				calendars: [
                                  					{
                                  						symbol: "none",
                                  						url: "Google Calendar url",
                                  						color: "#8BD3E6", //Blå
                                  						name: "Øyvind",
                                  					},
                                  					{
                                  						symbol: "none",
                                  						url: "Google Calendar url",
                                  						color: "#800080", //Lilla
                                  						name: "Solvor",
                                  					},
                                  					{
                                  						symbol: "none",
                                  						url: "Google Calendar url",
                                  						color: "#FF6D6A", //Rød
                                  						name: "Håkon",
                                  					},
                                  					{
                                  						symbol: "none",
                                  						url: "hGoogle Calendar url",
                                  						color: "#E9EC6B", //Gul
                                  						name: "Marius",
                                  					},
                                  					{
                                  						symbol: "none",
                                  						url: "Google Calendar url",
                                  						color: "#77DD77", //Grønn
                                  						name: "Sverre",
                                  					},
                                  					{
                                  						symbol: "none",
                                  						url: "Google Calendar url",
                                  						color: "#fffff", //Hvit
                                  						name: "Helligdager",
                                  					},
                                  					
                                  				]
                                  			},
                                  		},
                                  		{
                                  			module: 'MMM-GoogleCalendar',
                                  			position: "top_left",
                                  			hiddenOnStartup: "true",
                                  			config: {
                                  				calendars: [
                                  					{
                                  					symbol: "none",
                                  					calendarID: "Google Calendar id"
                                  					color: "#000000", //Svart
                                  					name: "Familie",
                                  					},
                                  					],
                                  			}
                                  		},	
                                  		{
                                  			module: "MMM-CalendarExt3",
                                  			position: "bottom_bar",
                                  			title: "",
                                  			config: {
                                  				mode: "week",
                                  				weekIndex: "0",
                                  				weeksInView: "4",
                                  				instanceId: "basicCalendar",
                                  				locale: 'nb',
                                  				maxEventLines: 10,
                                  				firstDayOfWeek: 1,
                                  				calendarSet: [],
                                  				eventHeight: "22px",
                                  				displayLegend: "true",
                                  				eventTransformer: (e) => {
                                  					e.startDate = new Date(e.start?.date || e.start?.dateTime).valueOf()
                                  					e.endDate = new Date(e.end?.date || e.end?.dateTime).valueOf()
                                  					e.title = e.summary
                                  					e.fulldayEvent = (e.start?.date) ? true : false
                                  					return e
                                  					}
                                  			}
                                  		},
                                  		 
                                  
                                  	]
                                  
                                  M 1 Reply Last reply Reply Quote 1
                                  • M Offline
                                    MMRIZE @Lilleberg
                                    last edited by

                                    @Lilleberg
                                    Check broadcastEvents:true in your MMM-GoogleCalendar’s config. Unlike the original calendar module, MMM-GoogleCalendar has this value as false by default.

                                    L 1 Reply Last reply Reply Quote 0
                                    • L Offline
                                      Lilleberg @MMRIZE
                                      last edited by

                                      @MMRIZE Tried adding this to the config, but still no result. The module broadcasts the events, but they wont show in the Ext3 module. Se attached image. I have removed the other calendars from the config, and only show the events from the Google Calendar module.20240312_183109.jpg

                                      M 1 Reply Last reply Reply Quote 0
                                      • M Offline
                                        MMRIZE @Lilleberg
                                        last edited by MMRIZE

                                        @Lilleberg If possible, can you share the copy of your calendar? (And the final config file also) (eouia0819@gmail.com)
                                        Without the real data I couldn’t catch what really happened in yours.

                                        L N 2 Replies Last reply Reply Quote 0
                                        • L Offline
                                          Lilleberg @MMRIZE
                                          last edited by

                                          @MMRIZE I’m sending you an e-mail

                                          1 Reply Last reply Reply Quote 0
                                          • N Offline
                                            nicmoly @MMRIZE
                                            last edited by

                                            @MMRIZE Hi Im also having the exact same issue as @Lilleberg , I have however seen glimpses of this working as intended but it seems to be on a whim, either it restarts and works and then not again untill a further reboot or it just wont. I find it weird that using MMM-CalendarExt3Journal works perfect every time with similar settings. Any ideas on what may be going on? Weird thing is leaving the MMM running all the sudden it works like 20-30min later, so im wondering if theres some weirdness with how the data comes in from the GoogleCalendar module
                                            Heres my config for refrence:

                                            {
                                                		module: 'MMM-GoogleCalendar',
                                               			header: "My Google Private Cal",
                                              			position: "upper_third",
                                            			hiddenOnStartup: true,
                                             			config: {
                                            				broadcastEvents: true,
                                            				broadcastPastEvents: true,
                                            				calendars: [
                                            						{
                                            							symbol: "calendar-week",
                                            							calendarID: "***",
                                            							name: "1_cal", // <= RECOMMENDED to assign name
                                            							color: "yellow" // <= RECOMMENDED to assign color
                                            						},
                                            						{
                                            							symbol: "calendar-week",
                                            							calendarID: "***",
                                            							name: "2_cal", // <= RECOMMENDED to assign name
                                            							color: "red" // <= RECOMMENDED to assign color
                                            						},
                                            						{
                                            							symbol: "calendar-week",
                                            							calendarID: "en.canadian#holiday@group.v.calendar.google.com",
                                            							name: "holiday_cal", // <= RECOMMENDED to assign name
                                            							color: "green" // <= RECOMMENDED to assign color
                                            						},
                                            						
                                            				],
                                            			}
                                            		},
                                            		{
                                              			module: "MMM-CalendarExt3",
                                              			position: "lower_third",
                                            			title: "Family Calendar",
                                              			config: {
                                            				mode: "month",
                                            				instanceID: "I-calendar-month",
                                            				maxEventLines: 5,
                                            				firstDayOfWeek: 1,
                                            				preProcessor: (e) => {
                                            					if (e.start?.dateTime) {
                                            				  		e.startDate = new Date(e.start.dateTime).valueOf()
                                            					} else if (e.start?.date) {
                                            				  		e.startDate = new Date(`${e.start.date}T00:00:00`).valueOf()
                                            					}
                                            
                                            					if (e.end?.dateTime) {
                                            				  		e.endDate = new Date(e.end.dateTime).valueOf()
                                            					} else if (e.end?.date) {
                                            				  		e.endDate = new Date(`${e.end.date}T00:00:00`).valueOf()
                                            					}
                                            
                                            					e.title = e.summary
                                            					e.fullDayEvent = (e.start?.date) ? true : false
                                            					return e
                                            				},
                                              			}
                                            		},
                                            //		{
                                            //  			module: "MMM-CalendarExt3Journal",
                                            //  			position: "bottom_bar",
                                            //  			config: {
                                            //				height: '50vh',
                                            //   			 	width: '100%',
                                            //				//locale: 'en-GB',
                                            //				staticWeek: true,
                                            //				staticTime: true,
                                            //				hourLength: 14,
                                            //				beginHour:  8,
                                            //				preProcessor: (e) => {
                                            //					if (e.start?.dateTime) {
                                            //				  		e.startDate = new Date(e.start.dateTime).valueOf()
                                            //					} else if (e.start?.date) {
                                            //				  		e.startDate = new Date(`${e.start.date}T00:00:00`).valueOf()
                                            //					}
                                            //
                                            //					if (e.end?.dateTime) {
                                            //				  		e.endDate = new Date(e.end.dateTime).valueOf()
                                            //					} else if (e.end?.date) {
                                            //				  		e.endDate = new Date(`${e.end.date}T00:00:00`).valueOf()
                                            //					}
                                            //
                                            //					e.title = e.summary
                                            //					e.fullDayEvent = (e.start?.date) ? true : false
                                            //					return e
                                            //				}
                                            //  			}
                                            //		},
                                            
                                            M 1 Reply Last reply Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 21
                                            • 22
                                            • 23
                                            • 24
                                            • 25
                                            • 34
                                            • 35
                                            • 23 / 35
                                            • First post
                                              Last post
                                            Enjoying MagicMirror? Please consider a donation!
                                            MagicMirror created by Michael Teeuw.
                                            Forum managed by Sam, technical setup by Karsten.
                                            This forum is using NodeBB as its core | Contributors
                                            Contact | Privacy Policy