jclarke0000 / MMM-MyCalendar

Alternative calendar module for MagicMirror.
57 stars 17 forks source link

Colors in calendar depending on text. #1

Closed MrPineMan closed 6 years ago

MrPineMan commented 7 years ago

Since i tryed to implement the MMM-MyWastePickup module, I stuck with getting a right CSV formatted file. The website where I getting my data can only export a .ics file. (https://inzamelschema.rmn.nl/ical/0355200000752319) So i decided to implement my Calendar and modify it littlebit. The question is: How can i modify the icon and icon color depending on the text in de calendar? For example: Paper container shows up with a container icon in the color blue ;) --> https://github.com/jclarke0000/MMM-MyWastePickup/blob/screenshots/screenshot.png?raw=true .

Or is it possible to implement (or modify) my ical file for the MMM-MyWastePickup module?

Thanks in advance

emlowe commented 7 years ago

A small change to the JS allows you to do this with CSS. You add in a custom attribute into the title:

titleWrapper.setAttribute("title", event.title);

then you can do things like this in the CSS:

.MMM-MyCalendar .title[title^="C--"] { color:DarkViolet; }

This will set any title that begines with "C--" to have the specified color

jclarke0000 commented 6 years ago

This module does not have the ability to change the icon in the same way as the default calendar module. All entries use the calendar page icon. You can do as emlowe explains above, but that will only change the colour. You would need to make a modification to the template itself in order to do this.

That said, have a look at the latest version of MMM-MyWastePickup, which now officially has support for custom calendars and an explanation on how to make your own. https://github.com/jclarke0000/MMM-MyWastePickup