I want to use DHTMLX Scheduler on my project and I have tried with testing demo web application and It’s working fine.
But when I open my web application on short window then It’s menu control overlap with each other.
Please suggest me how can I use scheduler with Responsive CSS.
Thakns in advance!
There is no any special technique. If you are using only default buttons - the scheduler will work fine on majority of devices. ( for small screen devices - there is a separate “mobile scheduler” )
Hi,
if you still need a responsive header for the scheduler, you can hide the default header and implement custom one(simple div with buttons, placed above the scheduler)
Hide the default header:
CSS:.dhx_cal_navline{
display: none;
}and JS:
scheduler.xy.nav_height = 0;
All controls placed in the header uses public API of the component, so you can create the same ones and bind them to the scheduler.
Custom buttons that supposed to change displayed date or view can call scheduler.setCurrentView:
docs.dhtmlx.com/scheduler/api__s … tview.html
docs.dhtmlx.com/scheduler/api__s … state.html
Label with displayed date range can be refreshed on ‘onViewChange’ event, with code like following:[code]scheduler.attachEvent(“onViewChange”, function(){
var state = scheduler.getState();
var date_to_str = scheduler.templates[state.mode + “_date”];
datePlaceholder.innerHTML = date_to_str(state.min_date, state.max_date, state.mode);