Highlight today (or some other day) column

[gigi81]

This is a feature request!
First of all let me tell you this library is really well designed and easy to use. It's a really nice job. Also the documentation and the examples are comprehensive and clear.

Now let's get to my request: I'm using the timeline with grouping like in the groups example (n. 5). I would like to change the background color for today so that it's clear what is happening today. Unfortunately I couldn't find any css or javascript way to do this at the moment.

Let me know your thoughts about this.
Thanks
Luigi

[josdejong]

Thanks.

There are other similar feature requests like these: for example give all weekends (sat, sun) a distinct background color. Or give all days in the past a different color. I think we could add some css classes to denote these special days. We need to think about all kind of patterns that you may want to use.

See also the new feature showCurrentTime just implemented by @fi0dor: #17

[MojoDK]

Hi all,

Anybody knows if and when it's going to be possible to give weekends a distinct background color?

thx

[josdejong]

I have to be careful with these kind of predictions, but a rough estimation is within 2 weeks to 2 months.

[AlexDM0]

To wrap up, you can use the backgroundItem for this. With that I'll assume this issue is closed.

Regards,

Alex

[josdejong]

I don't agree. Yes, you can add background items for things like today, weekend, day/night, etc. but that is relatively much work. It will be way more convenient if all you would have to do is set some css style like

.vis.timeline .grid.saturday, 
.vis.timeline .grid.sunday {
  background: #f5f5f5f;
}

.vis.timeline .grid.today {
  background: #ffffe0;
}

Ok to re-open?

[gigi81]

Despite the background area being a good solution, I have to agree with Jos. It would be much more convenient if could be done with css.

To be fair, anyway, I would consider closed this issue because there is now a way to do it and open a different feature request for the css solution.

Thanks guys for the good work.

[AlexDM0]

I see, given this was such an old issue I figured this was the solution for this and that this issue was forgotten. The downside is that the blocks are dynamic. If you want to color nights but the blocks are only days then we have a problem that would not occur with backgrounds.

How do you think to fix this? The same would hold true for hours, minutes, seconds etc. Really depends on the usecase what scale is being used. Maybe years, months, etc. Zooming is not your friend with the css approach.

Regards

[gigi81]

I think supporting a list of css classes will cover most of the use case. Some examples:

• days of week (monday to sunday)
• months (january to december)
• current day (today), week, month, year
• previous/next day, month, year
• first/last day of the month/year
• also if the days had an id they could be easily styled with jquery/javascript.

[AlexDM0]

Hi Gigi,

I agree that would be easy but my point is that depending on the zoom level, there might not be divs to allocate those classes to.

Regards,

Alex

[josdejong]

@alex, indeed, say you style Saturday and Sunday with a gray background color, you will only see this when zoomed in at week level, not when zoomed in or out. But I think that's no problem in practice, as this distinction will not be needed (or even unwanted) when looking at month, year, or hour level.

In addition to @gigi81's ideas:

• hours of day (so you can distinct a working day from say 9:00 to 18:00).

[AlexDM0]

True, Jos, could you place put this in the timeline? I could use it with the demo's instead of using the backgrounds as I am now. This would work really well with the hiddenDates feature I'm building.

[josdejong]

@AlexDM0 yes it's on my list

[AlexDM0]

this has been added by Jos in 3.8.0

[gigi81]

Well done!

[nunks]

I'm sorry if this is a stupid question, but where are the css classes for the days of the week? I searched the repository for "vis-saturday" and all I found is the documentation saying that they exist. Shouldn't they be found on vis.css?

[josdejong]

These css styles like vis-saturday are dynamically created from JavaScript. The default styling of the Timeline doesn't utilize these css styles, so you will not find them in vis.css.

[daniel-pfeiffer]

They work nicely but with a kind of flaw as you change the zoom level. E.g. if I zoom out to a whole month, day names stop to be displayed, and at the same time their css-class disappears. But 2015-10-24 is still a saturday, no matter the zoom level.
Zooming in, the same is true, e.g. if I only display 2 days, I'll have hour classes, but no longer the day classes. It would be great to combine them. I.e. I use rgba (transparent) background colours that the browser can merge easily.
There should probably be thresholds for that, e.g. when zoomed out to a year, it would no longer make sence to have thousands of divs with hour classes, each less than a pixel wide. ;-)

[josdejong]

Yes that's intended behavior. It would be technically very expensive to keep rendering all different scales on every zoom level, which would be required if you want to do this sort of stuff. Imagine you've zoomed out to see more than a year at once. The Timeline would have to render all days, hours, etc, as it can't know if you want to colorize all Saturdays and Sundays, or all time blocks between 9:00 and 17:00. Besides that, I think it could easily result in a very noisy, chaotic view. I think it's best to keep the styling of the days/hours/etc per scale. A smooth transition would be cool, but is technically very hard to achieve.

[lbrdar]

Hi all,

did anyone manage to highlight a specific day? Let's say that I want to highlight Christmas or any holiday, how would I be able to do it?

I see that custom classes were added to control for example day of the week or specific hour. But using those classes for highlighting a holiday wouldn't really work.

Can someone please help me with this?

Thank you,
Leo

[Jogai]

Highlighting christmas is as easy as:

.vis-day25.vis-december {
    background: red;
}

[lbrdar]

@Jogai

Not really, as vis classes are added and removed dynamically, that will work only in case of a certain zoom level where those classes are applied.
If I zoom in, let's say, to a week level - Christmas won't be highlighted.

[Jogai]

That is true, but technically it is not visible anyway.

[leobrdar]

@Jogai It's still visible, though. Maybe it's not displayed as a date on the axis, but it's still visible.

However, my specific use case is - I want to highlight the non-working hours and weekends. But, since weekday classes are removed on zoom, it looks like this:

The correct display would be that all hours on Saturday and Sunday are highlighted. Is there any way to do this?

Why are classes removed anyway? Why not keep all higher classes on all zoom levels? For example on zoom where days are displayed, keep week, month and year?

[jgorene]

@leobrdar I also encountered this problem and after working for a while, I finally found a solution to my needs. Even if it's a little far-fetched, it still works pretty well...

Anyway, it's only a workaround because I haven't found any other way to do that yet, indeed.
In any case, it must be adapted to your needs, of course.

Here a working example https://output.jsbin.com/xatuxeq

[mojoaxel]

@jgorene 😍 Thanks for sharing!

[jgorene]

@mojoaxel Thank you so 😉
By the way, thanks a lot for your involment here 👍

That said, I just updated "the bin" to try to get something a little more user friendly.
Nevertheless, it's still some tinkering for now...