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

      @bicolorbore586
      What is that ‘blank’? I cannot guess what it is pointing. Could you show me a bigger picture? and to reproduce your case, send or show me the config and css with real ical urls. (eouia0819@gmail.com)

      1 Reply Last reply Reply Quote 1
      • A Offline
        aircliff
        last edited by

        Have a question I’m hoping others may have seen and resolved.

        Currently I run my MagicMirror in server mode and have popover enabled on my calendar. When I access from a computer with a mouse and click the individual calendar events the popover comes up as expected. When I access from my tablet the popover will not come up when I touch the individual events. Other modules I have such as MMM-OnScreenMenu responds appropriately to touch on the tablets.

        I’m hoping others may have seen this and have a recommendation for what I should look at. I’m assuming there is a setting somewhere in one of the files I need to enable or define in some specific way in the config file.

        Everything with the module otherwise works perfectly, just the one item I’m trying to resolve with popover when using with a tablet touchscreen.

        Thank you

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

          @aircliff it’s probable that the tablet doesn’t support the right level of JavaScript for the pop-up to happen

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

            @aircliff
            I’m using new way to handle popover thing, the “popover” API which is suggested recently as standard, but not all the browser supports it yet.

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

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

              @MMRIZE and tablets and TVs and fix devices are using fairly old browsers and don’t generally have any mechanism to upgrade them to the latest releases so it’s unlikely that the tablet will ever support the pop-up the same way as a native browser will

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • C Offline
                CurlyQ12391
                last edited by

                Hello, I hope that this is the correct place to ask about this…

                I’ve been playing around with adding backgrounds to my CalX3 for US holidays (example of the Valentines background below):
                1964916b-3525-40e5-a81b-7f691ef45676-image.png

                Since the CSS is applying the background to a specific month/date combo I am unsure how I can accommodate holidays that occur on the same day but different dates each year (e.g., Thanksgiving, Labor Day, etc).

                The below CSS is all the dates Labor Day could fall on, but this wouldn’t work unless I comment out the incorrect dates each year :/ any ideas/suggestions?

                /* Labor Day - First Monday in September */
                .CX3 .month_9.date_1,
                .CX3 .month_9.date_2,
                .CX3 .month_9.date_3,
                .CX3 .month_9.date_4,
                .CX3 .month_9.date_5,
                .CX3 .month_9.date_6,
                .CX3 .month_9.date_7,
                .CX3 .month_9.date_8 {
                  background-image: url("/modules/MMM-CalendarExt3/Backgrounds/LaborDay");
                  background-position: center center;
                  background-size: 60%;
                  background-repeat: no-repeat;
                }
                

                Thank you!

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

                  @CurlyQ12391
                  There is the selector “.weekday_N”(0-6). ATM I cannot remember exactly but “weekday_0” probably is “Sunday” (or Monday), anyway try it.
                  https://github.com/MMRIZE/MMM-CalendarExt3#styling-with-css

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

                    @MMRIZE,

                    That did the trick! Adding “weekday” prevented the image from populating on multiple cells :) This module is by far my favorite because of how customizable it is.

                    /* Labor Day - First Monday in September */
                    .CX3 .month_9.date_1.weekday_1,
                    .CX3 .month_9.date_2.weekday_1,
                    .CX3 .month_9.date_3.weekday_1,
                    .CX3 .month_9.date_4.weekday_1  {
                      background-image: url("/modules/MMM-CalendarExt3/Backgrounds/LaborDay");
                      background-position: center center;
                      background-size: 60%;
                      background-repeat: no-repeat;
                    }
                    

                    The only one I haven’t been able to figure out is Easter Sunday because it is the first between March 22 and April 25. I dont believe CSS can handle that type of logic, maybe JS but thats a little too complex for me. For now I will just leave Easter off the calendar.

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

                      @CurlyQ12391
                      I think it is possible with “manipulateDateCell”. I will show example after my return from a business trip in a few days.

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

                        @CurlyQ12391

                        {
                          module: "MMM-CalendarExt3",
                          position: "bottom_bar",
                          config: {
                            mode: 'month',
                            manipulateDateCell: (dom, events) => {
                              let date = new Date(+dom.dataset.date)
                              if (date.getMonth() == 8 && date.getDate() == 2) { // specific cell by absolute date
                                dom.classList.add('specialHoliday')
                                dom.style.backgroundColor = 'red'
                                // do whatever you want.
                              }
                        
                              if (events.some(e => e.title.search("Gelber") > -1)){ // specific cell by event
                                dom.classList.add('specialEvent')
                                dom.style.backgroundColor = 'yellow'
                                // do whatever you want.
                              }
                            }
                          }
                        },
                        

                        107e15de-2d5a-4b38-bab6-0eb97f9dbe53-image.png

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 33
                        • 34
                        • 35
                        • 36
                        • 37
                        • 67
                        • 68
                        • 35 / 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