在聚合物项目中不渲染全日历
FullCalendar not rendering in polymer project
我正在尝试在我的聚合物项目中使用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
<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>
使用第三方库时,以下步骤对我很有用:
1)创建一个包装器元素(例如fullcalendar-wrapper.html)在里面把所有脚本引用到外部所需的脚本
2)创建一个将具有日历的自定义组件(例如日历测试.html
-
像导入任何其他依赖项一样导入完整日历包装器
-
使用组件的"ready"事件来初始化日历。因此,您应该将document.on('ready')下的代码移动到聚合物组件的"ready"事件
现在,您正在页面准备就绪时进行设置,但聚合物系统可能尚未准备就绪。
我可以假设问题出在两个包含jQuery
库中(一个来自code.jquery.com
(第一个script
标签),另一个来自fullcalendar
(第三个script
标签)。请尝试删除其中一个。
浏览器开发人员控制台中是否有任何错误消息?
相关文章:
- JavaScript打印功能使日历停止工作
- 用于搜索的聚合物嵌套绑定
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- primefaces日历可以禁用过去的日期和时间吗
- 聚合物0.5.5:核心列表中的条件模板和/或模板动态参考
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 如何在谷歌日历图表中使用布尔型列
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- Json在完整日历中对数据进行了编码
- 如何在模板聚合物中使用元素函数
- 聚合物dom重复问题
- 将到达日历中的2天添加到离开日历中
- 聚合物是一个框架而不是一个库.如何模块化地使用web组件
- 如何在下拉列表中选择完整的日历月份和年份
- 谷歌公共日历链接没有'不工作(完整日历)
- 使用AJAX将日期从SQL服务器传递到jQuery日历
- 为网站表单创建一个专业的日历
- 如何在完整日历中的当天点击时显示活动详细信息
- 聚合物铁形式验证至少选中一个复选框
- 在聚合物项目中不渲染全日历