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
    222 Posts 29 Posters 296.5k Views 31 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 @BKeyport
      last edited by

      @BKeyport
      All of them seems solvable but I’m on vacation so don’t have time. I will reply after returning a week later.

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

        @MMRIZE Enjoy your vacation! Shouldn’t even be checking in… :)

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

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

          @BKeyport
          Frankly says, I don’t like this kind of style, but your wish. :D

          9a93fa14-2ea1-4c76-909d-0cf7cce08e50-image.png

          .CX3A .cellBody .fullday .event {
            color: var(--calendarColor);
            background-color: unset;
            max-width: 100%;
          }
          
          .CX3A .cellBody .fullday .event .title {
            color: inherit;
            overflow: unset;
            white-space: unset;
            text-overflow: unset;
          }
          
          .CX3A::after {
            height: 0;
          }
          
          .CX3A .cellBody .fullday .event .headline :not(.title) {
            display: inline-block;
          }
          
          .CX3A .cellBody .fullday .event .headline .time {
            display: none;
          }
          
          .CX3A .event .time {
            width: 35px; /* adjust for your entire CSS harmony */
            text-align: right;
          }
          
          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @MMRIZE
            last edited by

            @MMRIZE at least you have good taste and follow the bluejays. :P

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

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

              @BKeyport
              title wrapping example
              aaa.png

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

                @MMRIZE Works great, Thanks!

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

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

                  So, here’s my final config in CSS -

                  * CalendarExtende3 Agenda */
                    
                  .CX3A .event .description {
                    display: none;
                  }
                  
                  .CX3A .event .headline .symbol.noSymbol::after {
                    content: '';
                  }
                  
                  .CX3A .cellBody .fullday {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                  }
                  
                  .CX3A .cellBody .fullday .event {
                    color: var(--calendarColor);
                    background-color: gray;
                    max-width: 100%;
                    padding: 0px 0px;
                  }
                  
                  .CX3A .cellBody .fullday .event .title {
                    color: inherit;
                    overflow: unset;
                    white-space: unset;
                    text-overflow: unset;
                  }
                  
                  .CX3A .cellBody .fullday .event .headline :not(.title) {
                    display: inline-block;
                  }
                  
                  .CX3A .cellBody .fullday .event .headline .time {
                    display: none;
                   }
                  
                  .CX3A .event .time {
                    width: 55px; /* adjust for your entire CSS harmony */ 
                    text-align: right;
                  }
                  
                  .CX3A .event .location {
                    display: none;
                  }
                  
                  .CX3A::after {
                    height: 0;
                  }
                  

                  Results in:

                  7cdfcb3f-ce93-45c6-a1ab-a3a193bd954d-image.png

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

                  1 Reply Last reply Reply Quote 1
                  • luisestradaL Offline
                    luisestrada @BKeyport
                    last edited by

                    @BKeyport said in MMM-CalendarExt3Agenda:

                    @MMRIZE at least you have good taste and follow the bluejays. :P

                    I cannot agree more with that :)

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

                      Updated

                      CX3A_110.png

                      1.1.0 (2022-08-17)

                      • ADDED : miniMonth calendar
                      • FIXED : some minor bugs fixes and code refactoring
                      BKeyportB 1 Reply Last reply Reply Quote 0
                      • BKeyportB Offline
                        BKeyport Module Developer @MMRIZE
                        last edited by

                        @MMRIZE ya know, I hate that you’re so efficient in getting stuff like this to work natively, without external code. geezer.gif

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

                        M 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 7
                        • 22
                        • 23
                        • 5 / 23
                        • 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