To update on the side projects I’ve been working on:
Medication Reminder – What was tried:
I tried using jQuery iCalendar but couldn’t figure out how to get it to actually display a calendar or link it to a calendar (it appears it’s only for converting an event into an iCal format) so I decided not to go down that route.
Medication Reminder – What has worked:
I’ve had a large amount of success using jQueryUI’s Datepicker (now rolled into jQueryMobile 1.4). Since the intended platforms are mobile devices and intended use is for medication reminders, for those that take a lot of medications, having individual visible events on a calendar would either extend the cells of the calendar or overflow on top of the days below it or be cutoff all together resulting in not all the “advertised” information being displayed, I opted to just color the cell in the calendar if there was SOMETHING for that day. Then, when the user click on that day, a window pops up detailing what all is to be taken that day, and if in the past, when the medication was actually taken.
By using the “beforeShowDay” option, I can check to see if there are any medications to be taken that day and set the highlight class as necessary. I also realized that since the class name the beforeShowDay option expects is just a string, I could have multiple classes like: “highlight big-date” (trivially) to highlight the date on the calendar and make the date number really big.
With this, I got the idea to include the date itself as a “class” so I could quickly pick the EXACT DOM element for a specific date and perform other DOM manipulations using jQuery (e.g.: if mobile device, do nothing special, but if desktop browser / tablet / sufficiently large display, inject medication name / time).
With the “medication-event” rendering problem solved (mostly), I’m now focusing on how to store the “medication-events” in a (relatively) small and robust manner (similar to iCal), specifically as it relates to recurring events. I’ve drawn a lot of inspiration from Google Calendar as far as how to present the input of a “medication-event” (“if it’s not broken, don’t fix it” and “don’t reinvent the wheel” come to mind) and from this thread on webdeveloper.com on how to store the “medication-event”. It has also provided some insight on how to render the recurring events as well as how to handle exceptions (e.g.: take daily at 7 am, except on weekends take at 9 am).
One other feature I implemented at the last minute to the “Add event” form is adding an auto-complete functionality for the medication name input. Not knowing what’s “common” prescribed medications, I just took a list from needymeds.org and modified the auto-complete to display the suggestions in a scrollable window (to prevent it from “breaking” the flow of the input page). An added benefit is that the brand names are included so the user can type either the generic / chemical name or the brand name and still find the medication (hopefully).
Medication Reminder – What remains:
Once the “medication-event” handling is complete, I’m ready to merge the calendar and the easy “one-touch taken medication” features and move on to packaging the web app in Phonegap to be able to leverage the native notification / popup features of Android/iOS.
You can view the event calendar at: http://beta.bradleymize.com/cal/
You can view the “one-touch taken medication” feature at: http://beta.bradleymize.com/pills/