How to use different themes for fullcalendar

Question

I am trying to add a theme to the full calendar separately from the rest of the page. Regardless of the jquery ui theme I'm using, the other elements on the page are used. I tried to use advanced theme settings and select the css scope, but it does not work. I read that this area has problems with datepicker (http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/), so I guess that’s why it doesn’t work on the calendar.

I tried to wrap a javascript div calendar:

<script type="text/javascript"> $(document).ready(function () { $('#calendar').wrap('<div class="Datepicker"></div>'); }); </script> 

When I check the element, it shows a new div with this class, but the topic with scope does not work yet.

The comments on the page I included above say to do this:

 $(".datepicker").datepicker().closest('body').find('#ui-datepicker-div').wrap('<div class="cal"></div>'); 

but it was intended only for the datepicker widget, not for the full calendar.

I am not that good at javascript. Can someone tell me how to adapt this to work with fullcalendar? Or another way to separate the theme for a complete calendar?

Thanks.

Answer 1

You need to set the theme to true when instantiating a fullCalendar. There you go, all the jQuery UI styling styles that you have on your page will be applied to it.

 $( '#calendar' ).fullCalendar( { theme: true/*, all other options you were setting */ } );