{"id":5669,"date":"2018-11-29T11:58:27","date_gmt":"2018-11-29T08:58:27","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5669"},"modified":"2026-04-28T16:12:46","modified_gmt":"2026-04-28T13:12:46","slug":"dhtmlxscheduler-5-1-horizontal-scroll-and-new-server-side-integrations","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxscheduler-5-1-horizontal-scroll-and-new-server-side-integrations\/","title":{"rendered":"dhtmlxScheduler 5.1: Horizontal Scroll for the Timeline and New Server-Side Integrations"},"content":{"rendered":"\n        <div class=\"info-block\">\n            <div class=\"info-icon\">\n                <svg viewBox=\"0 0 14 16\">\n                    <path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"><\/path>\n                <\/svg>\n\n                INFO\n            <\/div>\n\n            <div class=\"info-content\">\n                <p>\n                    For new clients, we recommend using <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/\" title=\"\">DHTMLX Scheduler<\/a> and \n                    integrating it with .NET by following our official <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/integrations\/dotnet\/howtostart-dotnet-core\/\" title=\"\" target=\"_blank\">guide<\/a>.                    \n                <\/p>\n            <\/div>\n        <\/div>\n    \n<p>In dhtmlxScheduler 5.1 we&#8217;re eager to present you with the two most long-awaited updates of the Timeline view &#8211; a horizontal scroll inside the Timeline and a major performance update of the Timeline view.<\/p>\n<p>However, we didn&#8217;t confine the release to these features. Now integrating your JavaScript scheduler with different server-side technologies will be smooth and easy with our brand new <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_guides.html\" rel=\"noopener\" target=\"_blank\">guides<\/a> and complete demos on <a href=\"https:\/\/github.com\/DHTMLX?utf8=%E2%9C%93&#038;q=scheduler-howto&#038;type=&#038;language=\" rel=\"noopener\" target=\"_blank\">GitHub<\/a> for Node.js, PHP, ASP.NET Core and Ruby on Rails.<\/p>\n<p>So here is <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/download.shtml\" rel=\"noopener\" target=\"_blank\">dhtmlxScheduler 5.1 trial version<\/a> &#8211; test it now and leave your feedback!<\/p>\n<h5>Horizontal Scroll in the Timeline View [PRO]<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/horizontal_scroll.gif\" alt=\"Horizontal scroll in the Timeline\" width=\"1013\" height=\"578\" class=\"aligncenter size-full wp-image-5670\" \/><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/samples\/06_timeline\/16_lines_performance.html\" rel=\"noopener\" target=\"_blank\">Check the sample> <\/a><\/p>\n<p>The highlight of v5.1 is the implementation of the horizontal scroll inside the Timeline, which offers the most convenient solution for surfing the calendar within impressively vast time intervals. Thus, managing events gets much easier, as end users may rapidly reach the necessary dates in the Timeline. You can find new properties for adding a horizontal scrollbar <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/timeline_view.html#horizontalscroll\" rel=\"noopener\" target=\"_blank\">in our docs<\/a>. <\/p>\n<p>We also added an <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/timeline_view.html#autoscrollconfiguration\" rel=\"noopener\" target=\"_blank\">autoscroll<\/a> option, so that end users could change the event&#8217;s duration or move it forward simply by dragging it along the Timeline while it&#8217;s being scrolled automatically. You can set up the speed and sensibility of the autoscroll in order to meet your requirements.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/horizontal_scroll2.gif\" alt=\"Autoscroll in the Timeline view\" width=\"1013\" height=\"578\" class=\"aligncenter size-full wp-image-5671\" \/><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/samples\/06_timeline\/16_lines_performance.html\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Smart Rendering and Performance Update of the Timeline View [PRO]<\/h5>\n<p>Before v5.1 the work of the Timeline view could become rather slow when large amounts of events and sections were displayed. The newly introduced smart rendering feature greatly optimizes the performance of the Timeline view by rendering only the rows, columns, and events, which users see on the screen. New elements are being rendered while users are scrolling through the Timeline.<\/p>\n<p>This update allows you to use large Timelines in your app without any kind of delays or lags from the UI. If you already have an application with the Timeline view, which shows around 100 sections or more, &#8211; this improvement should be noticeable. <\/p>\n<p><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/timeline_view.html#smartrendering\" rel=\"noopener\" target=\"_blank\">Smart rendering<\/a> is enabled in the scrollable Timeline by default.<\/p>\n<p>Please note that all these improvements required a significant rework of the Timeline markup, which affected all versions and modes of the Timeline view &#8211; Tree Timeline, Daily Timeline, Cells\/Bars modes.<br \/>\nYou might need to make some slight code changes in order to successfully migrate to the latest version. Please check our <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/migration_from_older_version.html#5051\" rel=\"noopener\" target=\"_blank\">migration notes<\/a> to find out more.<\/p>\n<h5>New Server-Side Integrations<\/h5>\n<p>Starting your work with dhtmlxScheduler will be much easier now, as we introduced several new guides with a step-by-step explanation of how to initialize Scheduler using different backend frameworks. Check the first bunch of guides devoted to <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_nodejs.html\" rel=\"noopener\" target=\"_blank\">Node.js<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_php.html\" rel=\"noopener\" target=\"_blank\">PHP<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_php_laravel.html\" rel=\"noopener\" target=\"_blank\">PHP\/Laravel<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_ruby.html\" rel=\"noopener\" target=\"_blank\">Ruby on Rails<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_dotnet_core.html\" rel=\"noopener\" target=\"_blank\">ASP.NET Core<\/a> and their <a href=\"https:\/\/github.com\/DHTMLX?utf8=%E2%9C%93&#038;q=scheduler-howto&#038;type=&#038;language=\" rel=\"noopener\" target=\"_blank\">online demos<\/a> on GitHub.<\/p>\n<p><a href=\"https:\/\/github.com\/DHTMLX\/scheduler-howto-node\" rel=\"noopener\" target=\"_blank\" style=\"display: inline-block; margin: 20px;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/node_small2.png\" display=\"inline-block\" alt=\"Node.js\" width=\"70\" height=\"77\" class=\"size-full wp-image-5688\"\/><\/a><a href=\"https:\/\/github.com\/DHTMLX\/scheduler-howto-php-slim\" rel=\"noopener\" target=\"_blank\" style=\"display: inline-block; margin: 20px;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/php_small2.png\" display=\"inline-block\" alt=\"PHP\" width=\"100\" height=\"52\" class=\"size-full wp-image-5686\" \/><\/a><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/howtostart_ruby.html\" rel=\"noopener\" target=\"_blank\" style=\"display: inline-block; margin: 20px;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/ruby_100.png\" display=\"inline-block\" alt=\"Ruby on Rails\" width=\"101\" height=\"76\" class=\"size-full wp-image-5695\" \/><\/a><a href=\"https:\/\/github.com\/DHTMLX\/scheduler-howto-laravel\" rel=\"noopener\" target=\"_blank\" style=\"display: inline-block; margin: 20px;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/laravel100.png\" display=\"inline-block\" alt=\"Laravel\" width=\"100\" height=\"86\" class=\"size-full wp-image-5697\" \/><\/a><a href=\"https:\/\/github.com\/DHTMLX\/scheduler-howto-dotnet-core\" rel=\"noopener\" target=\"_blank\" style=\"display: inline-block; margin: 20px;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/net_core100.png\" display=\"inline-block\" alt=\"ASP.NET Core\" width=\"100\" height=\"89\" class=\"size-full wp-image-5699\" \/><\/a><\/p>\n<p>We also invite you to write us what server-side frameworks you use, so that we could prepare integration guides that would be the most helpful for your work. Just leave a comment below or provide an answer through our <a href=\"https:\/\/dhx-surveys.typeform.com\/to\/ucmSHW\" rel=\"noopener\" target=\"_blank\">survey form<\/a>.<\/p>\n<h5>Adding a Header Label for Columns<\/h5>\n<p>One of the minor improvements of v5.1 is an ability to add a label above the section column of the Timeline:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/header_column900.png\" alt=\"Label for Column Section Header\" width=\"900\" height=\"428\" class=\"aligncenter size-full wp-image-5675\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/header_column900.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/header_column900-300x143.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/11\/header_column900-768x365.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<h5>Updating Scheduler.NET to the version 4.0<\/h5>\n<p>Apart from updating our JavaScript scheduling component, our dev team also rolled out a major update 4.0 of our Scheduler for ASP.NET. Now Scheduler.NET acquires all the latest features of dhtmlxScheduler: trendy Material skin, horizontal scroll in the Timeline view, smart rendering and performance update of the Timeline view.<\/p>\n<p>Hope you\u2019ll enjoy our release! To try out the latest version right now <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxScheduler\/download.shtml\" rel=\"noopener\" target=\"_blank\"> download the evaluation package here ><\/a><\/p>\n<p>Feel free to leave your feedback in the comments&#8217; section below and don&#8217;t forget to tell us which server-side framework you use for the future guides about server-side integration.<\/p>\n<p>Our customers will receive the news about the update and the latest PRO version 5.1 via email within 24 hours (or find the download link in the <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client&#8217;s Area<\/a>). <\/p>\n<h5>Related Material:<\/h5>\n<ul>\n<li>Documentation: <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/what_s_new.html\" rel=\"noopener\" target=\"_blank\">What&#8217;s new in v5.1<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/samples\/\" rel=\"noopener\" target=\"_blank\">Samples<\/a><\/li>\n<li>Server-side <a href=\"https:\/\/docs.dhtmlx.com\/scheduler\/guides.html\" rel=\"noopener\" target=\"_blank\">integration guides<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In dhtmlxScheduler 5.1 we&#8217;re eager to present you with the two most long-awaited updates of the Timeline view &#8211; a horizontal scroll inside the Timeline and a major performance &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":5694,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,1,38],"tags":[33,37,46,39,49,36,15,4],"class_list":["post-5669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-asp-net","tag-laravel","tag-nodejs","tag-php","tag-ruby-on-rails","tag-dhtmlxscheduler","tag-dhtmlx-updates"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5669","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\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=5669"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5669\/revisions"}],"predecessor-version":[{"id":15461,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5669\/revisions\/15461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5694"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}