Using multiple jQuery Plugins to record date and time
In the initial days of beginning my work on what would become DriveTime I had my basic concept of what I wanted to achieve. A calendar application that factored in travel time when scheduling events.
In my planning stages I knew there were two things I did not want to have to hand roll. First and primary among these was a calendar that was user friendly. Having to set up a calendar with all the date information broken down by days, months, and years all with a nice UI could have cost me a lot of time and with a three week deadline looming I decided to find something that already existed. This was found in the form of FullCalendar.
The second thing I wanted to find already done was a clean system for users to input date and time information when creating events. When mentioning this to my instructor at The Iron Yard, he found pickadate.js which seemed to be all I wanted.
So now that I had these two plugins ready to do what I wanted and the Google Maps API I figured all would be smooth sailing from here. Oh how wrong I was. It seems that the two plugins and Google all liked their time to be dealt with in different formats.
I already knew going in that Google Maps gave me time in seconds for travel time. Which for my purposes in testing it before building the app I had already converted to minutes for easier display of how long trips would take.
This was fortunate for me because I soon found that pickadate.js (or more specifically its pickatime.js) could give me my time in multiple forms but the only way to get everything at once was to read it out in minutes. So at this point things were still not terrible as I already was doing everything in minutes.
Though it got worse since at the early stages I was using the JavaScript Date Constructor as well. And while the Date Constructor can accept time in multiple forms I found it most happy with time in terms of milliseconds. So after doing my math in minutes I would have to convert it down to milliseconds for display purposes with the date constructor.
Well once I got this figured out I was ready to start showing events on the calendar. Unfortunately FullCalendar liked all things in terms of hours, minutes, days, months, and years all broken out like a normal individual would read. Well this turned out to be a blessing in disguise because this made me realize that if I was going to do all these calculations anyways I did not need the Date Constructor which allows my functionality to work better cross browser. So I made these calculations and with only one hiccup I finally had things working somewhat correctly.
That one hiccup being that FullCalendar and most date and time calculations in JavaScript read months by numbers ranging from 0 to 11 instead of 1 to 12. So in my initial posting of my events they all were a month ahead of where they should be.
Once the month issue was sorted it was semi smooth sailing other than having to go back to do a lot of date based calculations for events that might start or end in different months and years to make them wrap properly. Though with all these date and time calculations the JavaScript files for DriveTime are a mess of time calculations and conversions.
What I learned from this whole venture is that when dealing with date and time and using plugins one must do more reading before adding them to an application. This is to make sure that all plugins, API's and pre-existing code all work semi well without the need for too much cross time conversion. There was a lot more I wanted to do with DriveTime before my initial deadline that did not get done do to having to make sure all dates and times were calculated correctly.
With that said FullCalendar, pickadate.js, and Google Maps API are all great tools and I would use them again, just not all in the same application. If you want more information on any of them there are links to them in DriveTime (on the about page) which can be found here.
