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 how do you create multiple events with color css?

    Scheduled Pinned Locked Moved Utilities
    17 Posts 4 Posters 3.3k Views 4 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.
    • S Offline
      Sam 0
      last edited by

      Hi,

      How do you create multiple events with color css?
      Is there an example of what this looks like?
      I now have the following and it works, but I don’t know how I want to add a second event, so in addition to outings, for example birthdays

      {
      module: “MMM-CalendarExt3”,
      position: “lower_third”,
      title: “”,
      config: {
      eventTransformer: (ev) => {
      if (ev.title.search(‘Uitje’) > -1) ev.color = ‘blue’
      return ev
      },

      I also wonder how I can get a nice icon in an event, for example a birthday cake icon, does anyone have an example that I can look at?

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

        @Sam-0
        First,
        You can assign colour or class per each calendar. So check if your events are separated by different calendars. Check it first.

        In case your events are in one calendar and want to distinguish each by title of event, you can do this;

        eventTransformer: (ev) => {
          if (ev.title.search('Uitje') > -1) ev.color = 'blue'
          if (ev.title.search('verjaardag' > -1) ev.icon = 'birthday-cake'
          /* and so on ... */
          return ev
        },
        
        S 3 Replies Last reply Reply Quote 0
        • S Offline
          Sam 0 @MMRIZE
          last edited by

          @MMRIZE said in MMM-CalendarExt3 how do you create multiple events with color css?:

          if (ev.title.search(‘verjaardag’ > -1) ev.icon = ‘birthday-cake’

          Thanks for your help, it went wrong at first because a bracket was missing.) I adjusted this but unfortunately it doesn’t work. Could this be related to the fact that I have already adjusted the CSS?

          {
          module: “MMM-CalendarExt3”,
          position: “lower_third”,
          title: “”,
          config: {
          eventTransformer: (ev) => {
          if (ev.title.search(‘Uitje’) > -1) ev.color = ‘blue’
          if (ev.title.search(‘Verjaardag’) > -1) ev.icon = ‘birthday-cake’
          return ev
          },
          544eb320-2f9e-4d33-8d22-b7f31600e92b-image.png

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

            @MMRIZE

            Thanks for your help, it went wrong at first because a bracket was missing.) I adjusted this but unfortunately it doesn’t work. Could this be related to the fact that I have already adjusted the CSS?

            {
              module: "MMM-CalendarExt3",
              position: "lower_third",
              title: "",
              config: {
                   eventTransformer: (ev) => {
                          if (ev.title.search('Uitje') > -1) ev.color = 'blue'
                          if (ev.title.search('Verjaardag') > -1) ev.icon = 'birthday-cake'
                          return ev	
                   },
               }
            }
            

            c63fb0e4-c96c-4db6-81fa-194143cf7d57-image.png

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @Sam 0
              last edited by

              @Sam-0 I’ve edited your post…

              please try to include all the braces {}
              so it is completely clear

              and use indents to add clarity to what is where …

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Offline
                Sam 0 @MMRIZE
                last edited by

                @MMRIZE
                I have removed the custom CSS so it is standard, but I do not see the icon but I do see the blue color.

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

                  @Sam-0 sorry, it would not be ‘icon’, it would be ’ symbol’

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    Sam 0 @MMRIZE
                    last edited by

                    @MMRIZE

                    So I see that Outing has turned blue, but I don’t see any other symbol for birthday.

                    ef0ab2b0-d451-47a5-852e-8a219a76a910-image.png

                    S M 2 Replies Last reply Reply Quote 0
                    • S Away
                      sdetweil @Sam 0
                      last edited by

                      @Sam-0 note the code should use symbol NOT icon

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @Sam-0

                        Sorry, the Previous version was not tested, I have shown the code only with my brain, not with a real device.

                        Here is the tested code.

                          eventTransformer: (ev) => {
                            if (ev.title.search('Uitje') > -1) ev.color = 'gold'
                            if (ev.title.search('Verjaardag') > -1) ev.symbol = ['birthday-cake']
                            return ev	
                          },
                        
                        S 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 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