在 polymer 中渲染核心动画页面部分 fullcalendar.io

Question

我有一个应用程序设置，使用核心动画页面在我的部分之间进行转换。在一个部分中，我试图渲染 fullcalendar 插件（http://fullcalendar.io/). Using the sbg-fullcalendar element to do this: https://github.com/Smorgasbord-Development/sgb-fullcalendar

如果我将元素放在应用程序的第一部分，效果会很好。应用加载并在日历呈现的 domReady 事件上。但是，我想包含在任何部分中，但当我这样做时它不会呈现。

我更新了 sbg-calendar 元素以监听 core-animated-pages-transition-end 事件。日历元素确实捕捉到事件并尝试创建日历，但它仍然没有呈现。

渲染问题可能是因为 jQuery 选择器在阴影 dom 中不起作用？我对聚合物还很陌生，不确定它的很多内部工作原理。

这是我的索引页。

<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>

和日历页面：

<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>

我也一直在使用 Rob Dodson 的联系人应用程序作为我的应用程序的示例。

Answer 1

我已经通过使用 domReady 方法在我的一个部分（我还使用了核心动画页面）上成功呈现了完整的日历。在你的情况下我会这样做：

<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>

不要忘记从元素内部 link css 文件。希望对您有所帮助！

在 polymer 中渲染核心动画页面部分 fullcalendar.io

Rendering fullcalendar.io in polymer a core-animated-pages section

jquery

fullcalendar

polymer

core-elements