• 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
    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
                    • B Offline
                      BKeyport Module Developer @MMRIZE
                      last edited by BKeyport Sep 29, 2023, 7:21 PM Sep 29, 2023, 7:21 PM

                      Here’s my multi-transform code for reference. (The brackets may be off, I didn’t check on copy…)

                      eventTransformer: (ev) => {
                      					if (ev.title.search("🏠") > -1) {
                      						ev.title = ev.title.replace("🏠 Personal Commitment","🏠 Personal Event");
                      						ev.color = 'yellow';
                      					}
                      					if (ev.title.search("✈ Flight") > -1) {
                      						ev.title = ev.title.replace("✈ Flight","🏠 Personal Event");
                      						ev.color = 'yellow';
                      					}
                      					if (ev.title.search("busy") > -1) {
                      						ev.title = ev.title.replace("busy","🏠 Mom Event");
                      						ev.color = 'yellow';
                      					}
                      					if (ev.title.search("Weekley") > -1) {
                      						ev.title = ev.title.replace("Weekley","Weekly");
                      					}
                      					return ev
                      				}
                      

                      I’m using both CX3 and CX3A

                      The "E" in "Javascript" stands for "Easy"

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