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

Question

我正在尝试将主题添加到与页面其余部分分开的完整日历中。无论我使用什么 jquery ui 主题都会接管页面上的其他元素。我尝试使用高级主题设置并选择 css 范围，但它不起作用。我读过该范围的日期选择器存在问题(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，但作用域主题仍然无法正常工作。

我在上面包含的页面上的评论说要这样做:

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

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

我对 javascript 没有那么丰富的经验。谁能告诉我如何使其适应全日历？或者另一种方式来分离全日历的主题？

谢谢。

Answer 1

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

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

      all other options you were setting

    */
} );