{"id":4199,"date":"2017-08-18T18:54:52","date_gmt":"2017-08-18T14:54:52","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4199"},"modified":"2024-02-16T09:26:18","modified_gmt":"2024-02-16T06:26:18","slug":"zoom-the-scheduling-area-dhtmlx-scheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/zoom-the-scheduling-area-dhtmlx-scheduler\/","title":{"rendered":"Zooming through Time with DHTMLX Scheduler"},"content":{"rendered":"

Hello, guys! Are you looking for another way to make your scheduling apps handier? In case you are, I\u2019ll show you how to zoom in and out of timelines in DHTMLX Scheduler<\/a> just like you do it while viewing maps.<\/p>\n

I\u2019ll guide you through implementing zoom in Scheduler. This will let your end-users choose the types of the time scale and easily switch between them by a single turn of a mouse wheel. In the end, you\u2019ll create a scheduler like this:<\/p>\n

\"zoom<\/p>\n

It zooms through time and it\u2019s blue, just like the Tardis, isn\u2019t it? Well, are you sitting comfortably? Then I’ll begin.<\/p>\n

Creating Timelines<\/h2>\n

First of all, you need to include the necessary files and create a container for Scheduler on the page. If you are new to DHTMLX Scheduler, read a tutorial on how to create a scheduler on a page<\/a>.<\/p>\n

Next, initialize Scheduler and parse the data (here I have the data in the JSON format, but other formats are as well possible):<\/p>\n

scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>,<\/span>new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span>7<\/span>,<\/span>16<\/span>)<\/span>,<\/span>"week"<\/span>)<\/span>;<\/span>
\nscheduler.parse<\/span>(<\/span>sched_data,<\/span>"json"<\/span>)<\/span>;<\/span><\/div><\/div>\n

When you do this, you\u2019ll have a scheduler like this:<\/p>\n

\"zoomLive demo >><\/a><\/p>\n

Looks pretty confusing, too many things seem to happen at the same time. That\u2019s why you need timelines: they help structure events. Suppose you want to distribute events that are to be held in different places. Define them:<\/p>\n

var<\/span> sections=<\/span>[<\/span>
\n  {<\/span>key:<\/span>1<\/span>,<\/span> label:<\/span>"Room A"<\/span>}<\/span>,<\/span>
\n  {<\/span>key:<\/span>2<\/span>,<\/span> label:<\/span>"Room B"<\/span>}<\/span>,<\/span>
\n  {<\/span>key:<\/span>3<\/span>,<\/span> label:<\/span>"Room C"<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Let\u2019s create three configurations of the same timeline with different zooming levels: month, week and day. Here is the month level:<\/p>\n

scheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  name:<\/span> "timeline1"<\/span>,<\/span>
\n  x_unit:<\/span> "month"<\/span>,<\/span>
\n  x_date:<\/span> "%M"<\/span>,<\/span>
\n  y_unit:<\/span> sections,<\/span>
\n  y_property:<\/span> "section_id"<\/span>,<\/span>
\n  render:<\/span> "bar"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The other two levels are created by analogy, but with different x-scales:<\/p>\n

scheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  name:<\/span> "timeline2"<\/span>,<\/span>  
\n  x_unit:<\/span> "day"<\/span>,<\/span>
\n  x_date:<\/span> "%M %d"<\/span>,<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span>
\nscheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  name:<\/span> "timeline3"<\/span>,<\/span>
\n  x_unit:<\/span> "hour"<\/span>,<\/span>
\n  x_date:<\/span> "%H:%i"<\/span>,<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now let\u2019s add tabs for the different zooming levels:<\/p>\n

<div<\/span> id<\/span>=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style<\/span>=<\/span>"width:100%;height:100%"<\/span>><\/span>
\n  <div<\/span> class<\/span>=<\/span>"dhx_cal_navline"<\/span>><\/span>
\n    ...
\n    <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n    <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n    <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n  <\/<\/span>div<\/span>><\/span>
\n  ...
\n<\/<\/span>div<\/span>><\/span><\/div><\/div>\n

Good. Next, add the tab names before the initialization:<\/p>\n

scheduler.locale<\/span>.labels<\/span>.timeline1_tab<\/span> =<\/span> "Month"<\/span>;<\/span>
\nscheduler.locale<\/span>.labels<\/span>.timeline2_tab<\/span> =<\/span> "Week"<\/span>;<\/span>
\nscheduler.locale<\/span>.labels<\/span>.timeline3_tab<\/span> =<\/span> "Day"<\/span>;<\/span><\/div><\/div>\n

Now zooming levels are in place and I can add the final stroke for this step. Let\u2019s change the initialization a bit (you can initialize with any zooming level, while I\u2019ve chosen “month”):<\/p>\n

scheduler.config<\/span>.fix_tab_position<\/span> =<\/span> false<\/span>;<\/span>
\nscheduler.init<\/span>(<\/span>"scheduler_here"<\/span>,<\/span>new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span>7<\/span>,<\/span>17<\/span>)<\/span>,<\/span>"timeline1"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Note that in the first line I disabled the default position of tabs so that zooming tabs could take the position of the usual ones.<\/p>\n

At this stage you\u2019ll have a scheduler like this:<\/p>\n

\"zoom<\/p>\n

Still doesn\u2019t look right, though you can switch between the views by clicking the tab buttons. Let\u2019s configure our timelines.<\/p>\n

Configuring Timelines<\/h2>\n

Let\u2019s define additional properties that will help to display the scales right:<\/p>\n

scheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  \/\/...<\/span>
\n  x_step:<\/span> 1<\/span>,<\/span>
\n  x_size:<\/span> 12<\/span>,<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span>
\nscheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  \/\/...<\/span>
\n  x_step:<\/span> 1<\/span>,<\/span>
\n  x_size:<\/span> 7<\/span>,<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span>
\nscheduler.createTimelineView<\/span>(<\/span>{<\/span>
\n  \/\/...<\/span>
\n  x_step:<\/span> 2<\/span>,<\/span>
\n  x_size:<\/span> 8<\/span>,<\/span>
\n  x_length:<\/span> 12<\/span>,<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Besides, let\u2019s define the starting points for every zooming level. Without them, you might find yourself in quite unexpected time periods after every switch:<\/p>\n

scheduler.date<\/span>.timeline1_start<\/span> =<\/span> function<\/span>(<\/span>date)<\/span>{<\/span>
\n  return<\/span> new<\/span> Date<\/span>(<\/span>date.getFullYear<\/span>(<\/span>)<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span>
\n
\nscheduler.date<\/span>.timeline2_start<\/span> =<\/span> function<\/span>(<\/span>date)<\/span>{<\/span>
\n  return<\/span> new<\/span> Date<\/span>(<\/span>date.getFullYear<\/span>(<\/span>)<\/span>,<\/span> date.getMonth<\/span>(<\/span>)<\/span>,<\/span> date.getDate<\/span>(<\/span>)<\/span> -<\/span> date.getDay<\/span>(<\/span>)<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span>
\n
\nscheduler.date<\/span>.timeline3_start<\/span> =<\/span> function<\/span>(<\/span>date)<\/span>{<\/span>
\n  return<\/span> new<\/span> Date<\/span>(<\/span>date.getFullYear<\/span>(<\/span>)<\/span>,<\/span> date.getMonth<\/span>(<\/span>)<\/span>,<\/span> date.getDate<\/span>(<\/span>)<\/span>,<\/span> 8<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

Looks fine now:<\/p>\n

\"how<\/p>\n

Now let\u2019s add some gear to really zoom through time.<\/p>\n

Zooming through Timelines Enabled<\/h2>\n

First, add an event listener for the wheel event, which fires whenever you rotate a wheel button of your mouse or some other pointing device:<\/p>\n

document.querySelector<\/span>(<\/span>"#scheduler_here"<\/span>)<\/span>.addEventListener<\/span>(<\/span>"wheel"<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>
\n  \/\/change mode<\/span>
\n  var<\/span> state =<\/span> scheduler.getActionData<\/span>(<\/span>e)<\/span>;<\/span>
\n  var<\/span> mode =<\/span> scheduler.getState<\/span>(<\/span>)<\/span>.mode<\/span>;<\/span>
\n  var<\/span> num =<\/span> mode.substr<\/span>(<\/span>8<\/span>,<\/span>1<\/span>)<\/span>;<\/span>
\n 
\n  if<\/span> (<\/span>state &&<\/span> state.date<\/span>)<\/span>{<\/span>
\n    if<\/span> (<\/span>e.deltaY<\/span> <<\/span> 0<\/span>)<\/span>
\n      num++;<\/span>
\n    else<\/span>
\n      num--;<\/span>
\n   
\n    if<\/span> (<\/span>num><\/span>0<\/span> &&<\/span> num<<\/span>4<\/span>)<\/span>
\n      scheduler.setCurrentView<\/span>(<\/span>state.date<\/span>,<\/span> "timeline"<\/span>+<\/span>num)<\/span>;<\/span>
\n  }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The handler takes one parameter – the WheelEvent<\/em> object, which was used to return the current cursor-pointed date and section (with the getActionData(e)<\/em> method) and to define the new zooming level (by testing the deltaY<\/em> value). If the date and section of the timeline that were pointed with a cursor are defined, the name is changed and validated, and you\u2019ll see another level of the timeline.<\/p>\n

Okay. Next, to prevent you from zooming too fast and crashing somewhere far away, let\u2019s add four lines of code:<\/p>\n

var<\/span> last_used =<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>;<\/span>
\ndocument.querySelector<\/span>(<\/span>"#scheduler_here"<\/span>)<\/span>.addEventListener<\/span>(<\/span>"wheel"<\/span>,<\/span> function<\/span>(<\/span>e)<\/span>{<\/span>
\n  \/\/prevent too fast scrolling<\/span>
\n  var<\/span> time =<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>;<\/span>
\n  if<\/span> (<\/span>time -<\/span> last_used <<\/span> 200<\/span>)<\/span> return<\/span>;<\/span>
\n  last_used =<\/span> time;<\/span>
\n 
\n  \/\/change mode<\/span>
\n  \/\/...<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

If you try turning the wheel faster than 5 times per second, nothing will happen.<\/p>\n

Cool, now we have a nice blue tool for travelling between timelines.<\/p>\n

\"zoom<\/p>\n

Live demo >><\/a><\/p>\n

Conclusion<\/h2>\n

You\u2019ve done it<\/a>, you have a tool to view timelines from different perspectives by zooming. Time is not so different from space after all! This can be useful and convenient for scheduling apps, especially if they are full of events and your end-users would like to effortlessly zoom in and out of timelines to see both the details and the big picture. If you have any cool ideas of how to enhance Scheduler with some more useful features, I\u2019ll be happy to hear from you. See ya!<\/p>\n

Written by Asta Vebraite, a tech writer at DHTMLX<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Hello, guys! Are you looking for another way to make your scheduling apps handier? In case you are, I\u2019ll show you how to zoom in and out of timelines …<\/p>\n","protected":false},"author":101011,"featured_media":4215,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,14,15],"class_list":["post-4199","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-tips","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101011"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=4199"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4199\/revisions"}],"predecessor-version":[{"id":12153,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/4199\/revisions\/12153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/4215"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=4199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=4199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=4199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}