• 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 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.
  • M Offline
    MMRIZE @Sam 0
    last edited by MMRIZE Sep 28, 2023, 1:03 PM Sep 28, 2023, 1:01 PM

    @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 Sep 28, 2023, 2:29 PM Reply Quote 0
    • S Offline
      Sam 0 @MMRIZE
      last edited by Sep 28, 2023, 2:29 PM

      @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 Sep 28, 2023, 2:38 PM Sep 28, 2023, 2:31 PM

        @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 Sep 28, 2023, 2:39 PM Reply Quote 0
        • S Offline
          sdetweil @Sam 0
          last edited by Sep 28, 2023, 2:39 PM

          @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 Sep 28, 2023, 3:25 PM

            @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 Sep 28, 2023, 4:07 PM Reply Quote 0
            • M Offline
              MMRIZE @Sam 0
              last edited by Sep 28, 2023, 4:07 PM

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

              S 1 Reply Last reply Sep 28, 2023, 6:24 PM Reply Quote 0
              • S Offline
                Sam 0 @MMRIZE
                last edited by Sep 28, 2023, 6:24 PM

                @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 Sep 29, 2023, 12:04 AM Reply Quote 0
                • S Offline
                  sdetweil @Sam 0
                  last edited by Sep 29, 2023, 12:04 AM

                  @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 Sep 29, 2023, 6:42 AM

                    @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 Sep 29, 2023, 8:44 AM Reply Quote 0
                    • S Offline
                      Sam 0 @MMRIZE
                      last edited by Sep 29, 2023, 8:44 AM

                      @MMRIZE

                      Thank you very much for your effort. I try to describe as best as I can what is working now so that others can learn from it.

                      Okay, I did some further research based on the term symbol and saw that the symbols had to be added in the general calendar. I also saw them in MMM-CalendarExt3 as below.
                      Will show my config code here:

                      {
                      			module: "calendar",
                      			header: "Familie agenda",
                      			position: "top_left",
                      			config: {
                      				calendars: [
                      					{
                      						
                      						fetchInterval: 7 * 24 * 60 * 60 * 1000,
                      						symbol: "calendar-check",
                      						url: "outlook url"
                      }	
                      ],					
                      customEvents: [
                          	{keyword: "zwemmen", symbol: "person-swimming fas fa-fw fa-person-swimming"},
                          	{keyword: "padel", symbol: "running fas fa-fw fa-running"},
                      	{keyword: "zingen", symbol: "music fas fa-fw fa-music"},
                      	{keyword: "verjaardag", symbol: "cake-candles fas fa-fw fa-cake-candles"},
                          	{keyword: "volleybal", symbol: "volleyball fas fa-fw fa-volleyball"}
                      ],
                      					
                      				
                      			}
                      		},
                      
                      
                      {
                        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.color = '#FF69B4'
                      
                      

                      5ff82a89-e316-441b-8f3d-996c6f1074eb-image.png

                      I will also try your previous code.

                      I would also like to control the color via CSS in the config file.
                      How are you doing this? I already tried something but this doesn’t seem to work.

                      M 2 Replies Last reply Sep 29, 2023, 11:44 AM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        6/17
                        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