almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.86k stars 1.48k forks source link

The timeline hour classes #4235

Open aanders50 opened 5 years ago

aanders50 commented 5 years ago

Hello! Not sure if this is a bug or if I simply cannot figure out the proper manner in order to get the hour classing to appear on the timeline. In the documentation under Grid Backgrounds it says you can get special classing such as vis-h0, vis-h1, ..., vis-h23, however I only seem to get vis-today. I have tried all manners of options changes, adjusting max and min, and changing the time axis properties but I never can get the hour classing to appear.

The only classing I can seem to get is vvis-grid vis-vertical vis-minor vis-today vis-odd with the vis-odd alternating with the vis-even class.

The only additional information in the documentation is Depending on the zoom level, the grids get certain css classes attached however there is no elaboration for that and/or what zoom options will cause specific classing to appear. My current scenario is I lock the grid to just the current day from 6 AM to 11:59 PM, I do not allow zooming, and steps are on a hour basis. However, I need to style specific hours like vis-h18 (or 6 PM).

My options object is as follows.

        mvm.options = {
            editable: false,
            zoomable: false,
            horizontalScroll: true,
            showCurrentTime: false,
            showMajorLabels: false,
            showMinorLabels: true,
            format: {
                minorLabels: function(date, scale, step) {
                    return "<strong>" + moment(date).format('h a') + "</strong>";
                },
                majorLabels: function(date, scale, step) {
                    return "<strong>" + moment(date).format('h a') + "</strong>";
                }
            },
            min: gstart,
            max: gend,
            timeAxis: {
                scale: 'hour',
                step: 1
            },
            orientation: {
                axis: "both"
            }
        }

Again, not sure if I am just doing something or if there is a bug. have spent quite a bit of time messing with options and looking at other random examples but have not found any new information to get the hour classing to work.

Thank you!

jgorene commented 5 years ago

I also needed to understand that and for a while I wondered how it worked.

In fact, the style is applied dynamically, so that some styles are applied according to the zoom level, while others are removed, allowing "to visualize data in time". As far as I know, anyway ;)

However, a link to a jsbin might help you and also this issue that is somewhat nearer to your request, it seems to me.