Show appointment information on click

src/appointment.php

@@ -69,5 +69,13 @@
         </div>
         <div class="response"></div>
         <div id="calendar"></div>
+        <div id="event-info"  style="display:none;">
+            <div id="event-patient"/></div>
+            <div id="event-description"/></div>
+            <div id="event-start"/></div>
+            <div id="event-end"/></div>
+            <button class="create_btn" type="submit" name="edit">Editar</button>
+            <button class="del_btn" type="submit" name="delete">Borrar</button>
+        </div>
     </body>
 </html>

src/appointment_feed.php

@@ -17,8 +17,10 @@ function renameArray($data){
     foreach($data as $row){
         $events[] = array(
             "id"   => $row["id"],
-            "title"   => "Cita de " . $row["apellido"],
+            "title"   => $row["apellido"] . ", " . $row["nombre"],
             "start"   => $row["fecha"] . " " . $row["hora"],
+            "description" => $row["observaciones"],
+            "patient" => $row["documento_identificativo"],
             "end"   => $row["fecha"] . " " . $row["end"],
         );
     }

src/calendar.js

@@ -1,30 +1,35 @@
  $(document).ready(function() {
-
     var queryString = window.location.search;
     var calendar = $('#calendar').fullCalendar({
 
-    editable: true,
+        editable: true,
 
-    header: {
-        left: 'prev,next,today',
-        right: 'month,agendaWeek,agendaDay'
-    },
+        header: {
+            left: 'prev,next,today',
+            right: 'month,agendaWeek,agendaDay'
+        },
 
+        events: "appointment_feed.php" + queryString,
 
-    events: "appointment_feed.php" + queryString,
+        selectable: true,
 
-    selectable: true,
+        selectHelper: true,
 
-    selectHelper: true,
+        select: function(start, end, allDay) {
+            $("#dialog-form").dialog({ modal: true, width:450});
+            var date = $.fullCalendar.formatDate(start, 'YYYY-MM-DD');
+            $("#fecha").val(date);
+        },
 
-    select: function(start, end, allDay) {
-
-        $("#dialog-form").dialog({ modal: true, width:450});
-
-        var date = $.fullCalendar.formatDate(start, 'YYYY-MM-DD');
-
-        $("#fecha").val(date);
-    }
+        eventClick: function(event) {
+            var start = $.fullCalendar.formatDate(event.start, 'HH:mm');
+            var end = $.fullCalendar.formatDate(event.end, 'HH:mm');
+            $("#event-patient").html("<b>DNI/NIE: </b>" + event.patient);
+            $("#event-description").html("<b>Observaciones: </b>" + event.description);
+            $("#event-start").html("<b>Comienzo: </b>" + start);
+            $("#event-end").html("<b>Fin: </b>" + end);
+            $("#event-info").dialog({title: event.title, width:450});
+        }
 
     });
 });

src/database.php

@@ -370,7 +370,7 @@ function configureCalendar($pdo, $data)
 
 function fetchCalendarEvents($pdo, $doctor)
 {
-    $query = "SELECT cita.id, fecha, hora, duracion, medico, observaciones, apellido, documento_identificativo from cita
+    $query = "SELECT cita.id, fecha, hora, duracion, medico, observaciones, nombre, apellido, documento_identificativo from cita
     INNER JOIN paciente ON cita.paciente = paciente.id
     WHERE medico=?";
     $result = $pdo->prepare($query);