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-CalendarEXT2 - Event color changes

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    4 Posts 2 Posters 1.6k Views 2 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
      suspect24
      last edited by

      I have the module working perfectly but the only thing I want to do is slightly change the color of the events sometimes the grey is hard to read. I tried figuring out the custom css but I have no clue what I am doing or what I am looking for can anyone help?

      I have it setup with a weekly view with 5 slot in fullscreen_below and a daily view with 3 slot in the top_right.

      C 1 Reply Last reply Reply Quote 0
      • C Offline
        cskenney @suspect24
        last edited by cskenney

        @suspect24 There are a couple ways to make the change.

        Are you trying to change all the entries from a specific calendar? If you are you want to assign a className to the calendar and then use that className in the custom.css file.

        Here is an example:

        				calendars: [
        					{
        						name: "MHS Softball",
        						url: "https://calendar.google.com/calendar/ical/example.ics",
        						className: "cal_mhs_softball",
        					},
        

        Then in the custom.css file you would include the entry to change the background color of the specified className. Like this:

        .CX2 .event.cal_mhs_softball {
        	background-color:rgba(128,0,0,1);
        	}
        

        I have also successfully used the transform function to search the Title of an event for a specific keyword. Once found I assign an event.className to that event. Then in the custom.css file I can change the background color for that specific event className.

        S 1 Reply Last reply Reply Quote 1
        • S Offline
          suspect24 @cskenney
          last edited by

          @cskenney so how do I use the transform function to find the item I want to change? When I look through the css file there’s a lot in there, none of which makes any logical sense to me. Haha

          C 1 Reply Last reply Reply Quote 0
          • C Offline
            cskenney @suspect24
            last edited by cskenney

            @suspect24 Here is how I implemented the transform function.

            Background: my daughter plays on a softball team that contains the word “Panic”. I want to change the background color to match the team color and I want to include a softball icon for the event.

            I add the following code to the defaultSet section in MMM-CalendarExt2. This means every time the word “Panic” is found in an event title that the commands following are executed.

            Note: I have an If…else If structure here so I can actually transform a number of items.

            defaultSet: {
            						calendar: {
            							maxItems: 500,
            							scanInterval: 1000*60*1,
            							beforeDays: 5,
            							afterDays: 60,
            							maxIterations: 100,
            						},
            						view: {
            							timeFormat: "h:mm A",
            							transform: function(event) {
            								if (event.title.search("Panic") > -1) {
            								event.icon = "noto-softball";
            								event.className = "view_panic";
            								} else if (event.title.search("Arin") > -1) {
            								event.icon = "noto-softball";
            								} else if (event.title.search("Violin") > -1) {
            								event.icon = "emojione-monotone:violin";
            								}
            								return event;
            							},							
            						},
            						scene: {}
            				},
            

            Now that I have assigned a className object to the events that contain the word “Panic” I can use that object in the custom. css file.

            .CX2 .event.view_panic {
            	background-color:rgba(139,0,139,1);
            	}
            

            There may be other ways to do this but this one worked out well for me.

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