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.4m 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.
    • S Offline
      sdetweil @1lolo94
      last edited by

      @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

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

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

          I had to resize - sorry

          20240209_225448.jpg

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

            @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 Reply Quote 0
            • S Offline
              sdetweil @1lolo94
              last edited by

              @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

                @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 Reply Quote 0
                • 1 Offline
                  1lolo94 @sdetweil
                  last edited by

                  @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 Reply Quote 0
                  • S Offline
                    sdetweil @1lolo94
                    last edited by

                    @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 Reply Quote 0
                    • 1 Offline
                      1lolo94 @sdetweil
                      last edited by

                      @sdetweil Thanks for the quick response - same issue :(

                      All I see is the calendar at the bottom

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

                        @1lolo94 please change this

                           position: "",
                        

                        to

                         //    position: "",
                        

                        “” causes an error
                        while no position setting is ok

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 1 Reply Last reply 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