Time line but over month..

Scheduler Javascript
#1

Hi there! I’ve been a long term customer and have been using the pro version for a while, but I never looked at the scheduler.

I need to do a page something like the “timeline” but I must be able to “zoom out” so I can see the event spreading over days, weeks… I am developing a recoding studio booking program, and I need to see:
on the x-axis : the days
on the y-axis : the studios (about 15)
inside the boxes, the various bookings… in some case a studio can be multibooked, because I have “tentative” (unconfirmed) bookings. I would like to show these in different colours (i.e confirmed vs unconfirmed)

Thank you for your help,
Francesco

#2

Нou can have a “zooming”, it possible to change settings of timeline dynamically. So by pressing some button you can change x_unit from day to week for example.

scheduler.matrix["timeline"].x_unit = "week"; ... change other settings ... scheduler.updateView();

You may use “slots” mode, in which you can use different coloring and labeling for whole cell. ( coloring is possible in “bars” mode as well - but will require a bit more complicated coding )

samples/06_timeline/01_slots.html

#3

Stan! It’s you again!

Thanks, as usual, for a prompt answer.

#4

OK, I’ve looked at the samples, played with them, and, setting teh createTimeLineView I get what I want.
The best view IS The bars unfortunately, so HOW do I colour them??

Thanks,
F

#5

You can define scheduler.template.timeline_cell_class template, which allows to define custom css class for each cell.

#6

Thanks Stan…

so, i define my various classes such as

tl_red
tl_blue
tl_green

but then how do I apply them to the individual cell?

#7

you can do like this :

scheduler.templates.TheView_cell_class = function(evs,x,y){ if(evs[0].text=="hello") return "tl_red"; }

Then if on a cell on the view called “TheView”, there is an event with the text “hello”, this cell will use the “tl_red” css class

#8

If you look in the timeline samples at 01_slots and look on line 68, you will find an example of how it can be done.

I used that as a starting point when I wanted to do something similar to you.

#9

Thank you very much btex!