4

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.

ldellj
  • 41
  • 1
  • 1
  • 2

1 Answers1

5

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

    */
} );
JAAulde
  • 19,250
  • 5
  • 52
  • 63
  • 1
    Theme is set to true. The problem is giving the fullcalendar a DIFFERENT theme than the rest of the page. – ldellj Dec 15 '11 at 16:41
  • You need to write CSS which targets your calendar element and its descendants and which overrides the UI theme which is being applied to the rest of the page. That is purely in the realm of CSS. – JAAulde Dec 15 '11 at 17:03
  • 2
    Look at the answer by user406905 for this post http://stackoverflow.com/questions/4250458/how-to-apply-multiple-jquery-ui-themes This is what I'm trying to do for fullcalendar. – ldellj Dec 15 '11 at 17:29