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.8k 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

      @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

        @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

          @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.

          BKeyportB S 2 Replies Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @MMRIZE
            last edited by BKeyport

            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

              @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 Reply Quote 0
              • S Offline
                sdetweil @Sam 0
                last edited by

                @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
                • First post
                  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