• 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.
  • 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
                • S Offline
                  Sam 0 @MMRIZE
                  last edited by Sep 29, 2023, 10:57 AM

                  @MMRIZE

                  I also tested your code and it works fine too.

                  1 Reply Last reply Reply Quote 0
                  • M Offline
                    MMRIZE @Sam 0
                    last edited by Sep 29, 2023, 11:44 AM

                    @Sam-0
                    If you have some knowledge about CSS, you can almost control the look of this module. Most needed info is described in readme md file.

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      MMRIZE @Sam 0
                      last edited by Sep 29, 2023, 12:24 PM

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

                      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.

                      That is why I said;

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

                      B S 2 Replies Last reply Sep 29, 2023, 7:21 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        9/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