Drupal: I’m learning how to be a JQuery/Date+Calendar ninja! =)

Our customized Date+Calendar-based Drupal event calendar is coming along quite nicely. The information architect’s design called for extensive customizations, such as:

  • hiding the year view
  • creating a context-sensitive year navigator that displays the entire year, and linking that to the title of the image
  • adding AJAX effects
  • adding a pop-up callout with three of the day’s events
  • displaying times in the user’s timezone generally, and in the user’s timezone and the event’s timezone on the actual event page
  • including dates for the previous month in the month view
  • allowing people to subscribe for notifications for new events in their interest group
  • allowing people to get iCal feeds for their events, all the events, or a group’s events, and these feeds should work without login
  • allowing people to sign up for e-mail reminders

We went with Date+Calendar instead of Event because Date+Calendar seemed more up to date, and its integration with Views meant that it was easy to add in domain access and other constraints. I learned quite a lot of new things in the process of implementing these features, such as:

  • writing a lot of Javascript using jQuery in order to bind events and do AJAX calls
  • writing test cases to check event subscription, event notification, timezone handling, and so on
  • programmatically creating a CCK node type with a date field
  • overriding calendar.inc to modify the way Drupal prepares the calendar
  • overriding calendar.theme to modify the way Drupal presents the calendar
  • making my own set of functions to generate the year navigator, based on the year view in calendar.inc

It took me a bit of time to figure out how this Date+Calendar AJAX patch worked, and I ended up modifying it extensively. I had been getting confused by mini= and view=ajax and all the other parameters floating around. I tried different approaches, including creating a callback function that generated just the HTML for the block, but then I found myself passing in too many parameters to control the URLs for the links.

My aha! moment was when I realized that the way the patch was handling the AJAX was to generate the entire page. When it got to processing the calendar block in the sidebar, the code checked for the $_GET[‘view’] parameter, and if an AJAX view was requested, it would print out the block and exit without printing the rest of the page. While that worked for the general case, we needed to modify our code so that the calendar blocks don’t appear on the calendar detail pages, so I wrote some Javascript code that requested a page within the right context.

This approach of generating the whole page didn’t quite work when it came to the subscription form that we embedded in event node page templates, though, because it printed out the node content before it generated the form. I used jQuery to retrieve the entire page, and then I extracted just the DIV I wanted to keep.

I still don’t like fussing with CSS (particularly when it comes to collapsing borders or dealing with browser issues), so I’ll leave that in the capable hands of our information architect. But now I’m the jQuery ninja on our team, too, and I know I can rock CCK+Views and calendars for future projects. =D

(p.s. Left out details, but if you’re curious about any of the bullet points, comment and I might flesh it out into its own blog post!)

4 responses to “Drupal: I’m learning how to be a JQuery/Date+Calendar ninja! =)”

  1. Nat says:

    Hey Sacha, I stumbled upon your blog looking for help with the Calendar module. It sounds like you’ve got your head around this pretty well! I Managed to setup a test page for my calendar and have most of the functionality working correctly. However my design calls for a popup of a day’s events if you hover over a certain day.

    I noticed that in the default day view for an event, clicking on the event title will bring up a popup of that event’s details. I need that functionality to occur on the small month view of the calendar.

    It seems like you were trying to achieve this functionality too. Did you have any luck? If so, do you have any pointers?

    Thanks …

  2. Sacha Chua says:

    Yup, I used JQuery to add a click handler. I had a div that I loaded the day popup contents into using AJAX, and I made that a modal dialog. I modified calendar.inc and calendar.theme so that the day view printed simplified contents immediately if called through AJAX. Hope that helps! I got a lot of inspiration from http://drupal.org/node/154479.

  3. Yabuya says:

    Salam, Sacha.

    Any chance we’ll see some Drupal/Notes integration modules?

  4. I am also learning a lot trying to make at least 6 months in mini-calendar block pre-loaded, avoiding excessive hitting of server. Could you give some tips about it, like hooks of calendar module. Any help would be apreciated. thnks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>