MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

MMM-CalendarEXT2 - Event color changes



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



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



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



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


Log in to reply