How to load dhtmlx Mobile Scheduler in acontainer

Discontinued products DHTMLX Touch
#1

I am loading the scheduler by parsing json data coming form the server, however I want to load it inside div container, I want to show page header and footer, how can I do that. Here is how I initialize it and load it
dhx.ready(function () {
dhx.ui.fullScreen();
dhx.ui({
view: “scheduler”,
id: “scheduler”
});

      });

‘’’
$$(“scheduler”).parse(model, “json”);

#2

You can use container property with id of the html container where you want to create a scheduler:

The other possible solution is to use layout (if footer and header are dhtmlxTouch components):

... dhx.ui({ rows:[ { template: "Header"}, { view: "scheduler", id: "scheduler" }, { template: "Footer"} ] }); ...

In this example I add “template” rows. You can choose any other view (toolbars for example)

#3

I used div container sample and it didn’t look right, it looked collapsed inside the div and didn’t adjust to screen size

#4

hello,

scheduler will be adjusted to screen size only if you are using automatic container definition (do not set “container” property). Otherwise, you will have to set container sizes manually.

#5

I was able to set the height of the container using jQuery, it worked in portrait mode, however it got messy when changing the orientation to landscape mode, I tried to change the width on onorentationchange event but it didn’t seem to have an effect unless I change the scheduler div width, but doing so caused the scheduler to be messed up when changing to portrait mode again and also didn’t look right in month view.
Any work around I can use to make this works and looks right in both portrait and landscape mode?
Here is the script I used

function setPositions() {
var width = jQuery(window).width();
var height = jQuery(window).height();

        jQuery("#scheduler-container").height(height);
        jQuery("#scheduler-container").find("div").width(width * 0.85);
        jQuery("#scheduler-container").width(width * 0.85);
        jQuery(".dhx_scroll_cont").width(width * 0.85);
     
}
$(document).ready(function () { setPositions() })

$(window).resize(function () { setPositions() })

Thank you.

#6

You should use adjust() method to set view sizes according to sizes of its container:

document.getElementById(“scheduler-container”).style.width = “…”;
document.getElementById(“scheduler-container”).style.height = “…”;

$$(“scheduler”).adjust();

#7

Thank you so much!