• 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 218.6k 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.
  • B Offline
    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 Offline
          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
          • M Offline
            MMRIZE @BKeyport
            last edited by Aug 18, 2022, 12:19 PM

            @BKeyport
            :D

            I just want to get a similar look with Fantastical App on MagicMirror because I majorly am using that app in my real world. ;)month.5.png

            B 1 Reply Last reply Aug 18, 2022, 6:52 PM Reply Quote 0
            • B Offline
              BKeyport Module Developer @MMRIZE
              last edited by Aug 18, 2022, 6:52 PM

              OK, Seriously - do you want to do two things:

              1. Setup your minical to show by itself, without an agenda.
              2. Allow it to expand to multiple months like my MMM-Minimonth

              If so, I’m seriously considering dropping the module, as I’m getting very frustrated in porting away from moment.js - and frankly, I’m to the point of dropping out - I’d rather concentrate on other things.

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

              M 1 Reply Last reply Aug 18, 2022, 7:44 PM Reply Quote 0
              • M Offline
                MMRIZE @BKeyport
                last edited by Aug 18, 2022, 7:44 PM

                @BKeyport
                Not at all.
                That mini cal belongs to agenda. I don’t have interesting standalone. And 3 months view? I never use that kind in real world. Basically, i will not build what I won’t use. So don’t worry.

                B 1 Reply Last reply Aug 18, 2022, 10:52 PM Reply Quote 0
                • B Offline
                  BKeyport Module Developer @MMRIZE
                  last edited by Aug 18, 2022, 10:52 PM

                  @MMRIZE z’arright.

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

                  B 1 Reply Last reply Aug 29, 2022, 9:54 PM Reply Quote 0
                  • B Offline
                    BKeyport Module Developer @BKeyport
                    last edited by Aug 29, 2022, 9:54 PM

                    @MMRIZE hey, Having trouble with a transform, I’ve noticed.

                    In redoing my CSS (reason for finding bug posted on github), I noticed my transformer isn’t quite working like I want.

                    this works:

                    eventTransformer: (ev) => {
                    	if (ev.title.search("⚾") > -1)
                    	ev.title = ev.title.replace("⚾","");
                    	return ev
                    },
                    

                    However, I would also like to take out the space after the baseball, so that these events line up with the rest of the events that don’t try and get fancy and put emoji into the title.

                    two attempts I’ve made: ev.title.replace("⚾ ",""); and ev.title.replace("⚾ ",""); totally disable to the transform. Suggestions?

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

                    S 1 Reply Last reply Aug 29, 2022, 10:26 PM Reply Quote 0
                    • S Offline
                      sdetweil @BKeyport
                      last edited by Aug 29, 2022, 10:26 PM

                      @BKeyport said in MMM-CalendarExt3Agenda:

                      eventTransformer: (ev) => {
                      if (ev.title.search(“⚾”) > -1)
                      ev.title = ev.title.replace(“⚾”,“”);
                      return ev
                      },

                      so, lets make a little node script to test outside the transform

                      xxx.js

                      let title= " put in your chars"

                      console.log(title.replace(“… etc”,“”)

                      save and then run

                      node xxx.js

                      then u can play with it
                      til you get what you expect

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      B 1 Reply Last reply Aug 30, 2022, 1:01 AM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 19
                      • 20
                      • 2 / 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