Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request - multiple highlights #381

Open
syntrakristof opened this issue Aug 1, 2023 · 1 comment
Open

Feature request - multiple highlights #381

syntrakristof opened this issue Aug 1, 2023 · 1 comment

Comments

@syntrakristof
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants