Compatible with Twitter Bootstrap

Scheduler Javascript
#1

Hi, I am interested in using dhtmlxscheduler. But I am using Twitter Bootstrap for my current website, is that compatible with your product?

Thanks a lot

#2

There is no known conflicts, as far as I can see they both can be used in the same time.

#3

Thanks! I will try

#4

Hi,

are you sure about that?

I created a layout in bootstrap and wanted to attach the div to my dhtmlxLayout.
But as soon as I attach the div the divs are not ordered the way they are without the dhtmlxLayout:

here is an example: http://pastebin.com/KKNf0EbF

If I attach the container div the input and and textareas are not ordered correctly :confused:

#5

Are we talking about scheduler or layout :slight_smile: ?

Scheduler was designed to be inited in any html container, so if you have div on the page with non-zero width and height - you can init scheduler in it.

In case of layout situation is more complex.
It has two main usecases

  • initing on document.body - full screen layout
  • initing on some container with fixed height and width

Creating layout without container tag, or on container without fixed width and height - will have hardly predictable results.

#6

I did the download of new version of scheduler today and I found two problems with bootstrap:

1- problem with ‘dhx_marked_timespan’ class
I fixed this problem adding in css:

.dhx_cal_container .dhx_cal_data .dhx_marked_timespan { margin-left:0; }

2-HighLight of row (samples:10/4)
I have not idea how I can fixed it :frowning:

I found another problem, but it is not related with bootstrap: with ‘unit_tab’, there is no class for today.

#7

Sorry, the second error is with the sample 09_api/05_mouse_over_highlight.html.
It doesn’t work with bootstrap.

#8

Hello,

Indeed Bootstrap uses following rule:

[class*="span"] { float: left; min-height: 1px; margin-left: 20px; }
which is applied to all elements whose class includes “span”. Scheduler uses “.dhx_marked_timespan”.

Best regards,
Ilya

#9

Thanks, Ilya!
And about the problem between sample ( 09_api/05_mouse_over_highlight.html) and bootstrap, do you know how fix it? I know that is something with hover…

#10

It’s exactly that problem. We are adding divs with “dhx_marked_timespan” class and bootstrap set float: left and margins. That’s not good.

Best regards,
Ilya

#11

Might not be a solution in your circumstances but I added the following to my site css.

[class*="dhx"] { box-sizing: content-box !important; -moz-box-sizing: content-box !important; }