如何为全日历使用不同的主题

Question

我正在尝试将主题添加到与页面其余部分分开的完整日历中。无论我使用什么 jquery ui 主题都会接管页面上的其他元素。我尝试使用高级主题设置并选择 css 范围，但它不起作用。我已经读到这个范围在 datepicker (http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/) 上有问题，所以我假设这就是它在日历上不起作用的原因。

我尝试用 javascript 包装日历 div：

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

当我检查元素时，它会显示带有此类的新 div，但作用域主题仍然不起作用。

我上面包含的页面上的 cmets 说要这样做：

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

但这仅适用于日期选择器小部件，而不是完整日历。

我在 javascript 方面没有那么丰富的经验。谁能告诉我如何调整它以与全日历一起使用？或者以其他方式分隔完整日历的主题？

谢谢。

Answer 1

在构建 fullCalendar 实例时，您需要将 theme 选项设置为 true。在那里，您在页面上拥有的所有 jQuery UI 主题样式都将应用于它。

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

      all other options you were setting

    */
} );