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.

    CalendarExt3 colour custom Css for specific name.

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    8 Posts 3 Posters 654 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.
    • B Offline
      bradley1982
      last edited by sdetweil

      Hi all,

      looking for some help please as really struggling to get the mirror to show different events in people names to show a different colour.

      I have one calendar linked to the mirror and looking to set up the calendar has a name in the title that the text is a different colour however can’t for the life of me figure it out via the various forums etc.

      This is my config set up:

      		{
      			module: "calendar",
      			header: "Bradley Family",
      			position: "top_left",
      			config: {
      				calendars: [
      					{
      						fetchInterval: 7 * 24 * 60 * 60 * 1000,
      						symbol: "calendar-check",
      						url: "
      					}
      				]
      			}
      		},
      		{
        module: "MMM-CalendarExt3",
        position: "fullscreen_below",
      },
      

      I have tried various under custom ccs by none coming through:

      .CX3 .event[data-calendar-name=“Evie”] {
      color: #FF0000;
      }

      .CX3 .eventTransformer: (ev) => {
      if (ev.title.search(‘Evie’) > -1) ev.color = ‘#FF0000’
      return ev
      }

      .CX3 .event .eventTransformer: (ev) => {
      if (ev.title.search(‘Liam’) > -1) ev.color = ‘#FF0000’
      return ev
      }

      .CX3 .event .eventTransformer: (ev) => {
      if (ev.title.search(‘Liam’) > -1) ev.color = ‘#FF0000’
      }
      return ev

      Any ideas? not great with this so all help appreciated!

      S M 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @bradley1982
        last edited by sdetweil

        @bradley1982 from the transformer you must ALWAYS return the event (ev) even if you didn’t modify it

        .CX3 .event .eventTransformer: (ev) => {  // this transformer runs, but never returns the event called on
        if (ev.title.search(‘Liam’) > -1) ev.color = ‘#FF0000’
        }
        return ev   //<---- this is outside the transformer, and doesn't do anything
        needs to be inside the braces
        
        data-calendar-name="Evie"
        

        you didn’t name the calendar entry in the default calendar
        where to url is add

            name: "Evie",
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 1 Reply Last reply Reply Quote 0
        • B Offline
          bradley1982 @sdetweil
          last edited by

          @sdetweil Hi Sam,

          thanks for picking up so quickly.

          i have done this however nothing happening …

          .CX3 .event .eventTransformer: (ev) => { // this transformer runs, but never returns the event called on
          if (ev.title.search(‘Liam’) > -1) ev.color = ‘#FF0000’
          return ev
          }

          any ideas? thanks for your help!!

          Cheers

          paul

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

            @bradley1982 said in CalendarExt3 colour custom Css for specific name.:

            .CX3 .eventTransformer: (ev) => {
            if (ev.title.search(‘Evie’) > -1) ev.color = ‘#FF0000’
            return ev
            }

            It is totally wrong. You tried to use JS in the CSS. nonsense.

            .CX3 .event[data-calendar-name=“Evie”] {
            color: #FF0000;
            }

            When you want to select the event by calendar name, you should specify the name of the target in your calendar module’s config. It makes sense when you have several calendars and need to distinguish each calendars by its name.

            {
            	module: "calendar",
            	header: "Bradley Family",
            	position: "top_left",
            	config: {
            		calendars: [
            			{
            				symbol: "calendar-check",
            				url: "...",
            				name: "Evie", // <== Like this.
            			}
            		]
            	}
            },
            

            But what I guess is, you may have some events in ONE calendar, so want to distinguish by its partial string of the title.

            eec51aa4-49de-4412-8a2c-c1a0d1289f60-image.png

            /* in your config.js */
            {
            	module: "MMM-CalendarExt3",
            	position: "bottom_bar",
            	config: {
            		eventTransformer: (ev) => {
            			if (ev.title.search('Test') > -1) {
            				ev.class = 'test'
            			}
            			return ev
            		},
            	}
            },
            
            /* in your css/custom.css */
            .CX3 .event.test {
              color: red;
            }
            
            B 2 Replies Last reply Reply Quote 0
            • B Offline
              bradley1982 @MMRIZE
              last edited by

              This post is deleted!
              1 Reply Last reply Reply Quote 0
              • B Offline
                bradley1982 @MMRIZE
                last edited by

                @MMRIZE hi thanks so much!!!

                How do i the same for another name in the config.js?

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

                  @bradley1982

                  /* in your module config of CX3 */
                  eventTransformer: (ev) => {
                    if (ev.title.search('Tom') > -1) ev.class = 'tom'
                    if (ev.title.search('John') > -1) ev.class = 'john'
                    return ev
                  },
                  
                  /* css/custom.css */
                  .CX3 .event.tom {
                    color: blue;
                  }
                  .CX3 .event.john {
                    color: green;
                  }
                  
                  B 1 Reply Last reply Reply Quote 0
                  • B Offline
                    bradley1982 @MMRIZE
                    last edited by

                    @MMRIZE thanks so much!! Could only imagine what I would have come up with lol

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