Meteor Scheduler Data Package Grid Doesn't appear

Scheduler Javascript
#1

I have the dhtmlx-scheduler and dhtmlx:scheduler-data packages installed in an app I’m developing.

When the page loads, the calendar grid doesn’t appear unless I click a calendar view.

Here is my template code:

<!-- /client/techReviews/_reviewSchedule.html -->
<template name="_reviewSchedule">
  <div class="row">
    <div class="col-sm-12">
      <h1>Calendar
        <small>Tech Reviews</small>
      </h1>

      <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:500px;'>
        <div class="dhx_cal_navline">
          <div class="dhx_cal_prev_button">&nbsp;</div>
          <div class="dhx_cal_next_button">&nbsp;</div>
          <div class="dhx_cal_today_button"></div>
          <div class="dhx_cal_date"></div>
          <div class="dhx_cal_tab" name="day_tab" style="right:332px;"></div>
          <div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>
          <div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
          <div class="dhx_cal_tab" name="year_tab" style="right:140px;"></div>
        </div>
        <div class="row">
          <div class="dhx_cal_header">
          </div>
          <div class="dhx_cal_data">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Here is how I init the scheduler (note, code is in CoffeeScript):

# /client/techReviews/_reviewSchedule.coffee
Template._reviewSchedule.onRendered ->
  scheduler.init "scheduler_here", new Date(), "month"
  scheduler.meteor ReviewEvents
  scheduler.meteorStop()
  return

Attached is a screenshot of the page when it loads.

Thanks for your help!

myMspCalendarIssue.JPG1253×629 24.7 KB

#2

Thought it might be useful for those not familiar with CoffeeScript if you saw the JavaScript it compiles to:

Template._reviewSchedule.onRendered(function() {
  scheduler.init("scheduler_here", new Date(), "month");
  scheduler.meteor(ReviewEvents);
  scheduler.meteorStop();
});
#3

The issue is with Bootstrap’s tabs. To get it to work, you need to wrap the init functions in a .on() handler like this:

Template.templateName.onRendered(function() {
  $('[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    scheduler.init("scheduler_here", new Date(), "month");
    scheduler.meteor(Events);
    return scheduler.meteorStop();
  });
});