Putting the mobile scheduler inside a div

Webix JS
1

Hi technical support,

I would like to put my mobile scheduler (http://202.75.84.150/mobile/showScheduler.php) inside a

in order to show the top navigation bar and side bar, just like http://202.75.84.150/mobile/searchAvailableRm.php.

Is there are any way to do it?

2

Same as with any other webix ui you can use container property

webix.ui({
	view: "scheduler",
        container:"id_of_container_div",
	id: "scheduler",
	data: postdata,
	datatype:"json"					
});
3

container property is added, but it becomes like this

http://202.75.84.150/mobile/showScheduler.php

Any idea could fix this?

4

You need to define some fixed height for container DIV or as part of scheduler’s configuration.

By default, if size is not defined in component’s config, component takes the height of HTML container.

5

Something wrong I found in day view of mobile scheduler,

http://202.75.84.150/mobile/showScheduler.php

Some of the events are started at 10:30am, but the box of event was shown below a little bit of 10:30am in day view.

Could you please advise how to fix this?

6

Corruption caused by Bootstrap
Try to add the next styles on the page

.webix_dayevents_event_item {
  box-sizing: content-box;
}
.webix_dayevents_scale_item {
  box-sizing: content-box;
}
7

It looks better after adding those styles. However, the event still display under the line a little bit.

You could see clearly when you zoom in the page.

8

Change the first of above css classes like next

.webix_dayevents_event_item {
  box-sizing: content-box;
  margin-top: -1px;
}

it will fully fix the css conflict.