I have an app setup using core-animated pages to transition between my section. In one section I am trying to render the fullcalendar plugin ( http://fullcalendar.io/ ). Using the sbg-fullcalendar element to do this: https://github.com/Smorgasbord-Development/sgb-fullcalendar
This works great if i put the element in the first section of my app. The app loads and on the domReady event the calendar renders. However, I want to include in any section and when I do it doesn't render.
I've made updates to sbg-calendar element to listen for the core-animated-pages-transition-end event. The calendar element does catch the event and tries creates a calendar, but it still doesn't render.
Could the rendering issue be because a jQuery selectors don't work in the shadow dom? I'm very new to polymer and unsure about a lot of its inner workings.
Here's my index page.
<core-animated-pages id="pages" selected="{{selected}}" transitions="cross-fade fade-slide-up fade-scale" fit>
<section layout vertical>
<categories-page class="page" id="categories" cross-fade?="{{largeScreen}}" fade-slide-up?="{{!largeScreen}}" heading="{{heading}}" flex></categories-page>
</section>
<section layout vertical>
<calendar-page class="page" cross-fade?="{{largeScreen}}" fade-slide-up?="{{!largeScreen}}" heading="{{heading}}" flex></calendar-page>
</section>
</core-animated-pages>
and Calendar Page:
<link rel="import" href="../base-page/base-page.html">
<!-- Main -->
<div main layout vertical>
<core-header-panel id="headerPanel" mode="seamed" flex>
<core-toolbar>
<paper-icon-button icon="menu" core-drawer-toggle>
</paper-icon-button>
<div id="title" flex>{{heading}}</div>
<paper-menu-button id="menuBtn" noink>
<paper-icon-button icon="more-vert" noink></paper-icon-button>
<paper-dropdown class="dropdown" halign="right">
<core-menu class="menu">
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
<paper-item>Feedback</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
<div class="content" style="max-height:1000px;">
<sgb-fullcalendar id="calendar" defaultView="month"></sgb-fullcalendar>
</div>
</core-header-panel>
</div>
</template>
<script>
(function () {
Polymer({
willPrepare: function () {
this.super();
},
getUrl: function (idx) {
console.log(window.location.pathname + '/' + idx);
return '/subjects/' + idx;
}
});
})();
</script>
I've been using Rob Dodson's contacts app as an example for my app too.
I've succeded rendering the fullCalendar on one of my section (I also used the core-animated-pages) by using the domReady method. This is how I would do it in your case :
<polymer-element name="calendar-page" attributes="Your Attribute">
<template>
<style>
:host {
display: block;
}
</style>
<link rel='stylesheet' href='../fullcalendar/fullcalendar.css'>
<div id='calendar'></div>
</template>
<script>
Polymer("calendar-page",{
domReady: function() {
$(this.$.calendar).fullCalendar({
weekends: false ,
allDaySlot: false,
minTime : "06:00:00",
maxTime : "18:00:00",
defaultView: 'agendaWeek',
header: {left:'title', center: 'agendaDay,agendaWeek,month', right: 'today prev,next'},
googleCalendarApiKey: 'YourApiKey',
events: {
googleCalendarId: 'YourCalendarId',
},
eventClick: function(calEvent, jsEvent, view) {
//console.log(calEvent);
return false;
},
})
},
});
</script>
Don't forget to link the css file from inside of your element. Hope this help!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.