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


i have app setup using core-animated pages transition between section. in 1 section trying render fullcalendar plugin (http://fullcalendar.io/). using sbg-fullcalendar element this: https://github.com/smorgasbord-development/sgb-fullcalendar

this works great if put element in first section of app. app loads , on domready event calendar renders. however, want include in section , when doesn't render.

i've made updates sbg-calendar element listen core-animated-pages-transition-end event. calendar element catch event , tries creates calendar, still doesn't render.

could rendering issue because jquery selectors don't work in shadow dom? i'm new polymer , unsure lot of inner workings.

here's 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 example app too.

i've succeded rendering fullcalendar on 1 of section (i used core-animated-pages) using domready method. how in 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 link css file inside of element. hope help!


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more