• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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-CalendarExt3Agenda

Scheduled Pinned Locked Moved Utilities
192 Posts 27 Posters 214.3k Views 29 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 @ffingers6
    last edited by Apr 10, 2024, 5:47 PM

    @ffingers6
    I’ll try soon.

    1 Reply Last reply Reply Quote 0
    • M Offline
      MMRIZE @ffingers6
      last edited by MMRIZE Apr 11, 2024, 1:27 PM Apr 11, 2024, 1:15 PM

      @ffingers6
      a86ca1d6-517e-43d5-bdd4-3d864e42c7f4-image.png

      /* config/config.js */
      {
        module: "calendar",
        config: {
          broadcastEvents: true,
          defaultSymbolClassName: "", // This is needed to use the iconify icons instead of the font-awesome icons
            calendars: [
              {
                symbol: "noto:calendar",
                url: "...",
                color: "violet",
          ...
        }
      },
      {
        module: "MMM-CalendarExt3Agenda",
        position: "bottom_bar",
        config: {
          showMiniMonthCalendar: false,
          locale: "en-US",
          startDayIndex: 0,
          endDayIndex: 2,
          useIconify: true,
        }
      },
      
      /* css/custom.css */
      .CX3A {
        max-width: 100%;
      }
      
      .CX3A .agenda {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        gap: 10px;
        mask-image: none;
      }
      
      .CX3A .agenda .cell {
        flex-grow: 1;
        flex-basis: 0;
        border-bottom: none;
      }
      
      .CX3A .agenda .cell .cellHeader {
        border-bottom: 2px solid gray;
        margin-bottom: 5px;
      }
      
      .CX3A .agenda .cell .cellHeaderMain {
        justify-content: space-between;
        flex-grow: 1;
        padding: 5px;
      }
      
      .CX3A .event.singleday {
        border-left: 2px solid var(--calendarColor);
        padding-left: 3px;
        margin-bottom: 1px;
        background-color: color-mix(in srgb, var(--calendarColor), transparent 75%);
      }
      
      .CX3A .event .time {
        order: 2;
      }
      
      .CX3A .event .title {
        flex-grow: 2;
      }
      
      .CX3A .cellBody {
        line-height: 120%;
      }
      
      .CX3A .cellBody .fullday {
        padding-bottom: 5px;
      }
      
      .CX3A .cellBody .fullday .event {
        max-width: 100%;
      }
      

      For the size, you may need some manual adjustment for your view.

      C 1 Reply Last reply Jun 4, 2024, 8:53 PM Reply Quote 0
      • C Offline
        cyberphox @MMRIZE
        last edited by Jun 4, 2024, 8:53 PM

        Got tired of looking at the update notification today. Did a git pull and npm install…module isn’t showing at all now…
        Should have left it alone…sigh

        Full time Dad, DJ and entertainer and lover of technology.

        M 1 Reply Last reply Jun 4, 2024, 9:47 PM Reply Quote 0
        • M Offline
          MMRIZE @cyberphox
          last edited by Jun 4, 2024, 9:47 PM

          @cyberphox share me your config.(eouia0819@gmail.com)

          C 1 Reply Last reply Jun 5, 2024, 12:19 AM Reply Quote 0
          • C Offline
            cyberphox @MMRIZE
            last edited by Jun 5, 2024, 12:19 AM

            @MMRIZE sent! thanks for having a look!

            Full time Dad, DJ and entertainer and lover of technology.

            1 Reply Last reply Reply Quote 0
            • H Offline
              htilburgs
              last edited by Jun 11, 2024, 7:13 PM

              Is there a way to hide (not show) Yesterday, Today, Tomorrow, etc. and just show the day and date?

              (still trying to learn JS, but not afraid to ask) ☺

              H 1 Reply Last reply Jun 11, 2024, 7:29 PM Reply Quote 0
              • H Offline
                htilburgs @htilburgs
                last edited by htilburgs Jun 11, 2024, 8:13 PM Jun 11, 2024, 7:29 PM

                @htilburgs said in MMM-CalendarExt3Agenda:

                Is there a way to hide (not show) Yesterday, Today, Tomorrow, etc. and just show the day and date?

                Found it:
                in custom.css change

                .CX3A .relativeDay {
                display: none;
                }

                c830af2e-f2c0-4472-a6a5-1f9b6ae2fbca-image.png

                (still trying to learn JS, but not afraid to ask) ☺

                1 Reply Last reply Reply Quote 0
                • H Offline
                  htilburgs
                  last edited by Jun 11, 2024, 7:56 PM

                  Is there a way to only show MiniMonthCalendar and no calendars? I would like to run 2 instances of MMM-CalendarExt3 Agenda

                  1. only show MiniMonthCalendar
                  2. only show Calendar (no problem)

                  (still trying to learn JS, but not afraid to ask) ☺

                  M 1 Reply Last reply Jun 11, 2024, 10:28 PM Reply Quote 0
                  • M Offline
                    MMRIZE @htilburgs
                    last edited by Jun 11, 2024, 10:28 PM

                    @htilburgs
                    60739a0d-fd61-4047-ba25-2b40666a61b3-image.png

                    H 1 Reply Last reply Jun 12, 2024, 4:49 AM Reply Quote 0
                    • htilburgsH Offline
                      htilburgs @MMRIZE
                      last edited by htilburgs Jun 12, 2024, 5:03 AM Jun 12, 2024, 4:49 AM

                      @MMRIZE
                      I know this, but I like to have 2 instances running.
                      1 Calendar on the left and 1 MiniMonth on the right.
                      On this way the CSS wil override the Calendar part of both parts.

                      (still trying to learn JS, but not afraid to ask) ☺

                      M S 2 Replies Last reply Jun 12, 2024, 6:54 AM Reply Quote 0
                      • 1
                      • 2
                      • 14
                      • 15
                      • 16
                      • 17
                      • 18
                      • 19
                      • 20
                      • 16 / 20
                      • 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