{"id":10951,"date":"2023-02-14T19:00:11","date_gmt":"2023-02-14T16:00:11","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10951"},"modified":"2023-05-02T12:45:27","modified_gmt":"2023-05-02T09:45:27","slug":"dhtmlx-event-calendar-2-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-event-calendar-2-0\/","title":{"rendered":"DHTMLX Event Calendar 2.0 with Timeline and Custom Views, Recurring and Unassigned Events, and More"},"content":{"rendered":"

It is high time to start writing the DHTMLX release history of 2023. So we are excited to present DHTMLX Event Calendar 2.0! This major update of our JavaScript Event Calendar<\/a> comprises a pack of top features and improvements for productive event management. The most notable novelties are a Timeline view mode with a column for unassigned events, support for recurring events, and an ability to set custom view modes. We also added new controls for switching between view modes in the toolbar, the ability to dim past events, a current time marker in Agenda and Timeline views, and auto scrolling for drag-and-drop actions. Besides, there are numerous enhancements to facilitate your experience with DHTMLX Event Calendar.<\/p>\n

Download a free trial of DHTMLX Event Calendar v2.0 ><\/a><\/strong><\/p>\n

Now we proceed with the main aspects of this release in more detail.<\/p>\n

Timeline View Mode<\/h5>\n

Let us start with the new view mode, namely Timeline. It becomes the sixth option in the list of available built-in Event Calendar views, including Day, Week, Month, Year, and Agenda. But contrary to all existing view modes available by default, Timeline is optional. <\/p>\n

Considering the great popularity of this view in the DHTMLX Scheduler component, it can become a big asset for your DHTMLX Event Calendar as well. The Timeline view provides a clear overview of planned appointments arranged from left to right along the timeline. But the main value of the Timeline view is the possibility to assign events to resources (employees, equipment, etc.).<\/p>\n

The example below shows how your event calendar built with DHTMLX may look in all view modes. To select a specific one, you should use special controls in the toolbar. <\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

By default, our Calendar displays events in the Week mode. But you can set Timeline or any other available view as the initial option by specifying the corresponding value in the mode<\/a> config:<\/p>\n

\/\/ create Event Calendar<\/span>
\nnew<\/span> eventCalendar.EventCalendar<\/span>(<\/span>"#root"<\/span>,<\/span> {<\/span>
\n   mode:<\/span> "timeline"<\/span>
\n   \/\/ other configuration parameters<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

There are two ways to set the Timeline mode dynamically:<\/p>\n