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
      meshuggahn
      last edited by

      When using the marque option, is there a way to get the event time to scroll with the title? I played with the marque lines in my custom.css but no luck.

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

        @meshuggahn currently not, as they are two separate elements

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          Hi, I have made great progress on the calendar configuration and css customization but i seem to have stuck on some details, if someone could help me out.

          1. i am trying to achieve 3 weeks total, current week on top.
          2. i am trying to get 2 or 3 lines per event, in order to see more text of event titles. i have managed that but i see now that more than one event per day overlap one on top of the other.

          you can see events ok on Jun 28,29 but overlapping at other days.
          i would appreciate any help.
          Screenshot 2025-06-27 115436.png

          my config and css code:

          { // DEFAULT CALENDAR MODULE (LIST VIEW)
                module: "calendar",
                position: "bottom_left",
                config: {
                  updateInterval: 200000,
                  maximumEntries: 13,
                  wrapEvents: true,
                  fade: false,
                  locale: "el-GR",
                  displayType: "list",
                  calendars: [
                    {
                      symbol: "person",
                      name: "Chris",
                      url: "https://p47-caldav.icloud.com/published/2/MjkyMDk3...........g970cQGs",
                      color: "#007aff"
                    },
                    {
                      symbol: "person-dress",
                      name: "Rose",
                      url: "https://p167-caldav.icloud.com/published/2/MT..........TmjE6A5QR",
                      color: "#FF69B4"
                    },
                    {
                      symbol: "person-biking",
                      name: "Bike",
                      url: "https://p47-caldav.icloud.com/published/2........._eRv9TyaVcZsIVIJA",
                      color: "#00ff00"
                    }
                    
                  ]
                }
              },
              {
                module: "MMM-CalendarExt3",
                position: "middle_center",
                config: {
                  instanceId: "CX3",
                  mode: "week",
                  locale: "el-GR",
                  timeFormat: "HH:mm",
                  showHeader: false,
                  maxEventLines: 10, // Reduced to a reasonable limit
                  waitFetch: 1000 * 60 * 2,
                  refreshInterval: 1000 * 60 * 2,
                  showPastEvents: true,
                  firstDayOfWeek: 1,
                  calendarset: ["Chris", "Rose", "Bike"],
                  displaySymbol: true,
              
                  views: [
                    {
                      name: "3WeekCustom",
                      mode: "week",
                      type: "column",
                      position: "middle_center",
                      timeFormat: "HH:mm",
                      startFromToday: true,
                      weeks: 3,
                      pastWeeks: 1,
                      futureWeeks: 1,
                      slotMaxHeight: "30em", // Set a reasonable maximum height
                      slotHeight: "4em", // Base height per event, adjustable
                      maxEventLines: 10, // Reduced at view level
                      hideOverflow: false,
                      overflowRolling: false, // Force stacking
                      wrapEvents: true,
                      showEventTime: true,
                      displaySymbol: true,
                      locale: "el-GR"
                    }
                  ],
              
                  scenes: [
                    {
                      name: "DEFAULT",
                      views: ["3WeekCustom"]
                    }
                  ]
                }
              },
              
          
          .MMM-CalendarExt3 .module-header {
            visibility: hidden;
          }
          
          .CX3 {
            --cellbgcolor: transparent;
          }
          
          .CX3 .thisMonth {
            background: transparent !important;
          }
          
          .CX3 .cellContainer .cell:nth-child(1) .cw {
            display: none;
          }
          
          .CX3 .weekend {
            font-size: 80%;
            font-weight: normal;
            background: transparent !important;
          }
          
          .CX3 .weekend_1,
          .CX3 .weekend_2,
          .CX3 .weekday {
            color: var(--defaultColor);
            font-weight: normal;
            text-align: left;
            background: transparent !important;
            min-height: 0; /* Ensure no minimum height interferes */
            padding: 0; /* Remove padding to control height */
          }
          
          .CX3 .cellHeader {
            text-align: left;
            font-size: 100%;
            background: transparent !important;
          }
          
          /* Event styling with one-line icon/time and two-line title */
          .CX3 .event.singleday,
          .CX3 .event.fullday,
          .CX3 .event.multiday {
            background-color: rgba(0, 0, 0, 0.3); /* Default fallback for entire event */
            border-radius: 8px;
            line-height: 1.3em !important;
            overflow: visible !important;
            display: block !important; /* Ensure vertical stacking */
            margin-bottom: 1em; /* Consistent spacing between events */
            width: 100% !important;
            min-height: 3.9em; /* Minimum for one line icon/time + two title lines */
            padding: 0.2em 0; /* Controlled padding */
            position: relative; /* Ensure proper layering */
            z-index: 1; /* Prevent overlap due to layering */
            box-sizing: border-box; /* Include padding in height calculation */
          }
          
          /* Calendar-specific colors with higher specificity */
          .CX3 .event.singleday[data-calendar="Chris"],
          .CX3 .event.fullday[data-calendar="Chris"],
          .CX3 .event.multiday[data-calendar="Chris"] {
            background-color: rgba(0, 122, 255, 0.4); /* #007aff with 40% opacity */
          }
          
          .CX3 .event.singleday[data-calendar="Rose"],
          .CX3 .event.fullday[data-calendar="Rose"],
          .CX3 .event.multiday[data-calendar="Rose"] {
            background-color: rgba(255, 105, 180, 0.4); /* #FF69B4 with 40% opacity */
          }
          
          .CX3 .event.singleday[data-calendar="Bike"],
          .CX3 .event.fullday[data-calendar="Bike"],
          .CX3 .event.multiday[data-calendar="Bike"] {
            background-color: rgba(0, 255, 0, 0.4); /* #00ff00 with 40% opacity */
          }
          
          /* Fix black text and layout */
          .CX3 .event .headline {
            color: #ffffff !important; /* White text for readability */
            background: transparent !important;
            display: block; /* Simplified layout */
            width: 100%;
          }
          
          .CX3 .event .headline .time {
            font-size: 90%; /* Readable size */
            text-align: center;
            white-space: nowrap; /* Prevent wrapping */
            display: inline-flex; /* Inline flex for icon and time */
            align-items: center;
            justify-content: center;
          }
          
          .CX3 .event .headline .symbol {
            margin-right: 0.5em; /* Space between icon and time */
            font-size: 100%; /* Match time size */
            display: inline-block; /* Ensure inline with time */
          }
          
          .CX3 .event .headline .title {
            font-weight: normal;
            text-align: left;
            overflow: visible; /* Ensure visibility */
            white-space: normal; /* Allow wrapping for two lines */
            padding-left: 0;
            width: 100%;
            font-size: 90%; /* Ensure readable size */
            display: block; /* Force below icon/time */
            max-height: 2.6em; /* Limit to two lines */
            line-height: 1.3em; /* Control line spacing */
          }
          
          /* Hide μ.μ. if present */
          .CX3 .event .headline .time::after {
            content: "" !important;
          }
          
          /* Ensure other headline elements inherit styles */
          .CX3 .event.singleday .headline:not(.useSymbol)::before,
          .CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before {
            color: inherit !important;
            background: transparent !important;
          }
          
          .CX3 .event .headline.useSymbol .symbol,
          .CX3 .legends .legend,
          .CX3 .legend.useSymbol .symbol {
            font-size: 70%;
            background: transparent !important;
          }
          
          .CX3 .legends .legend {
            border-radius: 8px;
            color: var(--oppositeColor);
            max-height: 2.6em !important;
            line-height: 1.3em !important;
            overflow: visible !important;
            white-space: normal !important;
            word-break: break-word !important;
            word-wrap: break-word !important;
            display: block !important;
            width: 100% !important;
            background: transparent !important;
          }
          
          S 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @chriskar
            last edited by

            @chriskar weekIndex:0

            should set the first week shown in mode week

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

              @chriskar views and scenes were config options in calendarExt2, but are not used in Ext3

              Sam

              How to add modules

              learning how to use browser developers window for css changes

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

                @sdetweil said in MMM-CalendarExt3:

                @chriskar views and scenes were config options in calendarExt2, but are not used in Ext3

                so i remove views and scenes and use only the config part?

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

                  @chriskar correct

                  mode:week
                  weeksInView:3
                  weekIndex:0 //first week to see, -1 is last week, default

                  etc

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    ok thanks, this worked fine!
                    what about the overlaping issue? css code is mostly AI generated so it probably has a lot of junk in

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

                      @chriskar i do not know on css
                      he provides lots of control, but wrap seems difficult

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • P Offline
                        p1lspeda
                        last edited by

                        Hi,
                        I updated to MM 2.32 this morning and ever since then, I have noticed that the CW entry in my MMM-CalendarExt3 is stuck at “CW1”:
                        e0c31178-fa62-4c21-8f01-ad2a29c0c4eb-image.png

                        I assume the newest changes have something to do with it
                        9cdc6813-31c8-4f3e-af65-9561cf029d8b-image.png

                        Any idea if I can solve this or do I need to wait for a module update ?
                        Thanks

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 64
                        • 65
                        • 66
                        • 67
                        • 68
                        • 66 / 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