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.
    • W Offline
      wperry530
      last edited by sdetweil

      Hello all!

      New to building out my magic mirror, and I’m running into a problem. If I understand correctly, this module would allow me to click an event from my google calendar and see the details. When I run the module, I am not getting that feature.

      Is it something I’m doing wrong or am I misunderstanding something? Below is my config, and I have installed the lastest version of Electron.

      {
        module: "calendar",
        header: "My Calendar",
        config: {
          calendars: [
            {
              symbol: "calendar",
              url: "**super secret**", // Replace with your actual Google Calendar ICS link
      		name:"wes",
      		color:"red"
            }
          ],
          maximumEntries: 10, // Number of events shown
          maximumNumberOfDays: 365, // Show events up to a year in advance
          displaySymbol: true, // Display the calendar symbol
          defaultSymbol: "calendar", // Default symbol if none specified for calendar
          // Other configuration options can be added here based on your preference
        }
      },
      {
        module: "MMM-CalendarExt3",
        position: "middle center",
        title: "",
        config: {
          mode: "week",
          instanceId: "basicCalendar",
          maxEventLines: 5,
          firstDayOfWeek: 0,
          calendarSet: ['wes']
        }
      
      M 1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @wperry530
        last edited by

        @wperry530
        Not only popover feature is not abled? Or some other symptom you have?
        If only popover doesn’t work, What browser and version do you use? (Electron or Chromium version I need)

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

          @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

            @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 Reply Quote 0
            • S Do not disturb
              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 Do not disturb
                      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 Do not disturb
                        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
                        • 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