wa0x6e/cal-heatmap

Feature request - multiple highlights

syntrakristof opened this issue · 1 comments

The option to highlight is available

But is this possible for multiple highlights like 1 highlight in 1 color, and another highlight in another color. Yes you might have conflicts, but then you chose just the first color or the last

Or would it be possible in someway to change the text color if you use this like a calendar, for instance on certain days change the color of the text to red instead of the default color, that way you can attract more attention to certain days. Or just chance the font size to bold on those days

I use it (with a slightly modified library) of this kind: #391

cal.on('mousedown', (event, timestamp, value) => {
    ...
    startDate.value = dayjs(timestamp)
    endDate.value = null
});

cal.on('mouseover', (event, timestamp, value) => {
    ...
    if (startDate.value) {
        let startTimestamp = dayjs(startDate.value).unix()*1000
        let endTimestamp = timestamp

        if (startTimestamp > timestamp) {
            endTimestamp = startTimestamp
            startTimestamp = timestamp
        }

        if (startTimestamp) {
            highlightDateSelection(startTimestamp, endTimestamp)
        }
    }
});

...

const highlightDateSelection = (startTimestamp, endTimestamp) => {
    //console.log(startTimestamp, endTimestamp)
    const rects = document.querySelectorAll('svg rect');

    rects.forEach(rect => {
        const classes = (rect.getAttribute('class') || '').replace(' highlight-range', '');

        const matches = classes.match(/date-selection-(\d+)/);

        if (matches) {
            const timestamp = parseInt(matches[1], 10);

            if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
                rect.setAttribute('class', classes + ' highlight-range');
            } else {
                rect.setAttribute('class', classes);
            }
        }
    });
}

Peek 2023-11-28 00-48