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.
    • G Offline
      gonzonia @XDmToter
      last edited by

      @XDmToter
      There’s a way to get an iCal URL without making it public. I see this in my “Settings and Sharing” section of Google Calendar. Screenshot 2023-10-11 at 2.28.40 PM.png

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

        @gonzonia @XDmToter
        But anyway, for shared-calendar (e.g. Family calendar), MMM-GoogleCalendar is worthy. (And there would be the possibility to implement a reminder feature also.)

        I discussed this issue with @randomBrainstorm, and I can bet the fixed version of MMM-GoogleCalendar will be released soon. At that time, the need for conversion will be gone.

        BKeyportB 1 Reply Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer @MMRIZE
          last edited by

          @MMRIZE So, I’ve expanded my calendar larger for a DakBoard like setup, and noticed some cosmetic problems, mostly in background highlighting. Can you take a look and see what’s up?

          Also, I’d like the icons (using the symbols from calendar) to be row flexed not column flexed.

          Thanks.

          https://ibb.co/VL3qnsk

          		{
          			module: "MMM-CalendarExt3",
          			//disabled: true,
          			position: "top_right",
          			config: {
          				fontSize: '31.5px',
          				eventHeight: '36px',
          				animationSpeed: 0, 
          				mode: "month",
          				headerTitleOptions: {
          					month: 'long',
          					year: 'numeric', 
          				},
          				minimalDaysOfNewYear: 1,
          				refreshInterval: 60000,
          				useWeather: false,
          				useSymbol: true,
          				maxEventLines: 4,
          				firstDayOfWeek: 0,
          				calendarSet: ["Main", "Holidays", "Seahawks", "Sounders", "Bluejays", "Mariners", "Kraken", "XFL"],
          			},
          		},
          ``` css
          /* CalendarExt3 */
          .CX3 {
            --celllinecolor: #666;
            --cellbgcolor: rgba(0, 0, 0, 0.5);
            --cellheaderheight: 25px;
            --cellfooterheight: 2px;
            --defaultcolor: #FFF;
            --eventheight: calc(var(--fontsize) + 4px);
            --totalheight: calc(var(--eventheight) * var(--maxeventlines));
            --displayEndTime: none;
            --displayWeatherTemp: none;
            font-size: var(--fontsize);
            color: var(--defaultcolor);
            line-height: calc(var(--eventheight));
            min-width: 1280px; 
          }
          
          .module.MMM-CalendarExt3 .module-header {
          	color: white;
          	background-color: green;
          	border-radius: 8px;
          	text-transform: unset;
          	font-size: var(--font-size-medium);
          	line-height: var(--font-size-small)+5;
          	border: none;
            }
          
          .CX3 .thisMonth {
            background-color: rgba(0, 0, 0, 0.2);
          }
          
          /* get rid of unwanted elements */
          .CX3 .event.singleday .headline:not(.useSymbol)::before,
          .CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before {
            content: '⬤';
            color: var(--calendarColor);
            display: none;
            padding-right: 2px;
            font-size: 75%;
          }
          
          .CX3 .event:not(.fullday) .headline .time {
            display: none;
            padding-right: 2px;
            font-size: 75%;
            color: #EEE;
          }
          
          .CX3 .weekday_0 {
            color: #FFF;
          }
          
          .CX3 .weekday_6 {
            color: #FFF;
          }
          
          .CX3 .cw {
            font-size: 80%;
            color: goldenrod;
            display: none;
          }
          
          .CX3 .cw::before {
            content: 'CW '
          }
          
          .CX3 .title {
          	display: none;
          }
          

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

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

            @MMRIZE
            I found the issue.

            # grep broadcastEvents modules/MMM-GoogleCalendar/MMM-GoogleCalendar.js 
                broadcastEvents: false,
            
            # grep broadcastEvents modules/default/calendar/calendar.js 
            		broadcastEvents: true,
            

            broadcastEvents defaults to False in MMM-GoogleCalendar.

            There is no mention of this in your README.md You might consider adding that under your “Compatible with randomBrainstormer/MMM-GoogleCalendar” Section.

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

              @XDmToter
              That is not my fault. Which is not compatible with default calendar module is MMM-GoogleCalendar, not mine.

              As I wrote in readme, CX3 and her sibling modules don’t parse calendar files directly by themselves. They need “event provider” like default calendar module which can emit events as notification.
              And if some module can/cannot broadcast notifications by its config; that is not CX3’s job. Read the module’s guide carefully.

              X 1 Reply Last reply Reply Quote 0
              • X Offline
                XDmToter @MMRIZE
                last edited by

                @MMRIZE said in MMM-CalendarExt3:

                @XDmToter
                That is not my fault.

                I understand that. I wasn’t saying it’s anything you need to fix. I was just saying that you could mention in your readme, under the “Compatible with randomBrainstormer/MMM-GoogleCalendar” section, that setting “broadcastEvents; true” in the MMM-GoogleCalendar config is also required. If you would like, I can fork your project, add this one line to the readme and submit a pull request. I just thought it would be easier for you to do it.

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

                  @XDmToter
                  Sure, feel free to contribute anytime.
                  By the way, MMM-GoogleCalendar will be released to become compatible with the default calendar soon, and then the hotfix tip will be obsoleted. Anyway, I want you to know that always welcome.

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

                    @BKeyport
                    I’m sorry for not getting back to you sooner. I have forgotten. :)

                    What does mean background highlighting? You can adjust --cellbgcolor value or .cell selector directly to change background color.

                    And for the events list, I gave you a solution of conjuction. with MMM-ModuleMonkeyPatch. Without it, it could not be achieved.
                    https://forum.magicmirror.builders/topic/16690/mmm-calendarext3/357?_=1697195312657

                    BKeyportB 1 Reply Last reply Reply Quote 0
                    • M MMRIZE referenced this topic on
                    • M Offline
                      MMRIZE @BKeyport
                      last edited by MMRIZE

                      @BKeyport

                      9017c76f-acef-485e-8f3c-6258307df0ec-image.png

                      config (MMM-CalendarExt3)

                      {
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        config: {
                          maxEventLines: 1,
                          ...
                      

                      config (MMM-ModuleMonkeyPatch)

                      {
                        module: "MMM-ModuleMonkeyPatch",
                        config: {
                          patches: [
                            {
                              module: "MMM-CalendarExt3",
                              method: "getDom",
                              patch: function (original, args) {
                              let dom = original(args)
                              let target = Array.from(dom.querySelectorAll('.event')) || []
                                target.forEach((e) => {
                                  const dt = new Date(+e.dataset.startDate)
                                  const date = '.date_' + dt.getDate()
                                  const month = '.month_' + (dt.getMonth() + 1)
                                  const container = dom.querySelector(`.cell${date + month} .cellBody`)
                                  if (container) {
                                    e.classList.add('iconOnly')
                                    container.appendChild(e)
                                  }
                                })
                                return dom
                              }
                            }
                          ]
                        }
                      },
                      

                      custom.css

                      .CX3 .eventContainer {
                        display: none;
                      }
                      
                      .CX3 .cellBody {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                      }
                      
                      .CX3 .cellBody .event.iconOnly {
                        display: inline-flex;
                        flex-direction: row;
                        height: var(--eventheight);
                      }
                      
                      .CX3 .cellBody .event.iconOnly .symbol {
                        justify-content: center;
                      }
                      
                      .CX3 .event.iconOnly :not(.headline),
                      .CX3 .event.iconOnly .headline :not(.symbol) {
                        display: none;
                      }
                      
                      .CX3 .cell {
                        background-color: unset;
                      }
                      

                      (This patching is not considering overflowing events.)

                      1 Reply Last reply Reply Quote 0
                      • R Offline
                        roth_nj
                        last edited by

                        is there a way to set this up to have a rolling 4 or 5 weeks (depending on how its configured) instead of the traditional only one month view. that way you can continually see a few weeks in advance?

                        please forgive me if this has already been asked/covered. I tried to go through this thread but with 38 pages and a lot of code bits, I didn’t see it.

                        M B 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 35
                        • 36
                        • 37
                        • 38
                        • 39
                        • 67
                        • 68
                        • 37 / 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