Feature request - multiple highlights
syntrakristof opened this issue · 1 comments
syntrakristof commented
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
9uenther commented
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);
}
}
});
}