when adding appointment calendar allows to select hour

smash/web/templates/appointments/add.html

@@ -7,6 +7,10 @@
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
 
+  <!-- fullCalendar 2.2.5-->
+  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.min.css' %}">
+  <link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.print.css' %}" media="print">
+
   {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
@@ -55,8 +59,17 @@
   				</div>
   			{% endfor %}
       </div>
+      <div class="col-md-6">
+    		<div class="box box-primary">
+    			<div class="box-body no-padding">
+    				<div id="calendar"></div>
+    			</div>
+    		</div>
+    	</div>
 		</div><!-- /.box-body -->
 
+
+
 		<div class="box-footer">
 			<div class="col-sm-6">
 				<button type="submit" class="btn btn-block btn-success">Add</button>
@@ -66,6 +79,8 @@
 			</div>
 		</div><!-- /.box-footer -->
 	</form>
+
+
 </div>
 
 {% endblock %}
@@ -78,6 +93,8 @@
 
 	<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
 	<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
+  <script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
+	<script src="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.min.js' %}"></script>
 	<script>
 		$(function () {
 			$('#table').DataTable({
@@ -88,6 +105,52 @@
 			  "info": true,
 			  "autoWidth": false
 			});
+
+      $('#calendar').fullCalendar({
+				header: {
+					left: 'prev,next today',
+					center: 'title',
+					right: 'month,agendaWeek'
+				},
+				editable: false,
+        dayClick: function(date, jsEvent, view) {
+               var dateString = date.format();
+               if (dateString.indexOf("T")>=0) {
+                 dateString=dateString.replace("T"," ");
+               } else {
+                 dateString=dateString+" 09:00";
+               }
+               document.getElementById("id_datetime_when").value = dateString;
+
+           },
+        eventClick: function(calEvent, jsEvent, view) {
+
+          var dateString = calEvent.start.format();
+          if (dateString.indexOf("T")>0) {
+            dateString=dateString.replace("T"," ");
+          } else {
+            dateString=dateString+" 09:00";
+          }
+          if (dateString.indexOf("+")>=0) {
+            dateString= dateString.substring(0,dateString.indexOf("+"));
+          }
+          document.getElementById("id_datetime_when").value = dateString;
+
+        },
+				events: [
+        {% for appointment in full_appointment_list %}
+          {
+            title: '{{ appointment.title }}',
+            start: '{{ appointment.datetime_when | date:"c" }}',
+            end: '{{ appointment.datetime_until | date:"c" }}',
+            color: '{{ appointment.color }}',
+            subject_id: '{{ appointment.visit.subject.id }}',
+            id: '{{ appointment.id }}'
+          },
+        {% endfor %}
+          ],
+			});
+
 		});
 	</script>
 

smash/web/views.py

@@ -345,6 +345,7 @@ def appointment_details(request, id):
 
 
 def appointment_add(request, id):
+	full_list = Appointment.objects.all()
 	if request.method == 'POST':
 		form = AppointmentAddForm(request.POST, request.FILES)
 		form.fields['visit'].widget = forms.HiddenInput()
@@ -355,7 +356,7 @@ def appointment_add(request, id):
 		form = AppointmentAddForm(initial={'visit': id})
 		form.fields['visit'].widget = forms.HiddenInput()
 
-	return wrap_response(request, 'appointments/add.html', {'form': form, 'visitID': id})
+	return wrap_response(request, 'appointments/add.html', {'form': form, 'visitID': id, 'full_appointment_list': full_list})
 
 def appointment_edit(request, id):
 	the_appointment = get_object_or_404(Appointment, id=id)