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.
    • S Offline
      sdetweil @kribbitykrab
      last edited by

      @kribbitykrab i think you made a typo

      do

      npm run server
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • T Offline
        thegooroo
        last edited by

        Default CW display shows on desktop Firefox but not on Chrome/Electron when using the rpi as a display. It only show “CW 1” for each week.

        Firefox shows the correct week number “CW 32” in this weeks case. My search-fu is not finding a fix for this.

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

          @thegooroo see
          https://forum.magicmirror.builders/post/127160

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          T 1 Reply Last reply Reply Quote 0
          • T Offline
            thegooroo @sdetweil
            last edited by

            @sdetweil Awesome! Many thanks!

            1 Reply Last reply Reply Quote 0
            • A Offline
              almightyyoshi
              last edited by

              Is there a way to remove the space where a symbol would be only for calendars not using a symbol?

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

                @almightyyoshi yes

                add

                classes:"........ some_arbitrary_string "
                //like this
                classes:"foo",
                

                after the module: line
                to the instance you dont want the symbols to show

                then use

                .arbitrary_string .symbol {
                     display:none;
                }
                /*like this */
                .foo .symbol {
                     display:none;
                }
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

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

                  I think you can add the caledar_name selector too
                  from the ext3 doc

                  .event` : Every event has this selector. Each event could have these class names together by its condition.
                    - `.continueFromPreviousWeek`, `.continueToNextWeek`
                    - `.calendar_{calendarName}`    <------- 
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    Hello,

                    Is it possible to scroll this calendar with a button on GPIO, next month or prev month? Where can i find more details on this please, found some ideas but not this specific calendar.

                    Thank you.

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

                      @S374n you can use mmm-pages, create three pages
                      Three instances of ext3. One on each page,

                      mode:“month”
                      monthIndex: 0/1/2. For this month, next month and month after that (-1 for month before current)

                      Mmm-page-indicator creates buttons you can customize look w css, and will let you Move between pages on demand , pages also rotates

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @sdetweil Thank you for the idea. I’ll look into it.

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

                          Hi,
                          My MagicMirror has been out of action for a few months now, mainly due to a kitchen renovation, but am looking at getting it back up and running.

                          I’d previously had MMM-CalendarExt3 working with a few different calendars, notably a birthday calendar, where it would show an icon in the cell header.
                          1e6a70c5-279b-4b18-8103-21e4b439440d-image.png
                          However since updating the MagicMirror software it no longer seems possible to do. Below is the module extract from config.js, and is what has been previously used. Now upon starting MM with this in place I’m told [ERROR] Your configuration file contains syntax errors :( ‘document’ is not defined.

                          Anyone able to assist with what the issue is and how to resolve it?

                          	{
                          
                          		module: "MMM-CalendarExt3", //https://github.com/MMRIZE/MMM-CalendarExt3
                          
                          		position: "lower_third",
                          
                          		//header: "FamCal",
                          
                          		config: {
                          
                          			mode: "month",
                          
                          			useWeather: false,
                          
                          			weekIndex: 0,
                          
                          			weeksInView: 5,
                          
                          			instanceId: "basicCalendar",
                          
                          			locale: "en-GB",
                          
                          			maxEventLines: 6,
                          
                          			firstDayOfWeek: 1,
                          
                          			headerWeekDayOptions: {weekday: "short"},
                          
                          			refreshInterval: 60 * 10 * 1000, // 3600000, // every hour // 60 * 10 * 1000, // too frequent refresh. 10 minutes is enough.
                          
                          			calendarSet: ["Family Calendar", "UK Holidays", "Birthday",],
                          
                          			manipulateDateCell: (cellDom, events) => {
                          
                          				if (Array.isArray(events) && events.some(e => e.calendarName === 'Birthday')) {
                          
                          					let dateIcon = document.createElement ('span')
                          
                          					dateIcon.classList.add ('fa', 'fa-fas', 'fa-fw', 'fa-gift')
                          
                          					dateIcon.style.color = 'cornflowerblue'
                          
                          					let header = cellDom.querySelector ('.cellHeader')
                          
                          					let celldate = header.querySelector ('.cellDate')
                          
                          					header.insertBefore (dateIcon, celldate)
                          
                          				}
                          
                          			},
                          
                          			eventTransformer: (ev) => 	{
                          
                          				if (ev.calendarName === 'Birthday') ev.skip = true
                          
                          				else if (ev.title.search("B -") > -1) ev.color = "brown"
                          
                          				else if (ev.title.search("C -") > -1) ev.color = "hotpink"
                          
                          				else if (ev.title.search("E -") > -1) ev.color = "orange"
                          
                          				else if (ev.title.search("I -") > -1) ev.color = "green"
                          
                          				else if (ev.title.search("G") > -1) ev.color = "white"
                          
                          				else if (ev.title.search("Bday") > -1) ev.title = ""
                          
                          				return ev
                          
                          										},
                          
                          			eventPayload: (payload) => {
                          
                          				for (let ev of payload) {
                          
                          					if (ev.fullDayEvent) {
                          
                          						let gap = +ev.endDate - +ev.startDate
                          
                          						if (gap % (1000 * 60 * 60 * 24) === 0) {
                          
                          							ev.startDate = new Date(+ev.startDate).setHours(0, 0, 0, 0)
                          
                          							ev.endDate = new Date(+ev.startDate + gap).setMilliseconds(-1)
                          
                          						}
                          
                          					}
                          
                          				}
                          
                          				return payload
                          
                          			},
                          
                          
                          
                          		},
                          
                          	},
                          
                          S 2 Replies Last reply Reply Quote 0
                          • S Offline
                            sdetweil @bicolorbore586
                            last edited by sdetweil

                            @bicolorbore586 can you do

                            cd ~/MagicMirror
                            npm run config:check
                            

                            does it produce the same error?
                            also do

                            node -c config/config.js
                            

                            if it returns and displays nothing, then node did not detect any syntax errors.

                            edit: I can reproduce this

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

                              @bicolorbore586 add this to the top of config.js, very first line

                              var document;

                              I’ll open a bug report
                              I opened https://github.com/MagicMirrorOrg/MagicMirror/issues/3990

                              Sam

                              How to add modules

                              learning how to use browser developers window for css changes

                              B 1 Reply Last reply Reply Quote 1
                              • B Offline
                                bicolorbore586 @sdetweil
                                last edited by

                                @sdetweil config:check returns the same error
                                The node one doesn’t produce anything

                                Adding var document; to the config.js gives parsing error unexpected keyword ‘var’

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

                                  @bicolorbore586 very first line
                                  Right?

                                  Sam

                                  How to add modules

                                  learning how to use browser developers window for css changes

                                  B 1 Reply Last reply Reply Quote 0
                                  • B Offline
                                    bicolorbore586 @sdetweil
                                    last edited by

                                    @sdetweil it wasn’t. Does it need to be before let config = { or the fist line after that?

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

                                      @bicolorbore586 very first line of the file, all by itself
                                      Before any comments

                                      Sam

                                      How to add modules

                                      learning how to use browser developers window for css changes

                                      B 1 Reply Last reply Reply Quote 0
                                      • B Offline
                                        bicolorbore586 @sdetweil
                                        last edited by

                                        @sdetweil that appears to have worked. Out of interest. What does that do?

                                        S 2 Replies Last reply Reply Quote 0
                                        • S Offline
                                          sdetweil @bicolorbore586
                                          last edited by sdetweil

                                          @bicolorbore586 the module code you have used the global variable document to examine the web page contents

                                          The syntax checker found the use, but didn’t know that this code (config.js is a JavaScript file) was loaded in a browser
                                          So it reported use of an undeclared variable

                                          The fix was to declare the variable as a global so the checker will be happy

                                          Sam

                                          How to add modules

                                          learning how to use browser developers window for css changes

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

                                            @bicolorbore586 there is a fix for this in the next release.

                                            Sam

                                            How to add modules

                                            learning how to use browser developers window for css changes

                                            1 Reply Last reply Reply Quote 1

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