MagicMirror² v2.13.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: "",
    						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 {

    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 ("Panic") > -1) {
    								event.icon = "noto-softball";
    								event.className = "view_panic";
    								} else if ("Arin") > -1) {
    								event.icon = "noto-softball";
    								} else if ("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 {

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

Log in to reply