• 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-CalendarExt3 Formatting questions follow-up

Scheduled Pinned Locked Moved Solved Troubleshooting
8 Posts 2 Posters 915 Views 2 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.
  • U Offline
    UncleRoger
    last edited by UncleRoger Dec 9, 2023, 12:56 AM Dec 9, 2023, 12:55 AM

    Re: MMM-CalendarExt3 Formatting questions

    I added this code:

    .CX3 .event .headline.useSymbol .symbol {
      display: none;
    }
    

    (from the above discussion) to custom.css in ~/MagicMirror/css and it had no effect – I still see the colored dot. I’m hoping to remove it and just apply the color to the text instead since I have limited horizontal width and don’t want to waste it on a dot. Is there something I’m missing?

    And, as a follow-up, I think I saw something about coloring the text so I will do more research there but it would be nifty to have an option of something like “textColor: true” which would apply the color to the text. Not sure if I’m making sense though.

    Lastly, I’m trying to figure out how to get the time to be just “08:30” (for 8:30 am) or “22:15” (for 10:15pm) and am not having much luck.

    U 2 Replies Last reply Dec 9, 2023, 1:05 AM Reply Quote 0
    • U Offline
      UncleRoger @UncleRoger
      last edited by Dec 9, 2023, 1:05 AM

      So I don’t know what I was smoking, but I couldn’t find anything about changing event text colors. What I’d like to do is, instead of having a blue dot with white text saying “Piano Lesson”, I’d like no dot and “Piano Lesson” in blue text.

      1 Reply Last reply Reply Quote 0
      • U Offline
        UncleRoger @UncleRoger
        last edited by UncleRoger Dec 10, 2023, 9:09 AM Dec 10, 2023, 9:08 AM

        @UncleRoger said in MMM-CalendarExt3 Formatting questions follow-up:

        Re: MMM-CalendarExt3 Formatting questions
        I added this code:

        .CX3 .event .headline.useSymbol .symbol {
          display: none;
        }
        

        (from the above discussion) to custom.css in ~/MagicMirror/css and it had no effect – I still see the colored dot.

        I had set useSymbol to false in config.js and that was preventing this css from being applied. When I removed that from the module config, the dot disappeared as it should.

        And, as a follow-up, I think I saw something about coloring the text so I will do more research there but it would be nifty to have an option of something like “textColor: true” which would apply the color to the text. Not sure if I’m making sense though.

        I found what I had seen previously and this is what worked:

        .CX3 .calendar_<calendar>      {
          color: <color>;
        }
        

        where is the value assigned to the “name:” option of the calendar in the default calendar module. So, if you have this entry in config.js in :

        { // Family Calendar
                name:                   "Family",
                url:                    "https://calendar.google.com/calendar/ical/blahblahblah",
                broadcastPastEvents:    true,
                color:                  "#05C3DD",
        },
        

        in the calendars array of the default calendar module definition, then the CSS to change the text color in CX3 for that calendar would be:

        .CX3 .calendar_Family      {
          color: #05C3DD;
        }
        

        Lastly, I’m trying to figure out how to get the time to be just “08:30” (for 8:30 am) or “22:15” (for 10:15pm) and am not having much luck.

        I figured this one out with a little help from ChatGPT:

        eventTimeOptions: {  hour: '2-digit', minute: '2-digit', hour12: false  },
        

        Not sure if that’s the best way to do it, but it seems to work.

        The final result looks like this:
        cc76b040-21fd-46ce-973e-8894b015c3c6-image.png

        That’s viewing it on a landscape monitor but it will eventually end up on one in portrait mode, hence the need to eliminate the dot and shorten the time.

        (Just trying to document this in case someone else is looking for the same answers.)

        M 1 Reply Last reply Dec 10, 2023, 9:18 AM Reply Quote 0
        • M Offline
          MMRIZE @UncleRoger
          last edited by Dec 10, 2023, 9:18 AM

          @UncleRoger All your solutions are perfect. Good job.

          U 1 Reply Last reply Dec 10, 2023, 9:36 AM Reply Quote 0
          • U Offline
            UncleRoger @MMRIZE
            last edited by Dec 10, 2023, 9:36 AM

            @MMRIZE

            Thanks! Now I just have to find 6 different colors that are readable, plus 3 more related to 3 of those that are also readable. 8^)

            (Family calendar, me, the wife, 3 kids, and their 3 schools. sigh Sometimes I wish I was a mantis shrimp.)

            M 1 Reply Last reply Dec 10, 2023, 10:02 AM Reply Quote 0
            • M Offline
              MMRIZE @UncleRoger
              last edited by MMRIZE Dec 10, 2023, 10:03 AM Dec 10, 2023, 10:02 AM

              @UncleRoger
              There would be a simpler solution, but your approach is not bad.

              .CX3 .singleday.event {
                color: var(--calendarColor);
              }
              

              To use this approach; you should assign color to the calendars of the default calendar module.
              aa1f00f2-22d8-41d0-a621-e0b4d9572510-image.png

              U 1 Reply Last reply Dec 10, 2023, 5:15 PM Reply Quote 0
              • U Offline
                UncleRoger @MMRIZE
                last edited by Dec 10, 2023, 5:15 PM

                @MMRIZE said in MMM-CalendarExt3 Formatting questions follow-up:

                @UncleRoger
                There would be a simpler solution, but your approach is not bad.

                .CX3 .singleday.event {
                  color: var(--calendarColor);
                }
                

                To use this approach; you should assign color to the calendars of the default calendar module.

                Ooh, that’s perfect! Thanks! Much better, I think, to do as much setup in the config.js file as possible and, for this, to define everything about a calendar together (name, key, color, etc.).

                One more question – I’ve noticed that multi-day events show a starting and ending time which is okay, but it’s also doing that for all-day events. That is, if it marked as “all-day”, it shows a start time of 00:00 and an end time of 23:59.

                fff3eb9d-2e24-44ad-8594-fa917855237e-image.png
                Is there any way to turn off the times for all-day multi-day events (or all multi-day events)?

                Thanks!

                M 1 Reply Last reply Dec 10, 2023, 7:43 PM Reply Quote 0
                • M Offline
                  MMRIZE @UncleRoger
                  last edited by MMRIZE Dec 10, 2023, 7:44 PM Dec 10, 2023, 7:43 PM

                  @UncleRoger
                  You can use this;

                  .CX3 .event.fullday.multiday .headline .time {
                    display:none;
                  }
                  

                  (I’ll add this to the next update to be the default.)

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  1 / 1
                  • First post
                    1/8
                    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