MMM-CalendarExt2 styling options

Dizzydude

First off I want to thank eouia for making an amazing module. The amount of features and customization options are exactly what I needed and I think it’s very slick! I had a couple of options that I was trying to troubleshoot and thought I’d post here. I’ve been using the Inspector to try and nail down the proper classes and hours of searching, but for whatever reason I can’t seem to get it. I have a decent experience with CSS but far from a pro, I’m also pretty new with JS - so with that in mind I would love to know how I could achieve the following:

Me and my fiancee both have our calendars synced to CalendarExt2 and they work great. For events that we both are attending (for example events for flights) it means there are duplicate events for these. I would love to be able to filter out these ‘duplicate’ events and only have mine appear for these. Is this possible?
We use this in month view and I was wondering if it’s possible to style the previous months dates and next months dates a different colour/fade? For example, for the month view of June I am able to see from the 26 to the 31 of May, and the 1st to the 6th of July, is there a way to lower the opacity of these days?
Is there a way to target certain keywords in the event title and change the background color of that event? I have made it so it adds icons for certain event titles, and filter out events with certain keywords (i.e. things we might not want publicly visible) but I can’t figure out how to make birthdays green as an example.
Lastly something that should be simple but I can’t figure out. I’d like to change the styling of the additional events (the little ‘+1’/‘+2’/‘+3’) at the bottom of the calendar cell, but I’m having trouble targeting it.

Thanks in advance for the help, I’m really excited to get this on my wall!

A Former User

@Dizzydude
Thanks for using. And interesting challenges.

Elimination of duplicated events… hmm… but they are not LITERALLY DUPLICATED. The events are independent stuffs from different calendars and just startTime and endTime would have been the same by accident.
In those case, Many Calendar applications are using shared events so it could be managed in one calendar.
Anyway, at this moment, CALEXT2 has no method to handle shared events. Very interesting topic worth to research. but. sorry, currently not supported.
each cellSlot could have these class names so you can filter by CSS.
- slot : all slots have slot as its class name.
- daily, weekly, monthly, week, month, current, upcoming : mode of view
- period, agenda, weekSlot, cellSlot, timelineSlot… : types of slot.
- seq_0, seq_1, … : slot sequence in view
- thisyear, thismonth, thisweek, today : slot relation with today.
- year_2018, month_12, week_51, day_25, weekday_6, dayofyear_361, … : You can specify slot with these class names.

https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling#slot-components

You can transform events with conditions. Read these docs.

https://github.com/eouia/MMM-CalendarExt2/wiki/Filtering-and-Sorting#transforming
https://github.com/eouia/MMM-CalendarExt2/wiki/Event-Object

It is accessible in CSS with this selector .weeksmark

So… This is not my taste, but for example. :D

config

{
  module: 'MMM-CalendarExt2',
  config: {
    calendars : [
      {
        url: "https://www.kriftel.de/pdf-pool-formulare-etc/abfall-abfallkalender/abfallkalender-2019-2.ics?cid=1u7",
        name: "Abfall",
        icon: "mdi-recycle",
        className: "abfall"
      },
      {
        url: "https://api.calreply.net/webcal/f2a7a232-6014-4bf3-929a-b6b9effe3a32",
        name: "MLB",
        icon: "mdi-baseball",
        className: "sport"
      },
    ],
    views: [
      {
        name: "VIEW1",
        mode: "month",
        calendars: [],
        position:"fullscreen_below",
        slotMaxHeight: "120px",
        transform: (event) => {
          if (event.title.search("Blaue") > -1) {
            event.className = "blue"
          }
          return event
        },
      },
    ],
    scenes: [
      {
        name: "TEST",
        views:[],
      },
    ],
  },
},

css/custom.css


/* For weekday name to over the calendar */
.CX2 .weekSlot.seq_0 .cellSlot .slotSubTitle { 
  position:relative;
  top:-30px;
  left:40%;
}

/* cells of not this month */
.CX2 .cellSlot:not(.thismonth) {
  background-color:#333;
}

/* header of cells of this month */
.CX2 .cellSlot.thismonth .slotHeader{
  color:#000;
  background-color:#FF0;
}

/* header of cell of today */
.CX2 .cellSlot.today .slotHeader {
  background-color:#FFF;
  color:#000;
}

/* style blue */
.CX2 .blue.fullday {
  background-color:#00F;
  color:#0FF;
}

/* style abfall */
.CX2 .abfall {
 background-color:#333;
 color:#3F3;
}

.CX2 .abfall.fullday {
 background-color:#3E4;
 color:#000;
}

/* style sport */
.CX2 .sport {
 background-color:#666;
 color:#F33;
}

.CX2 .sport.fullday {
 background-color:#F99;
 color:#000;
}

/* weeks number mark */
.CX2 .weeksmark {
  background-color:#F00;
}

/* slot footer for +1/+2... */
.CX2 .slotFooter {
  color:#F0F;
}

Dizzydude

@Sean Awesome, thank you that helped a lot and it works great.

Ah yes I wasn’t clear, not truly duplicates - just two separate events with matching info!

Thanks again for the help, I’m stoked!

chrixbrown

How can I remove that which is +2 or +3 or spread it more so that everything can be seen