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.8m 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.
    • M Offline
      MMRIZE @kasperinline
      last edited by

      @kasperinline
      Do that in your ‘custom.css’ not in the ‘MMM-CalendarExt3.css’

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

        @MMRIZE said in MMM-CalendarExt3:

        @kasperinline
        Do that in your ‘custom.css’ not in the ‘MMM-CalendarExt3.css’

        Yes of course :-)

        Always in the ‘custom.css’

        1 Reply Last reply Reply Quote 0
        • S Offline
          Studio472
          last edited by

          I have an MLB calendar displaying my favorite team. West coast evening games span 2 days in my calendar (which looks goofy).

          Is there a way to transform an event to only run 1 hour so it displays in a single day?

          M 2 Replies Last reply Reply Quote 0
          • M Offline
            MMRIZE @Studio472
            last edited by

            @Studio472
            I think it could be possible with preProcessor, but I’m not in front of my computer, so cannot show example at this moment.

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

              @Studio472
              Config:

              eventTransformer: (event) => {
                if (event.calendarName === 'MLB') { // I assume you assigned 'MLB' as a calendar name.
                  event.endDate = event.startDate + 1000 // I think 1000ms is safer than 1 hour
                }
                return event
              },
              

              Before:
              94f49829-9053-4304-8c66-96cf32cf20f9-image.png
              After:
              167b3560-ec7e-4e6f-98c2-abd8883e96dc-image.png

              1 Reply Last reply Reply Quote 0
              • F Offline
                Fjerdrumsmoen
                last edited by

                Hi

                Need some help here.
                Trying to get this module to work, but only the “header” of the month is showing. No events is listing, and no dates are showing. In the GoogleCalender module I can see the events, so I know that the GoogleCalender is working.

                Do someone know what is wrong? My config file is like this:

                		{
                			module: 'MMM-GoogleCalendar',
                			header: "Familie Kalender",
                			position: "top_left",
                			config: {
                				calendars: [
                					{
                						color: "red",
                						name: "FK",
                						broadcastPastEvents: true, // <= IMPORTANT to see past events
                						calendarID: "GOOGLE ID_ deleted from the code"
                					}
                						// add another calendar HERE if needed
                				]
                			}
                		},
                		{
                			 module: "MMM-CalendarExt3",
                			 position: "bottom_center",
                			 title: "Familie kalenderen",
                			 config: {
                				mode: "month",
                				instanceId: "basicCalendar",
                				locale: 'de-DE',
                				maxEventLines: 5,
                				firstDayOfWeek: 1,
                				calendarSet: ['FK']
                			  }
                			},
                
                S M 3 Replies Last reply Reply Quote 0
                • S Do not disturb
                  sdetweil @Fjerdrumsmoen
                  last edited by

                  @Fjerdrumsmoen calendarExt3 gets its data from the default calendar module…

                  so you have to configure it, and just comment out the position: setting…

                  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 @Fjerdrumsmoen
                    last edited by

                    @Fjerdrumsmoen said in MMM-CalendarExt3:

                    module: ‘MMM-GoogleCalendar’,

                    no, use

                    module: "calendar"
                    

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • F Offline
                      Fjerdrumsmoen
                      last edited by

                      Hmm. All empty when I use the calendar module, also. Tested with the US holidays, and everything stays blank. (Without the heading)

                      Any other tips?

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

                        @Fjerdrumsmoen 1st
                        w default cal module, does the calendar display?
                        (before u comment out position)

                        did u try the default ext3 config?

                        I used the default ext3 config from doc, with the holidays
                        commented out calendarSet, and locale…

                        {
                          module: "MMM-CalendarExt3",
                          position: "bottom_bar",
                          title: "",
                          config: {
                            mode: "month",
                            instanceId: "basicCalendar",
                           // locale: 'de-DE',
                            maxEventLines: 5,
                            firstDayOfWeek: 1,
                            //calendarSet: ['us_holiday', 'abfall', 'mytest'],
                        
                          }
                        },
                        

                        got
                        Screenshot at 2023-06-03 11-22-37.png

                        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 @Fjerdrumsmoen
                          last edited by MMRIZE

                          @Fjerdrumsmoen
                          For google calendar you need some additional config. See the readme.md more.

                          1 Reply Last reply Reply Quote 0
                          • F Offline
                            Fjerdrumsmoen
                            last edited by

                            Thanks. Now it shows :-)

                            But not with Google account.
                            Should i put in this code in the config.js?

                            preProcessor: (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
                            }
                            
                            S M 2 Replies Last reply Reply Quote 0
                            • S Do not disturb
                              sdetweil @Fjerdrumsmoen
                              last edited by

                              @Fjerdrumsmoen just use the Google url instead of the holidays… does it show in default calendar?
                              no… fix that

                              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 @Fjerdrumsmoen
                                last edited by

                                @Fjerdrumsmoen
                                In CX3 module config not global or calendar module.

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

                                  1.4.0 (2023-06-04)

                                  popover

                                  • ADDED (Experimental) Show popover of event details on click/touch (Chrome 114 or Electron 25 needed)

                                  See https://github.com/MMRIZE/MMM-CalendarExt3/discussions/80

                                  • FIXED Clarify code for using MMM-GoogleCalendar module #78 (Thanks to @jcherniak)
                                  • UPDATED Updated CX3_Shared submodule #76 / More robust oppositeColor calculation. (Thanks to @btastic)

                                  Preview video is here: https://github.com/MMRIZE/public_ext_storage/issues/1

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

                                    @MMRIZE This is awesome!! Congrats!!!
                                    Unfortunately I don’t have a touch screen but this opens a new world of possibilities for those who have.

                                    1 Reply Last reply Reply Quote 0
                                    • M Offline
                                      MM19198
                                      last edited by

                                      How do I use MMM-CalendarExt3 to show events from MMM-GoogleCalendar? I have MMM-GoogleCalendar setup and it’s displaying events. However, I tried adding MMM-CalendarExt3 to the config and it won’t display anything. Any help is much appreciated.

                                      My config file…

                                      {
                                      	module: "MMM-GoogleCalendar",
                                      	header: "Family Calendar",
                                      	position: "top_left",
                                      	classes: "calendar-agenda",
                                      	config: {
                                      		calendars: [
                                      			{
                                      				symbol: "calendar-week",
                                      				calendarID: "myemail@gmail.com",
                                      				name: "mycalendar"
                                      			},
                                      		],
                                      		fade: false,
                                      		maximumNumberOfDays: 5,
                                      		showlocation: true,
                                      		tableClass: "medium",
                                      		
                                      	}
                                      },
                                      {
                                      	module: "MMM-CalendarExt3",
                                      	position: "top_left",
                                      	config: {
                                      		instanceID: "I-calendar-month",
                                      		calendarSet: ['mycalendar'],
                                      		weeksInView: 3
                                      	}
                                      },
                                      
                                      BKeyportB 1 Reply Last reply Reply Quote 0
                                      • BKeyportB Offline
                                        BKeyport Module Developer @MM19198
                                        last edited by BKeyport

                                        @MM19198 https://github.com/MMRIZE/MMM-CalendarExt3#compatible-with-randombrainstormermmm-googlecalendar

                                        There’s a config snippet there to make it work.

                                        The "E" in "Javascript" stands for "Easy"

                                        M 2 Replies Last reply Reply Quote 0
                                        • M Offline
                                          MM19198 @BKeyport
                                          last edited by

                                          @BKeyport I appreciate the quick reply. I tried adding that but unfortunately it didn’t change anything.

                                          Is there anything I need to do with eventNotification?

                                          {
                                          	module: "MMM-GoogleCalendar",
                                          	header: "Family Calendar",
                                          	position: "top_left",
                                          	classes: "calendar-agenda",
                                          	config: {
                                          		calendars: [
                                          			{
                                          				symbol: "calendar-week",
                                          				calendarID: "myemail@gmail.com",
                                          				name: "mycalendar"
                                          			},
                                          		],
                                          		fade: false,
                                          		maximumNumberOfDays: 5,
                                          		showlocation: true,
                                          		tableClass: "medium",
                                          		
                                          	}
                                          },
                                          {
                                          	module: "MMM-CalendarExt3",
                                          	position: "top_left",
                                          	title: "Family Calendar EXT3",
                                          	config: {
                                          		mode: "week",
                                          		instanceID: "I-calendar-month",
                                          		calendarSet: ['mycalendar'],
                                          		weeksInView: 3,
                                          		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
                                          		}
                                          	}
                                          },
                                          
                                          1 Reply Last reply Reply Quote 0
                                          • M Offline
                                            MM19198 @BKeyport
                                            last edited by

                                            @BKeyport In addition to that code you sent, I also had to add “broadcastEvents: true” to the MMM-GoogleCalendar config. Now I’m able to see events on the MMM-CalendarEXT3 module. Thanks!

                                            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
                                            • 31
                                            • 32
                                            • 33
                                            • 34
                                            • 35
                                            • 33 / 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