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.

    Apply color to future events in CalendarExt3

    Scheduled Pinned Locked Moved Custom CSS
    32 Posts 3 Posters 692 Views 3 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.
    • K Offline
      kkmirr04 @sdetweil
      last edited by

      @sdetweil No change unfortunately. Both event streams load fine and with color, but the calendar still is displaying everything just white, except for one event that did come with color 10.png

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @kkmirr04
        last edited by sdetweil

        @kkmirr04 just for testing, if you have a mouse on that system
        Mouse over the event without color and click. This will show a new view of that event with the rest in blur behind,

        Does the text appear in the proper color?
        Escape key to exit that view

        Could you also add

        coloredSymbol:true, 
        

        To the base calendar module config.
        Next to

        coloredText:true
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        K 1 Reply Last reply Reply Quote 0
        • K Offline
          kkmirr04 @sdetweil
          last edited by

          @sdetweil clicking on the event did bring the color in on that new view
          11.png

          It didn’t seem like the coloredSymbol and coloredText had an effect, but not sure if I put them in the right spot? Should I remove the old colored:true, value?

          {
          			module: "calendar",
          			disabled:false,
          			coloredSymbol:true,
          			coloredText:true,
          			classes: "page0",
          			header: "XX Calendar'",
          			position: "top_right",
          			config: {
          			   colored: true,
          				calendars: [
          					{
          						name: "xx_cal",
          						color: 'yellow',
          						fetchInterval: 7 * 24 * 60 * 60 * 1000,
          						symbol: "calendar-check-o",
          						url: "https:basic.ics"
          	
          
          
          			module: "calendar",
          			classes: "page0",
          			coloredSymbol:true,
          			coloredText:true,
          			header: "YY Calendar'",
          			position: "top_right",
          			config: {
          			   colored: true,
          				calendars: [
          					{
          					name: "yy_cal",
          						color: 'green',
          						fetchInterval: 7 * 24 * 60 * 60 * 1000,
          						symbol: "calendar-check-o",
          						url: "webcal:
          			
          
          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @kkmirr04
            last edited by

            @kkmirr04 they replace the colored:true which did everything,
            Now you can control each separately

            Inside the config: { section
            Before the calendars: [ list

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            K 1 Reply Last reply Reply Quote 0
            • K Offline
              kkmirr04 @sdetweil
              last edited by

              @sdetweil Still the same results with the coloredSymbol and coloredText unfortunately

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @kkmirr04
                last edited by

                @kkmirr04

                @kristjanesperanto can you help here? Seems ext3 is having trouble with color….

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                KristjanESPERANTOK 1 Reply Last reply Reply Quote 0
                • KristjanESPERANTOK Offline
                  KristjanESPERANTO Module Developer @sdetweil
                  last edited by

                  @kkmirr04 Does it work when you add this to your custom.css?

                  .CX3 .event.singleday .headline .title,
                  .CX3 .event.singleday .headline .time {
                    color: var(--calendarColor);
                  }
                  
                  K S 2 Replies Last reply Reply Quote 0
                  • K Offline
                    kkmirr04 @KristjanESPERANTO
                    last edited by

                    @KristjanESPERANTO So I really don’t know anything about modifying CSS , I can’t locate a custom.css file . Would that be in /magicmirror/CSS or MagicMirror/modules/MMM-CalendarExt3 folders? And where in those respective files should it be placed - just at the top or bottom?

                    Sorry, I’m not a programmer by any stretch, just a hobbyist trying to figure it out

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @kkmirr04
                      last edited by

                      @kkmirr04 in 2.36 custom.css would be located in the config folder. Before that in the css folder

                      If you had used my installer script it would have created an empty file for you.

                      Editing custom.css is just like editing config.js

                      Just a file of text

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @KristjanESPERANTO
                        last edited by

                        @KristjanESPERANTO that changed the results for me… now have color

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0

                        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                        With your input, this post could be even better 💗

                        Register Login
                        • 1
                        • 2
                        • 2 / 2
                        • 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