search

Richardsl / heatmap-calendar-obsidian

An Obsidian plugin for displaying data in a calendar similar to the github activity calendar
Apache License 2.0
614 stars 102 forks source link

Update main.ts to add css selectors of months to individual boxes #109

Closed lksrpp closed 2 months ago

lksrpp commented 7 months ago

Added css selector for each month to the individual boxes in the format of, e.g., ".month-jan, .month-feb, etc."

This allows custom styling of different months. For example the below custom css code will render every second month with a slightly lighter background color.

lksrpp commented 7 months ago

With better styling options:

Custom CSS Code

/* Alters the color of every second month */
.theme-dark .heatmap-calendar-boxes .month-feb.isEmpty,
.theme-dark .heatmap-calendar-boxes .month-apr.isEmpty,
.theme-dark .heatmap-calendar-boxes .month-jun.isEmpty,
.theme-dark .heatmap-calendar-boxes .month-aug.isEmpty,
.theme-dark .heatmap-calendar-boxes .month-oct.isEmpty,
.theme-dark .heatmap-calendar-boxes .month-dec.isEmpty {
    background: #414141;
    /* border: 1px solid #414141;*/
}

Will lead to the following result: image