Webix 8.0: Scheduler and Gantt, New Controls in Webix Core

In the middle of the yellow leaves season we are excited to announce the annual grand release of Webix. In version 8.0 you can find new complex widgets for planning and scheduling: Scheduler and Gantt. Also, the release includes updates for Spreadsheet, horizontal Timeline, new controls for time and color selection, dynamic tooltips and enhanced Datatable performance.

Webix 8.0: Scheduler and Gantt, New Controls in Webix Core

Read more to consider each feature in detail.

Scheduler Reborn

We are really happy to present the reborn Scheduler widget, which comes to replace the existing mobile one and can work in both modes – desktop and compact. With this widget you can enjoy all the necessary features for planning:

  • view events by day, week, month or as an agenda list
  • create and edit events in the side panel
  • drag and resize events to change their date and time
  • group events into separate calendars
  • switch off editing by going into the read-only mode

Live demo >>

The widget is supplied with NodeJS and GoLang backend and preserves the data format from a Mobile Scheduler for convenient migration.

But please note that the new Scheduler has the totally new API and structure. So if you are an active user of Mobile Scheduler, do not upgrade directly, but first study the documentation and play with a trial version.

Gantt Chart

Together with Scheduler, the new Webix Gantt widget comes to life. You can use it to manage projects via the convenient interface, namely:

  • create, view and edit tasks
  • establish links between tasks and remove them
  • drag and resize tasks to modify their start date and duration
  • configure scales with cells by day, week, month or year

Live demo >>

The widget also boasts desktop and compact modes. Moreover, Scheduler and Gantt are tuned to work with the same data, so you can use them together to visualize the same workflow.

Updates for Spreadsheet

In Webix 8.0 several small yet important updates were made to make Spreadsheet widget even more convenient.

Firstly, you can export Spreadsheet data to PDF with all its sheets and cell styles.

webix.toPDF("spreadsheet1", {styles:true,sheets:true, autowidth:true});

Live demo >>

Secondly, there are several additional options in toolbar menus, which help tuning the grid. Now you can set cell border type alongside with its color and reset row height or column width to default sizes.

Now let’s browse the updates in Webix Core.

Horizontal Timeline

In response to frequent requests, the Timeline widget has been extended with an ability to align timeline items horizontally. Here you can place items to the top or bottom of the scale or in turn.


Live demo >>

New palette for Color Board

With an updated ColorBoard you can select colors from the modern Material palette. Additionally, there’s a possibility to remove a line of gray shades.

Live demo >>

The new color palette is incorporated into the ColorPicker and color editors. However, if you are used to the old palette, you can get it back by a single setting.

Widgets for precise color and time selection

Color Selector

However, the ColorBoard always has a fixed color range. With the new Color Selector widget you can set an arbitrary color by changing its hue and shade.

The widget can be used standalone or as a dropdown of ColorPicker:

Live demo >>

{ view:"colorpicker", value:"#751FE0", suggest:{
   type:"colorselect", body: { button:true }
}

Timeboard

The TimeBoard widget allows setting time units via the convenient interface. You can drag sliders to set minutes, hours and seconds.


Live demo >>

The widget can be used standalone or as a dropdown of DatePicker:

{ view:"datepicker", type:"time", suggest:{
   type:"timeboard", body: { button:true }
}

Overflow-Only tooltips

Webix tooltips became even more flexible. Starting from 8.0 you can show them only if there is not enough space to display text in the target area.


Live demo >>

Enhanced performance for Datatable header

This is rather an invisible update, but it significantly enhances Datatable performance. We have removed the HTML table from the header, and as a result, wide Datatables render much quicker. Also, this update fixes the frequently reported bug with zooming in Chrome.

However, please consider the breaking changes it brings: you may need to adjust header styling and custom header elements in your Datatables.

What’s Next

For more information on Webix 8.0 features and updates, go to the What’s new page. To get the library itself, upgrade via npm, Client area or click the big purple button to download the library.

Download Webix 8.0

We had to delay Report Builder and upgrades for Spreadsheet to deliver them fully featured and tested. They are still on the way and most likely to be released at the end of November, just before the wintertime snow covers the land and Christmas rush comes to the streets.

Stay healthy and tuned for the updates and feel free to share the feedback and ideas in the comments section below.