• 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.6k 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 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
              • S Offline
                Sam 0 @MMRIZE
                last edited by Oct 3, 2023, 6:47 PM

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

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

                I only have one calendar. I’ve already looked at an example but it doesn’t seem to work.

                I found this example on this forum.

                with customer.css
                .CX3 .Ben {
                color: brown;
                }
                
                eventTransformer: function(ev) {
                  if (ev.title.search(“Ben”) > -1)  ev.className = “Ben”;
                  return ev
                }
                

                This doesn’t seem to do much, the color just remains white.
                But is this possible?

                S 1 Reply Last reply Oct 3, 2023, 7:54 PM Reply Quote 0
                • S Away
                  sdetweil @Sam 0
                  last edited by Oct 3, 2023, 7:54 PM

                  @Sam-0 in the default calendar, where you put url:
                  add

                  color: … whatever

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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