dhtmlxscheduler css problem

I am using bootstrap.css as well, so i don’t know if maybe bootstrap overrides certain classes of dhtmlx scheduler, but it is quite annoying having to look up every class and changing it manually. Plus I noticed that the sidebar of the event, has the same class for the body as the event box has, so it I change it there it will change everywhere leading to troublesome issues.

Anyone have any experience with this?


There is knonw conflict between scheduler and bootstrap ( bootstrap sets some default styling for all elements on a page, which breaks scheduler )

Try to update css file with the attached one.
dhtmlxscheduler.css.zip (7.97 KB)

I changed this in my css:

*, *:before, *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

    .jumbotron {

And now it works fine, but i’ll try with your css file too to see which works best. Thanks!

Customized css contains the similar fix, it sets correct box-sizing for elements inside of scheduler ( so outside of scheduler styles of bootstrap will be active )

Do you have a zip with dever version of the dhtmlxscheduler_glossy.css and imgs_glossy? The standard version fixed my Bootstrap issue, just that my boss wants the glossy version.



Here it is.
The package contains only css, as there is no changes in the images
dhtmlxScheduler_css.zip (25.8 KB)

Fantastic. Thanks.


Worked like a charm



One problem. When I include bootstrap.css the tooltip stops working?

I mentioned it on another post but didn’t get a reply.

I’m only using bootstrap for a menu on top of the calendar, so there must be a way to isolate namespace or something…



I finally got bootsrap and its menu to run in its own namespace

But adding the bootstrap.css still breaks the tooltip on the calendar


  1. edited bootstrap.css and replaced ‘body’ with ‘bs’

  2. then wrapped the boostrap menu with ‘bs’


What I don’t understand is why the default dhtmlx css doesn’t interfere with the tooltip but the glossy one does

I will try the classic one to see if I have more luck


Tried all 3 dev version that make bootstrap work. All hose the DHTMLX tooltip. So for the moment I haven’t found a solution.



I’m going to try and revert to the original css and add the code that was given to me as an alternate to using the dev code


we’ve confirmed that schedulers tooltip interferes with .tooltip class defined in bootstrap css, thank you for the reporting. I’ll provide a fix in the nearest time.

This is related to the issue described in this post

As a quick solution, add this css to the page:.dhtmlXTooltip.tooltip{ opacity: 1; }

It worked awesome. Bootstrap menu is on top of the calendar with no issue.

Thanks so much,


I am having a strange problem here, I can see the Scheduler in IE 10 or later but not in 8 and 9. In IE7 the scheduler is working perfect… only issue is with the bootstrap… (forget it… we r going to block the use of IE7 any how). In IE*=8 & 9 bootstrap is rendering all its elements perfectly but i can’t see the Scehedluer at all. In code view all the table and data are seen… but cant see it on screen. What could be wrong?

it’s really hard to say without a demo. Could you please give us a possibility to inspect the issue?