The v7.0 update introduces several breaking changes.
CSS skins (themes) have been completely reworked and now utilize CSS variables. While the HTML structure of the component and CSS class names have mostly remained unchanged, CSS styles written for older versions of the Scheduler are likely no longer effective with v7.0.
For example, the following style was used to change the background color of an event:
<style> /*event in day or week view*/
.dhx_cal_event.manager_event div{
background-color: #009966 !important;
color: black !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.manager_event{
background-color: #009966 !important;
color: black !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.manager_event{
color: black !important;
}
</style>
Starting from v7.0, the same effect is achieved with the following style:
<style> .manager_event {
--dhx-scheduler-event-background: #009966;
--dhx-scheduler-event-color: black;
}
</style>
Check the available variables on the Skins Customization page.
Migration will require the rewriting of existing CSS to achieve the required design.
All themes are now embedded into a single dhtmlxscheduler.css file.
To activate a specific skin, use the scheduler.skin property:
scheduler.skin = "material";
Or the setSkin method:
scheduler.setSkin("material");
Note that scheduler.setSkin() will repaint the Scheduler.
If you use a skin other than the terrace, the following migration steps are required:
1) Replace the CSS file of the skin with the dhtmlxscheduler.css file:
<!-- OLD -->
<link rel="stylesheet" href="./codebase/dhtmlxscheduler_material.css" type="text/css">
<!-- NEW -->
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css">
2) Enable the required skin from javascript:
scheduler.setSkin("material");
scheduler.init("scheduler_here");
scheduler.xy settingsThe following scheduler.xy properties are no longer used:
The height of the corresponding elements is set by the styles below:
.dhx_cal_navline {
height: 40px;
}
.dhx_cal_event dhx_title {
height: 30px;
}
The default values of details_on_create and details_on_dblclick properties have changed from false to true.
The Material skin no longer imports the Roboto font by default.
If you use the Material skin, you need to import the font manually:
@import url(
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap'
);
Tooltips have a new API that provides easy attachment of tooltip to custom elements. See more details in the related article: Tooltips.
The Day/Week/Units views now have small padding that ensures there is always small empty space at the side of the column. It allows users to create new events by double-clicking on these empty areas.
To remove this padding, use day_column_padding:
scheduler.config.day_column_padding = 0;
Starting from v7.0, the import/export functionality is included into the Scheduler library.
Therefore, if you have already included https://export.dhtmlx.com/scheduler/api.js on your page to enable the online export service, for example:
<script src="codebase/dhtmlxscheduler.js"></script>
<script src="https://export.dhtmlx.com/scheduler/api.js"></script>
You need to remove the file and enable the export_api extension using the scheduler.plugins method:
scheduler.plugins({
export_api: true
});
The Bluebird library has been excluded from the Scheduler bundle. Promise now uses the native Promise implementation.
The newest update v6.0 introduces two major changes in the structure of the Scheduler package:
1) All files of extensions are now bundled with the dhtmlxscheduler.js file. Therefore, in order to activate any of extra extensions provided by DHTMLX Scheduler, you need to use the API call.
<script src="../codebase/dhtmlxscheduler.js"></script>
<script src="../codebase/ext/dhtmlxscheduler_active_links.js"></script>
or
import "dhtmlx-scheduler";
import "dhtmlx-scheduler/ext/dhtmlxscheduler_active_links";
Then you need to remove the extension file and enable the extension using the scheduler.plugins method:
scheduler.plugins({
active_links: true
});
See the full list of extensions here.
If you use a modified version of extension files or have developed custom extensions, include them as files on a page and they will work.
Note, that the dhtmlxscheduler_csp.js extension is completely removed and does not need to be enabled manually.
2) All locales are now embedded into the dhtmlxscheduler.js file. To activate them, use the API call.
scheduler.i18n.setLocale("de");
DataProcessor constructor has moved from the global dataProcessor function to the scheduler.DataProcessor function.
If you use the dataProcessor in your app, you'll need to update the code that initializes the dataProcessor:
// obsolete
var dp = new dataProcessor("/scheduler/backend/events");
dp.init(scheduler);
dp.setTransactionMode("REST", false);
This code above should be replaced with the following:
// good
var dp = new scheduler.DataProcessor("/scheduler/backend/events");
dp.init(scheduler);
dp.setTransactionMode("REST", false);
The recommended approach is to use the scheduler.createDataProcessor function:
// even better
var dp = scheduler.createDataProcessor({
url: "/scheduler/backend/events",
mode: "REST"
});
In this case, DataProcessor.init(scheduler) call is no longer required, DataProcessor.setTransactionMode can be called as usual if needed.
The dhtmlx object definition was removed from dhtmlxscheduler.js. Thus, some methods and global objects have been deprecated in v6.0.
1) The following methods have been deprecated and replaced with:
| Obsolete methods | Working methods |
| dhtmlx.alert | scheduler.alert |
| dhtmlx.confirm | scheduler.confirm |
| dhtmlx.modalbox | scheduler.modalbox |
| dhtmlx.uid | scheduler.uid |
| dhtmlx.copy | scheduler.copy |
| dhtmlx.mixin | scheduler.mixin |
| dhtmlx.defined | scheduler.defined |
| dhtmlx.bind | scheduler.bind |
| dhtmlx.assert | scheduler.assert |
| window.dataProcessor | scheduler.DataProcessor |
No changes in the arguments or behavior of the methods were made.
2) The following global objects have been deprecated:
If you still need these objects in you application, enable the legacy plugin:
scheduler.plugins({
legacy: true
});
The default handler for the swipe gesture has been disabled by default.
You can re-enable it using the scheduler.config.touch_swipe_dates config, as follows:
scheduler.config.touch_swipe_dates = true;
Box-sizing mode of event elements in Month View has been changed from content-box to border-box in all skins.
The affected elements are: .dhx_cal_event_clear and .dhx_cal_event_line.
It shouldn't cause any visible changes, but if you redefined the render of Month view events, or use a custom skin, you may need to take this change into account.
Since version 5.2 it is possible to drag events by any part of the body, not just by the header as it worked in the earlier versions. If you want to restore the previous functionality, make use of the drag_event_body and set it to false (by default the property is enabled).
scheduler.config.drag_event_body = false;
They still work, but will be removed in future. Here is how they should be replaced:
scheduler.attachEvent("onXLS",function(){}); →
scheduler.attachEvent("onLoadStart",function(){});
scheduler.attachEvent("onXLE",function(){}); →
scheduler.attachEvent("onLoadEnd",function(){});
Below there is the scheme of replacing previously used API:
Since v5.2 the default values of the xml_date config, and xml_date and xml_format templates are undefined. Thus if you haven't assigned any values to them, they won't work.
However, Scheduler will continue to use the old names of the config and templates, so if you've redefined those APIs in your code, they will work as before. For example:
// will work correctly
scheduler.templates.xml_date = function(datestring){
return new Date(datestring);
};
To restore the previous default date format, specify the setting below:
scheduler.config.date_format = "%m/%d/%Y %H:%i";
Since v5.2 Scheduler tries to automatically identify the format of dates that should be parsed, so there can be some changes in the work of related functions scheduler.date.str_to_date, scheduler.templates.format_date, and scheduler.templates.parse_date.
If you want to restore previous behavior and get dates in the format defined by the user, use the parse_exact_format configuration option:
scheduler.config.parse_exact_format = true;
In previous versions it was possible to set the value of the vertical setting of the Multiselect control as a string, like this:
{ name:"userselect", type:"multiselect", ..., vertical:"false" }
Since v5.2 the property takes just a boolean value, i.e. true or false.
{ name:"userselect", type:"multiselect", ..., vertical: false }
In case you've used the string "false" value for the vertical property, you need to change it into the boolean one.
Smart rendering and horizontal scroll features required a complete remaking of the timeline markup. It affected Timeline, TreeTimeline and all modes of these views.
The most notable change is that HTML elements TABLE, TR, TD were removed from the markup and replaced with DIVs with appropriate class names.
If you use table tags in CSS selectors for styling the timeline, an action will be needed in order to migrate such CSS. The overall DOM structure didn't undergo many changes, thus migration would mostly require rewriting several CSS selectors in order for them to match the new markup.
For the reference, here is a sample of CSS selectors before and after the update given below.
Before:
After:
Glossy and Classic skins were deprecated and removed since v5.0. If you use them, you'll either need to migrate to another skin or keep using a corresponding CSS file from an older version.
Release of v5.0 involves a major CSS overhaul, which may create issues with updating heavily CSS-customized applications: the existing styles may stop working due to the specificity of renewed dhtmlxScheduler styles. There is no general solution for this, the migration will require investigating and correcting CSS issues.
The update also fixes the POST (insert) route of dataProcessor in the REST mode, the request no longer sends a temporary event id to the server.
The following route:
POST /api/{tempId}
//e.g.
POST /api/1234567890
should be changed to this one:
POST /apiSince v.4.3 the extensions Week Agenda View, Grid View, Timeline View, Units View, Multisection Events are no longer available in the Standard Edition that is distributed under GNU GPL v2.
If you still want to use them, you may either continue using the version 4.2 (or older), or obtain either Commercial or Enterprise license.
Please check the license details here.
Public API is fully backward compatible.
The default skin is changed to "terrace", ext/dhtmlxscheduler_dhx_terrace.js is removed. To change the skin back to the classic one, just include the related CSS file (codebase/dhtmlxscheduler_classic.css). For more details check Skins.
multi_day is enabled by default, and if you want to revert such a behavior, add:
scheduler.config.multi_day = false;
Scheduler detects the used skin, based on the name of the CSS file, so if you are using a custom skin (which is not based on "terrace"), rename its css file to dhtmlxscheduler_{skin name}.css. Also, you can disable the skin auto-detection by adding the following line before scheduler.init:
scheduler.skin = "{skin name}";
The following API is deprecated: getEventText, getEventStartDate, getEventEndDate, setEventText, setEventStartDate, setEventEndDate (those methods are still available, but will be removed in Scheduler 5.x).
Instead, you can use scheduler.getEvent() and set/get properties directly from the event object.
Fully backward compatible
Fully backward compatible
Public API is fully backward compatible.
Public API is fully backward compatible.
For private API, check Scheduler 3.0.
sources/locale_se.js => sources/locale_sv.js
sources/locale_recurring_se.js => sources/locale_recurring_sv.js
codebase/dhtmlxgrid_recurring.js => codebase/ext/dhtmlxgrid_recurring.js
codebase/dhtmlxgrid_recurring.css => codebase/ext/dhtmlxgrid_recurring.css
codebase/dhtmlxgrid_units.js => codebase/ext/dhtmlxgrid_units.js