tools/pharos-dashboard/templates/booking/booking_calendar.html

   1 {% extends "dashboard/table.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block extrahead %}
   7     <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}"
   8           rel='stylesheet'/>
   9     <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}"
  10           rel='stylesheet'/>
  11 {% endblock extrahead %}
  12
  13 {% block content %}
  14     <div class="row">
  15     <div class="col-lg-8">
  16         <div class="container-fluid">
  17             <div class="panel panel-default">
  18                 <div class="panel-heading">
  19                     <i class="fa fa-calendar fa-fw"></i>Calendar
  20                 </div>
  21                 <div class="panel-body">
  22                     <div id='calendar'>
  23                     </div>
  24                 </div>
  25                 <!-- /.panel-body -->
  26             </div>
  27             <!-- /.panel -->
  28         </div>
  29     </div>
  30
  31     <div class="col-lg-4">
  32         <div class="panel panel-default">
  33             <div class="panel-heading">
  34                 <i class="fa fa-edit fa-fw"></i>Booking
  35             </div>
  36             <div class="panel-body">
  37                 <div id="booking_form_div">
  38                     {% bootstrap_form_errors form type='non_fields' %}
  39                     <form method="post" action="" class="form" id="bookingform">
  40                         {% csrf_token %}
  41
  42                         <div class='input-group' id='starttimepicker'>
  43                             {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  44                         </div>
  45                         <div class='input-group' id='endtimepicker'>
  46                             {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  47                         </div>
  48                         {% bootstrap_field form.purpose %}
  49
  50                         {% buttons %}
  51                             <button type="submit" class="btn btn btn-success">
  52                                 Book
  53                             </button>
  54                         {% endbuttons %}
  55                     </form>
  56                 </div>
  57             </div>
  58         </div>
  59     </div>
  60 {% endblock content %}
  61
  62 {% block extrajs %}
  63     <script type="text/javascript">
  64         var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}"
  65         var user_timezone = "{{ request.user.userprofile.timezone }}"
  66     </script>
  67
  68     <script src={% static "bower_components/moment/moment.js" %}></script>
  69     <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
  70     <script type="text/javascript"
  71             src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
  72     <script src={% static "js/fullcalendar-options.js" %}></script>
  73     <script src={% static "js/datetimepicker-options.js" %}></script>
  74     <script src={% static "js/booking-calendar.js" %}></script>
  75 {% endblock extrajs %}