Saturday 18 October 2008

Create a web based Drag and Drop Calendar

As part of my "spreading the domnio love" I have for the past year or so been a "yoda" to a Notes Developer who wanted to start branching out into more web based apps. Now in typical DYM form fate does not thrust me an apprentice with whom I can share the odd beer at the weekend. Oh NO! My "Luke Skywalker" does not live in Ireland! C'est la vie :-)

Anyway she asked me the other day how she could make one of her CRM calendar facilities a bit flashier and more modern and I like a fool said "why don't you do it in AJAX and while you are at it incorporate Drag and Drop?"
"Oh that would be good" she said "How would I do that?". My bluff was well and truly called! I said I would have a look at it this evening and send her an example over the weekend. After a certain amount of head scratching and asking myself "How would Chris Blatnick do it?" I fired up the DYM PC and started to code.

One of the problems with calendars and domino has been how absolutely SHITE they look on the web and building any sort of functionality into them was a labour of hercules which involved far to much futtering about with $ fields and the like. My non-domino alter ego PHPYouWillYouWill (tm) gave me a stout dig in the ribs and whispered in my ear, go on break the 11th commandment, use the domino server as a back end server and do nearly everything in JS. I know that this in some quarters sufficient for my domino woggle to be ceremonially crushed as LS. However in mitigation my design runs quite happily on servers V6 and above and the Domino Web Server way back then was a bit ... well it was a lot ... EUCK.

The premise of this example is simple, you have two forms Customer which stores customer data and Appt which stores an Appointment with a customer on a particular day. This data needs to be presented in a MONTH view to the user. The users need to be able to schedule a meeting with a customer on a particular day so they also need to be able to
a) Find a customer in the application
b) Drag the customer onto a date cell which will create an APPT form in the back end NSF

I am used to the YUI framework and one of these days I will get all DOJO but for the moment I know what I am doing with YUI and it has a nice easy D&D implementation.
You register the dragable object and target objects, define a couple of handler functions and Robert is your mothers brother.

Now please remember this is a simple app written as an example of "how I would start to" rather than an actual full functioning app and it was written in 3 hours this evening. Anyway it looks like this, (Click on image for a better look see)

A: Controls for moving the viewable month around.
B: Search Bar á la Google that allows typeahead look up of the customers.
C: Results from the search appear here.
D: An Item being dragged from the list to the calendar.
E: As the Customer passes over a calendar cell the cell is highlighted.
F: An existing Appointment in the calendar.

I used YUI 2.2.4. as the framework for the AJAX calls and DOM manipulation.

Like I said it looks kinda better than the ordinary one and isn't all that complicated at all (it took me 3 hours to code up from scratch!) and will run happily on a V6 onwards server you don't need any on the V8 fancy pants stuff and all the YUI stuff is contained in the NSF.

If anyone is interested an uncommented version of the file can be downloaded here.
Download it, Sign it, pop it on your server and goto crm.nsf/calendar.html

If you think it is useful let me know and I will definitely pop the commented version up on OpenNtf (once i have commented it that is!)

Disqus for Domi-No-Yes-Maybe