FullCalendar 不在聚合物项目中呈现

Question

我正在尝试在我的聚合物项目中使用 FullCalendar 创建一个日历。我按照 FullCalendar 文件夹中提供的演示页面进行操作，但是，除日历外，所有内容都会呈现。有没有一种特殊的方法可以将 Jquery 插件与聚合物项目一起使用？以下是我尝试使用 FullCalendar 的方式。

导入了样式和脚本。

<link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<link rel="stylesheet" href="fullcalendar/fullcalendar.print.css"/>

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>

html 标记

<div id="calendar"></div>

Javascript 创建 table

<script>
$(document).ready(function() {
  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: '2016-01-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2016-01-01'
            },
            {
                title: 'Long Event',
                start: '2016-01-07',
                end: '2016-01-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2016-01-11',
                end: '2016-01-13'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T12:30:00'
            }
        ]
    });
});
</script>

Answer 1

我假设问题出在两个包含的 jQuery 库中（一个来自 code.jquery.com（第一个 script 标签），另一个来自 fullcalendar（第一个 script 标签）第 3 个 script 标签）。请尝试删除其中一个。
浏览器开发人员控制台中是否有任何错误消息？

Answer 2

当使用第 3 方库时，以下步骤对我很有用：

1) 创建一个包装器元素（例如 fullcalendar-wrapper.html ）将所有脚本引用放入外部所需脚本

2) 创建一个包含日历的自定义组件（例如 calendar-test.html ）

像任何其他依赖项一样导入 fullcalendar-wrapper
使用组件的'ready'事件初始化日历。因此，您应该将 document.on('ready') 下的代码移动到聚合物组件的 'ready' 事件中

现在您正在页面准备就绪时进行设置，但 Polymer 系统可能还没有准备好。

FullCalendar 不在聚合物项目中呈现

FullCalendar not rendering in polymer project

javascript

jquery

fullcalendar

polymer

polymer-starter-kit