Comments (26)
@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...
from vis.
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
from vis.
Hi all,
Anybody knows if and when it's going to be possible to give weekends a distinct background color?
thx
from vis.
I have to be careful with these kind of predictions, but a rough estimation is within 2 weeks to 2 months.
from vis.
To wrap up, you can use the backgroundItem for this. With that I'll assume this issue is closed.
Regards,
Alex
from vis.
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?
from vis.
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.
from vis.
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
from vis.
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.
from vis.
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
from vis.
@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).
from vis.
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.
from vis.
@AlexDM0 yes it's on my list
from vis.
this has been added by Jos in 3.8.0
from vis.
Well done!
from vis.
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?
from vis.
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.
from vis.
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. ;-)
from vis.
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.
from vis.
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
from vis.
Highlighting christmas is as easy as:
.vis-day25.vis-december {
background: red;
}
from vis.
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.
from vis.
That is true, but technically it is not visible anyway.
from vis.
@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?
from vis.
@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
from vis.
@jgorene π Thanks for sharing!
from vis.
Related Issues (20)
- Overlapping Edges in Vis.js 4.20.0 and later HOT 1
- Timeline - how to dynamically change options value? HOT 3
- timeline - update tooltip on onMoving callback is not working HOT 2
- Cross-Site Scripting DOM Input Validation and Representation HOT 1
- how to change X-Axis data format in Vis.js
- Suggestion for showcase - museum-digital
- Select option list is not clickable in groups section
- Flicking a timeline element off of screen unable to drag other element
- Is it possible to have a single line be drawn with multiple colors based on the data?
- Timeline bug with safari βmoveToβ HOT 1
- Github Pages site for visjs.org down HOT 3
- Update items or remove
- Shorthand option for edge color being ignored
- Every time you update the "network" shape always changes, how can you make the shape unchanged? HOT 2
- Connector title disappears when (re-)opening a cluster HOT 2
- Looking for a plugin to draw such this graph online HOT 1
- Edge label at 0,0 HOT 1
- can we have items on either side of timeline(up and down)
- Showcase suggestion: libcolgraph
- Mark Original Start in Timeline Bar
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vis.