<div id="orbit_calendar">
  <div id="sec1">
    <div class="btn-toolbar" id="navigation">
      <div id="calendar-nav">
        <div class="btn-group">
          <button class="btn btn-default btn-sm" id="prev_month_btn">
            <i class="icon-chevron-left"></i>
          </button>
          <button class="btn btn-default btn-sm" id="next_month_btn">
            <i class="icon-chevron-right"></i>
          </button>
          <button class="btn btn-default btn-sm" id="today_btn"><%=t('calendar.today')%></button>
        </div>
      </div>
    </div>
    <div class="form-inline" id="range_selection"></div>
  </div>
  <div id='sec3' class="btn-toolbar">
    <div class="btn-group calendar_mode">
      <div data-list="modes_info" data-level="0">
        <button class="btn btn-default mode_switch btn-sm {{active_class}}" data-mode="{{mode}}" >{{trans}}</button>
      </div>
    </div>
    <button id="refresh_btn" class="btn btn-default btn-sm">
      <i class="icons-cycle"></i>
    </button>
  </div>
  <div id="view_holder">
    <h3 id="current_title" class="current_day_title">
      <span style="display: none;">placeholder</span>
    </h3>
    <div id="calendar"></div>
    <div id="calendar_agenda"></div>
  </div>
</div>
<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
<div id="calendar-loading"></div>

<script type="text/javascript">
  var calendar = new Calendar("#calendar","{{page_id}}");
</script>