How to use different theme for fullcalendar

Question

I am trying to add a theme to full calendar separate from the rest of the page. Whatever jquery ui theme I use takes over other elements on the page. I tried using advanced theme settings and choosing a css scope, but it's not working. I've read that this scope has problems with datepicker (http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/), so I'm assuming that this is why it's not working on the calendar.

I've tried to wrap the calendar div with javascript:

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

When I inspect the element it shows the new div with this class, but the scoped theme still isn't working.

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

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

but this was intended for just the datepicker widget and not the fullcalendar.

I'm not that experienced in javascript. Can anyone tell me how to adapt this to work with the fullcalendar? Or another way separate the theme for the fullcalendar?

Thanks.

Answer 1

You need to set the theme option to true when building the fullCalendar instance. There forward, all jQuery UI theme styling which you have on your page will be applied to it.

$( '#calendar' ).fullCalendar( {
    theme: true/*,

      all other options you were setting

    */
} );