Meteor Scheduler Data Package Grid Doesn't appear

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">
        <small>Tech Reviews</small>

      <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 class="row">
          <div class="dhx_cal_header">
          <div class="dhx_cal_data">

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

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

Attached is a screenshot of the page when it loads.

Thanks for your help!

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");

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('', function(e) {
    scheduler.init("scheduler_here", new Date(), "month");
    return scheduler.meteorStop();