• 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 @BKeyport
    last edited by Jul 31, 2022, 9:39 AM

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

    B 1 Reply Last reply Jul 31, 2022, 9:33 PM Reply Quote 0
    • B Online
      BKeyport Module Developer @MMRIZE
      last edited by Jul 31, 2022, 9:33 PM

      @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 Aug 5, 2022, 12:10 AM

        @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;
        }
        
        B 1 Reply Last reply Aug 5, 2022, 12:11 AM Reply Quote 0
        • B Online
          BKeyport Module Developer @MMRIZE
          last edited by Aug 5, 2022, 12:11 AM

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

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

          M L 2 Replies Last reply Aug 5, 2022, 12:17 AM Reply Quote 0
          • M Offline
            MMRIZE @BKeyport
            last edited by Aug 5, 2022, 12:17 AM

            @BKeyport
            title wrapping example
            aaa.png

            B H 2 Replies Last reply Aug 5, 2022, 12:21 AM Reply Quote 0
            • B Online
              BKeyport Module Developer @MMRIZE
              last edited by Aug 5, 2022, 12:21 AM

              @MMRIZE Works great, Thanks!

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

              B 1 Reply Last reply Aug 5, 2022, 12:51 AM Reply Quote 0
              • B Online
                BKeyport Module Developer @BKeyport
                last edited by Aug 5, 2022, 12:51 AM

                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
                • L Offline
                  luisestrada @BKeyport
                  last edited by Aug 6, 2022, 2:24 AM

                  @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 Aug 17, 2022, 5:34 PM

                    Updated

                    CX3A_110.png

                    1.1.0 (2022-08-17)

                    • ADDED : miniMonth calendar
                    • FIXED : some minor bugs fixes and code refactoring
                    B 1 Reply Last reply Aug 17, 2022, 6:40 PM Reply Quote 0
                    • B Online
                      BKeyport Module Developer @MMRIZE
                      last edited by Aug 17, 2022, 6:40 PM

                      @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 Aug 18, 2022, 12:19 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 19
                      • 20
                      • 1 / 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