• 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.0k 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, 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
            • 1 / 2
            1 / 2
            • First post
              17/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