• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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
676 Posts 81 Posters 2.3m Views 85 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.
  • W Offline
    wperry530 @MMRIZE
    last edited by Jan 17, 2024, 1:47 AM

    @MMRIZE

    I tried a fourth uninstall / reinstall along with rebooting and it started to work. Thank you for the quick response!

    1 Reply Last reply Reply Quote 0
    • 1 Offline
      1lolo94
      last edited by Feb 10, 2024, 4:02 AM

      @MMRIZE - New to MagicMirror and need some help please! I finally got my calendar and google calendar sync’d… but now I lost my weather on the top right of the screen and for some reason the weather is showing for the next 5 days on the calendar - are these related?
      Sorry my picture would not upload for some reason :(

      	language: "en",
      	locale: "en-US",
      	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
      	timeFormat: 12,
      	units: "imperial",
      
      	modules: [
      		{
      			module: "alert",
      		},
      		{
      			module: "updatenotification",
      			position: "top_bar"
      		},
      		{
      			module: "clock",
      			position: "top_left"
      		},
       {
                              module: "MMM-CalendarExt3",
                              position: "bottom_bar",
                              title: "",
                              config: {
                                mode: "",
                                weekIndex: 0,
                                weeksInView: 4,
                                instanceId: "basicCalendar",
                                locale: 'en-EN',
                                maxEventLines: 5,
                                firstDayOfWeek: 0,
                                refreshInterval: 120000,
                                animationSpeed: 0,
                                useSymbol: false,
                                calendarSet: ['us_holiday','family'],
                      }
                      },
                      {
                              module: "calendar",
                              position: "",
                              config: {
                                broadcastPastEvents: true,
                                calendars: [
                                      {
                                        url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                        name: "us_holiday",
                                        color: "#6699ff"
                                      }
                                              ]
                                      }
                      },
                      {
                              module: "calendar",
                              position: "",
                              maximumNumberOfDays: 60,
                              config: {
                                animationSpeed: 0,
                                fetchInterval: 100000,
                                broadcastPastEvents: true,
                                useSymbol: false,
                                calendars: [
                                      {
                                        url: "PRIVATE STUFF",                                 
      				  name: "family",
                                        color: "yellow",
                                              user: 'xxxxxxxxxxx@gmail.com',
                                              pass: 'x',
                                              method: 'basic'
                                      }
                                              ]
                                      }
                      },
      
      		{
      			module: "weather",
      			position: "top_center",
      			config: {
      				weatherProvider: "openweathermap",
      				type: "current",
      				location: "xxxxx",
      				locationID: "5x1x7xxx2xx078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
      				apiKey: "xxxxxxx",
      				roundTemp: true,
      			}
      		},
      		{
      			module: "weather",
      			position: "top_center",
      			//header: "Weather Forecast",
      			config: {
      				weatherProvider: "openweathermap",
      				type: "forecast",
      				location: "xxxx",
      				locationID: "51x72x0x78", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
      				apiKey: "xxxxxx",
      				fade: false,
      				colored: "true",
      				roundTemp: true,
      			}
      		},
      	]
      };
      
      /*************** DO NOT EDIT THE LINE BELOW ***************/
      if (type of module !== "undefined") { module.exports = config; }
      

      CSS FILE (weather was working before adding calendar)

      
       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:8px;
      }
      .module.weather {
        background-color:rgba(255,255,255,0.5);
        border-radius:8px;
        padding:8px;
      }
      .module.weather {
        background-color:rgba(255,255,255,0.5);
        border-radius:8px;
        padding:8px;
        color: #000;
      }
      .dimmed {
      /*  color: #666; */
          color: #000;
      }
      .normal {
      /*  color: #999;*/
          color: #000;
      }
      .bright {
        color: #000;
      }
      .header {
        color: #000;
      }
      .MMM-CalendarExt3 {
              margin-bottom: -5px;
              width: 100%;
              height: 575px;
              font-size: 20px;
      }
      .CX3 .cw {
              display:none
      }
      
      .CX3 .event.singleday {
        border-left:4px solid var(--calendarColor);
      }
      
      .CX3 .event.singleday:not(.useSymbol)::before {
        content: '';
      }
      
      S M 2 Replies Last reply Feb 10, 2024, 4:09 AM Reply Quote 0
      • S Offline
        sdetweil @1lolo94
        last edited by Feb 10, 2024, 4:09 AM

        @1lolo94 said in MMM-CalendarExt3:

        Sorry my picture would not upload for some reason

        pic upload is the third icon from the right above the post editor

        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 @1lolo94
          last edited by Feb 10, 2024, 7:56 AM

          @1lolo94
          top_right? You positioned weather module top_center… I need pictures what you mean.

          1 1 Reply Last reply Feb 10, 2024, 1:55 PM Reply Quote 0
          • 1 Offline
            1lolo94
            last edited by Feb 10, 2024, 1:44 PM

            I had to resize - sorry

            20240209_225448.jpg

            1 Reply Last reply Reply Quote 0
            • 1 Offline
              1lolo94 @MMRIZE
              last edited by Feb 10, 2024, 1:55 PM

              @MMRIZE - correct, sorry - I was testing it out both ways and was about 6 hours straight trying to get everything setup.

              I would like it how it was in the top right. I removed all the calendar coding and the weather shows up correctly.

              modules: [
                 	{
                 		module: "alert",
                 	},
                 	{
                 		module: "updatenotification",
                 		position: "top_bar"
                 	},
                 	{
                 		module: "clock",
                 		position: "top_left"
                 	},
                 	{
                 		module: "weather",
                 		position: "top_right",
                 		config: {
                 			weatherProvider: "openweathermap",
                 			type: "current",
                 			location: "xx",
                 			locationID: "517xx2078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                 			apiKey: "1325b9a82957229ac168e428011778d8",
                 			roundTemp: true,
                 		}
                 	},
                 	{
                 		module: "weather",
                 		position: "top_right",
                 		//header: "Weather Forecast",
                 		config: {
                 			weatherProvider: "openweathermap",
                 			type: "forecast",
                 			location: "xx",
                 			locationID: "xxx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                 			apiKey: "1325b9a82957229ac168e428011778d8",
                 			fade: false,
                 			colored: "true",
                 			roundTemp: true,
                 		}
                 	},
                 ]
              };
              

              dd686ea4-2afb-4995-bc26-34a61e033ab9-image.png

              S 2 Replies Last reply Feb 10, 2024, 2:06 PM Reply Quote 0
              • S Offline
                sdetweil @1lolo94
                last edited by Feb 10, 2024, 2:06 PM

                @1lolo94 just fyi. you can disable modules by adding a line for each

                disabled:true, 
                

                between the module: and config: lines
                note the trailing comma

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @1lolo94
                  last edited by Feb 10, 2024, 2:10 PM

                  @1lolo94 note that each section is a stack, 1st in config.js in that position goes first , next next, etc. if too much, it gets clipped off at the bottom of the screen.

                  so if ext3 cal is first, others are below it.
                  you could change css to prove it

                  in custom.css

                  body {
                    overflow: default;
                  }
                  

                  then try to scroll the page, up to see below the fold

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 1 Reply Last reply Feb 10, 2024, 2:48 PM Reply Quote 0
                  • 1 Offline
                    1lolo94 @sdetweil
                    last edited by Feb 10, 2024, 2:48 PM

                    @sdetweil So i did everything you said (and i may have messed up) and now all i see if the calendar at the bottom.

                    8acf4357-5c3f-49a8-bf57-85c4c66d7b7a-image.png

                    Config.js

                    	language: "en",
                    	locale: "en-US",
                    	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
                    	timeFormat: 12,
                    	units: "imperial",
                    
                    	modules: [
                    		{
                    			module: "alert",
                    		},
                    		{
                    			module: "updatenotification",
                    			position: "top_bar"
                    		},
                     		{
                                            module: "MMM-CalendarExt3",
                                            position: "bottom_bar",
                                            title: "",
                                            config: {
                                              mode: "",
                                              weekIndex: 0,
                                              weeksInView: 4,
                                              instanceId: "basicCalendar",
                                              locale: 'en-EN',
                                              maxEventLines: 5,
                                              firstDayOfWeek: 0,
                                              refreshInterval: 120000,
                                              animationSpeed: 0,
                                              useSymbol: false,
                                              calendarSet: ['us_holiday','family'],
                                    }
                                    },
                                    {
                                            module: "calendar",
                                            position: "",
                                            config: {
                                              broadcastPastEvents: true,
                                              calendars: [
                                                    {
                                                      url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                                      name: "us_holiday",
                                                      color: "#6699ff"
                                                    }
                                                            ]
                                                    }
                                    },
                                    {
                                            module: "calendar",
                                            position: "",
                                            maximumNumberOfDays: 60,
                                            config: {
                                              animationSpeed: 0,
                                              fetchInterval: 100000,
                                              broadcastPastEvents: true,
                                              useSymbol: false,
                                              calendars: [
                                                    {
                                                      url: "https://calendar.google.com/calendar/ical/508cafe09ed07b094af03472b6e4b4df1afcc8f9bd961857492b70bcc6978e12%40group.calendar.google.com/private-9092589d68a2b474a7739751badffb79/basic.ics",                                 
                    				  name: "family",
                                                      color: "yellow",
                                                            user: 'xx@gmail.com',
                                                            pass: 'xxxxxx',
                                                            method: 'basic'
                                                    }
                                                            ]
                    				}
                                    },
                    		{
                    			module: "clock",
                    			position: "top_left"
                    		},
                    		{
                    			module: "weather",
                    			position: "top_right",
                    			config: {
                    				weatherProvider: "openweathermap",
                    				type: "current",
                    				location: "xx",
                    				locationID: "xx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                    				apiKey: "1325b9a82957229ac168e428011778d8",
                    				roundTemp: true,
                    			}
                    		},
                    		{
                    			module: "weather",
                    			position: "top_right",
                    			//header: "Weather Forecast",
                    			config: {
                    				weatherProvider: "openweathermap",
                    				type: "forecast",
                    				location: "xx",
                    				locationID: "51xxx72078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                    				apiKey: "1325b9a82957229ac168e428011778d8",
                    				fade: false,
                    				colored: "true",
                    				roundTemp: true,
                    			}
                    		},
                    	]
                    };
                    
                    
                    /*************** DO NOT EDIT THE LINE BELOW ***************/
                    if (typeof module !== "undefined") { module.exports = config; }
                    
                    

                    Custom CSS

                    /* MagicMirror² Custom CSS Sample
                     *
                     * Change color and fonts here.
                     *
                     * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
                     *
                     * MIT Licensed.
                     */
                    
                    /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
                    /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
                    
                    :root {
                      --color-text: #999;
                      --color-text-dimmed: #666;
                      --color-text-bright: #fff;
                      --color-background: black;
                    
                      --font-primary: "Roboto Condensed";
                      --font-secondary: "Roboto";
                      
                      --font-size: 20px;
                      --font-size-small: 0.75rem;
                    
                      --gap-body-top: 60px;
                      --gap-body-right: 60px;
                      --gap-body-bottom: 60px;
                      --gap-body-left: 60px;
                      
                      --gap-modules: 30px;
                    }
                    
                    body {
                      overflow: default;
                    }
                    
                     body { 
                     color: #000;
                     }
                     
                     .dimmed {
                      color: #000;
                      }
                    
                    .normal {
                      color: #000;
                    }
                    
                    .bright {
                      color: #000;
                    }
                    .MMM-CalendarExt3 {
                            margin-bottom: -5px;
                            width: 100%;
                            height: 575px;
                            font-size: 20px;
                    }
                    .CX3 .cw {
                            display:none
                    }
                    
                    .CX3 .event.singleday {
                      border-left:4px solid var(--calendarColor);
                    }
                    
                    .CX3 .event.singleday:not(.useSymbol)::before {
                      content: '';
                    }
                    .module.clock {
                      background-color:rgba(255,255,255,0.5);
                      border-radius:8px;
                      padding:8px;
                    }
                    .module.weather {
                      background-color:rgba(255,255,255,0.5);
                      border-radius:8px;
                      padding:8px;
                    }
                    .module.weather {
                      background-color:rgba(255,255,255,0.5);
                      border-radius:8px;
                      padding:8px;
                      color: #000;
                    }
                    .dimmed {
                    /*  color: #666; */
                        color: #000;
                    }
                    .normal {
                    /*  color: #999;*/
                        color: #000;
                    }
                    .bright {
                      color: #000;
                    }
                    .header {
                      color: #000;
                    }
                    
                    
                    
                    S 1 Reply Last reply Feb 10, 2024, 3:06 PM Reply Quote 0
                    • S Offline
                      sdetweil @1lolo94
                      last edited by Feb 10, 2024, 3:06 PM

                      @1lolo94 sorry it was html, not body

                      html {
                         overflow:default;
                      }
                      

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 1 Reply Last reply Feb 10, 2024, 3:27 PM Reply Quote 0
                      • 1
                      • 2
                      • 43
                      • 44
                      • 45
                      • 46
                      • 47
                      • 67
                      • 68
                      • 45 / 68
                      • 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