Tuesday, October 26, 2010

View Appointment Schedule

After comparing the design of two calendars that I liked, I decided to combine the features that I liked from both of them. Both were iCal-like calendars eg. google or yahoo calendars. However, one used dhtml to achieve the iCal effect while the other used ajax. I did not write the jquery or the css that controls the calendar I used it from a static calendar done by stephano verna http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery [accessed 09/09/2010].

My calender is dynamiclly generated I used the date/time  and mktime functions from the php manual and css and jquery to achieve the same effect. The day an appointment is scheduled during the month changes colour (blue). When the mouse is passed over the highlighted day a popup appears to show a list of the patients, doctors, time, treatment and the date was also included because of the width of the popup(it covers the dates near it). This will help to identify which day is being viewed.

Currently appointments are scheduled for October 14th and 18th.




The delete and edit appointment links on the pop-up was changed  and moved to the views instead. so now the views for all the appointments listed and the appointments for the day will now be used to edit and delete appointments.

Final Look


View All Appointment in DB


View Appointments Listed for a Chosen Date only






This was included to show that the appointment counter does indeed work and it subtracts the number added from the total allowed per day to let the person making the appointments know how many appointments they can still make on the chosen date.
Code for the counter:


Passing ID to edit Appoinment
Edit Appointment


1 comment: