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

      @fedale I think it works the same

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

        @fedale
        CX3 has not support Iconify icons yet, only FontAwesome. It would be applied in near future updates.

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

          Is there a way of getting icons to sit in specific top bars (with the date number) of cells/days?

          I use MMM-CalendarExt3 to show my upcoming month, the default calendar to show the next couple of days events and MMM-Birthdays to show upcoming birthdays.

          What I would like to do is have a birthday cake icon sat in the date field, so I can see that that date is a birthday, without any written information in the cell, i.e. the white line wouldn’t be there in the image below.

          1af439a6-5ee7-4951-b584-06ffba318e30-image.png

          d16e0200-1d92-4fe7-bd9d-eca55bf8ef2e-image.png

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

            @bicolorbore586 no way without changing the module code. can’t move it w css

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @bicolorbore586
              Sorry, It can’t be done at this moment. In some day, I have a plan to update. I’ll consider your needs at that time.

              1 Reply Last reply Reply Quote 1
              • R Offline
                redink
                last edited by

                Can anyone help me make one last tweak? I would like to get rid of the icon next to the event name and display the event time in just a 24 hour format (23:30 instead of 11:30 PM). Here’s my current config

                {
                  module: "MMM-CalendarExt3",
                  position: "bottom_bar",
                  title: "",
                  config: {
                    mode: "week",
                    instanceId: "basicCalendar",
                    locale: 'en-EN',
                    weekIndex: 0,
                    weeksInView: 4,
                    maxEventLines: 5,
                    firstDayOfWeek: 0,
                    fontSize: "22px",
                    eventTimeOptions: {
                      hour: "2-digit",
                      minute : "2-digit"
                    }, 
                    useSymbol: false,
                    calendarSet: ['School', 'Family'],
                  }
                },
                
                M 1 Reply Last reply Reply Quote 0
                • M Offline
                  MMRIZE @redink
                  last edited by MMRIZE

                  @redink
                  e4be9a45-b742-4a80-8ddc-ac6835d160c3-image.png

                  1. Add this into your custom.css
                  .CX3 .event.singleday:not(.useSymbol)::before, 
                  .CX3 .event.singleday.useSymbol .symbol.noSymbol::before {
                    display:none; 
                  }
                  
                  1. Use this eventTimeOptions;
                  eventTimeOptions: {
                  	hour12: false,
                  	hour: "2-digit",
                  	minute : "2-digit"
                  }, 
                  
                  R 1 Reply Last reply Reply Quote 0
                  • R Offline
                    redink @MMRIZE
                    last edited by

                    @MMRIZE Perfect! Thank you so much.

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

                      1.3.0 (2023-04-17)

                      • CHANGED: Shared library to fix many issues.
                      • FIXED: some typo.
                      • FIXED: flickering for many reasons (logic error to treat notifications)
                      • ADDED: CX3_RESET_DATE notification (to reset instantly from glancing)
                      • ADDED: MMM-TelegramBot user implementation example
                      • ADDED: preProcessor for better handling of raw-data priorly
                      • ADDED: manipulateDateCell to manipulate date cell DOM after drawing
                      • CHANGED: Timing of eventFilter and eventTransformer is delayed for better-handling event data after regularized
                      1 Reply Last reply Reply Quote 0
                      • M Offline
                        MMRIZE @bicolorbore586
                        last edited by

                        @bicolorbore586
                        d37a4684-6469-4d59-926c-cfb13fbc924d-image.png
                        Since 1.3.0, with manipulateDateCell callback function in configuration, you can handle date cell itself. So you can achieve what you want.

                        Here is a simple example; (more tweek might be needed to match with your wants wholely)

                        manipulateDateCell: (cell, events) => {
                        	if (Array.isArray(events) && events.some(e => e.calendarName === 'Holidays')) {
                        		let dateIcon = document.createElement('span')
                        		dateIcon.classList.add('fa', 'fa-fas', 'fa-fw', 'fa-gift')
                        		dateIcon.style.color = 'red'
                        		dateIcon.style.fontSize = '0.9em'
                        		let header = cell.querySelector('.cellHeader')
                        		let celldate = header.querySelector('.cellDate')
                        		header.insertBefore(dateIcon, celldate)
                        	}
                        }
                        

                        Anyway, it could be possible.

                        B 2 Replies Last reply Reply Quote 1
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 67
                        • 68
                        • 1 / 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