view/theme/frio/templates/events_js.tpl

   1 <div class="generic-page-wrapper">
   2         {{$tabs}}
   3         {{include file="section_title.tpl" title=$title pullright=1}}
   4
   5         {{* The link to create a new event *}}
   6         <div class="pull-right" id="new-event-link">
   7                 <button type="button" class="btn-link page-action faded-icon" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
   8                         <i class="fa fa-plus"></i>
   9                 </button>
  10         </div>
  11
  12         {{* We create our own fullcallendar header (with title & calendar view *}}
  13         <div id="fc-header" class="clear">
  14                 <div id="fc-header-right" class="pull-right">
  15                         {{* The dropdown to change the callendar view *}}
  16                         <ul class="nav nav-pills">
  17                                 <li class="dropdown pull-right">
  18                                         <button class="btn btn-link btn-sm dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="false">
  19                                                 <i class="fa fa-angle-down" aria-hidden="true"></i> {{$view}}
  20                                         </button>
  21                                         <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views">
  22                                                 <li role="presentation">
  23                                                         <button role="menuitem" type="button" class="btn-link" onclick="changeView('changeView', 'month');$('#events-calendar').fullCalendar('option', {contentHeight: '', aspectRatio: 1});">{{$month}}</button>
  24                                                 </li>
  25                                                 <li role="presentation">
  26                                                         <button role="menuitem" type="button" class="btn-link" onclick="changeView('changeView', 'agendaWeek');$('#events-calendar').fullCalendar('option', 'contentHeight', 'auto');">{{$week}}</button>
  27                                                 </li>
  28                                                 <li role="presentation">
  29                                                         <button role="menuitem" type="button" class="btn-link" onclick="changeView('changeView', 'agendaDay');$('#events-calendar').fullCalendar('option', 'contentHeight', 'auto');">{{$day}}</button>
  30                                                 </li>
  31                                                 <li role="presentation">
  32                                                         <button role="menuitem" type="button" class="btn-link" onclick="changeView('changeView', 'listMonth');$('#events-calendar').fullCalendar('option', 'contentHeight', 'auto');">{{$list}}</button>
  33                                                 </li>
  34                                         </ul>
  35                                 </li>
  36                         </ul>
  37                 </div>
  38
  39                 {{* The buttons to change the month/weeks/days *}}
  40                 <div id="fc-fc-header-left" class="btn-group">
  41                         <button class="btn btn-eventnav" onclick="changeView('prev', false);" title="{{$previous.1}}"><i class="fa fa-angle-up" aria-hidden="true"></i></button>
  42                         <button class="btn btn-eventnav btn-separator" onclick="changeView('next', false);" title="{{$next.1}}"><i class="fa fa-angle-down" aria-hidden="true"></i></button>
  43                         <button class="btn btn-eventnav btn-separator" onclick="changeView('today', false);" title="{{$today}}"><i class="fa fa-bullseye" aria-hidden="true"></i></button>
  44                 </div>
  45
  46                 {{* The title (e.g. name of the mont/week/day) *}}
  47                 <div id="event-calendar-title"><h4 id="fc-title"></h4></div>
  48
  49         </div>
  50
  51         {{* This is the container where the fullCalendar is inserted through js *}}
  52         <div id="events-calendar"></div>
  53 </div>