Josh Schumacher: A PHP Developer

The biggest and the best in the Northwest

Josh Schumacher: A PHP Developer random header image

Playing well together: Prototype JS and PHP

March 2nd, 2007 · 4 Comments

I’ve decided that manipulating dates client side is a mess. I’ve been working on a multi-user php calendar for the past few months. One of the features I’m most proud of is an availability chart similar to a feature outlook has so you can schedule a meeting with multiple people and see when everyone is free and busy.

Availability ViewSince I’m using Prototype for my javascript library already, I took advantage of the Prototype Window Class to make modal and dialog windows. One of the downsides to this is it adds another step of complexity to ensuring everything is properly synchronized. For example, my scheduler window has to maintain in sync with it’s parent window if dates where changed at that level.

To start off, I create actions for nextDay() and prevDay(). These are simply fired onclick() on buttons with corresponding labels.

  1. function nextDay()
  2. {
  3. updateAvailabilityChart('next');
  4. }

Next we’ll define the updateAvailabilityChart() function. The arrayInviteUsers holds an array of user ids (this is out of the scope of this article).

  1. // param change = none, next or prev
  2. function updateAvailabilityChart(change)
  3. {
  4. var startString = window.parent.getStartDate();
  5. var endString = window.parent.getEndDate();
  6.  
  7. $('availabilityChart').innerHTML = 'Loading...';
  8. var counter = 0;
  9. var params = '';
  10. arrayInviteUsers.each( function(user) {
  11. counter++;
  12. params += 'userid'+counter+'='+user+'&'
  13. });
  14. params += 'startString='+startString+'&';
  15. params += 'endString='+endString+'&';
  16. params += 'change='+change;
  17.  
  18. var url = 'get_availability.php';
  19. var myAjax = new Ajax.Request( url, { method: 'get', parameters: params, onSuccess: loadedAvail });
  20. $('q').value = '';
  21. }

The above code will make an Ajax request to get_availability.php which will increment, decrement or keep the start and end dates the same and then return some cool response text starting with the new start date, new end date and html for the availability table. I defined a delimiter of ‘^^;;^^’ just so I can tell where data starts and stops. Below is the basic code in get_availability.php.

  1. $strStartTime = isset($_REQUEST['startString']) ? strtotime($_REQUEST['startString']) : time();
  2. $strEndTime = isset($_REQUEST['endString']) ? strtotime($_REQUEST['endString']) : time();
  3.  
  4. if(!is_numeric($strStartTime)) {
  5. $strStartTime = time();
  6. }
  7.  
  8. if(!is_numeric($strEndTime)) {
  9. $strEndTime = $strStartTime;
  10. }
  11.  
  12. if($strStartTime > $strEndTime) {
  13. $strEndTime = $strStartTime;
  14. }
  15.  
  16. $change = isset($_REQUEST['change']) ? $_REQUEST['change'] : 'none';
  17. switch ($change) {
  18. case 'prev':
  19. $strTime = mktime(0,0,0,date('m',$strStartTime),date('d',$strStartTime)-1,date('Y',$strStartTime));
  20. break;
  21. case 'next':
  22. $strTime = mktime(0,0,0,date('m',$strStartTime),date('d',$strStartTime)+1,date('Y',$strStartTime));
  23. break;
  24. default:
  25. $strTime = $strStartTime;
  26. break;
  27. }
  28. $strTimeEnd = $strTime + ($strEndTime - $strStartTime);
  29.  
  30. print date('m\/d\/Y',$strTime);
  31. print "^^;;^^";
  32. print date('m\/d\/Y',$strTimeEnd);
  33. print "^^;;^^";
  34.  
  35. $display = new Display();
  36. $display->drawDayAvailibility($usersArray, $strTime);

Finally, the Ajax request defined a function to be called when the request return successfully. This function will update the innerHTML of a div on the page and tell the parent window what the new start date and end date is.

  1. function loadedAvail(transport)
  2. {
  3. var entityParts = transport.responseText.split('^^;;^^');
  4. var newStart    = entityParts[0];
  5. var newEnd      = entityParts[1];
  6. var html       = entityParts[2];
  7. $('availabilityChart').innerHTML = html;
  8. window.parent.setStartDate(newStart);
  9. window.parent.setEndDate(newEnd);
  10. }

This is a very small piece of a very large project but it’s fun to share with others. If you have questions or could benefit from some more of the details going into this basic process, let me know and I can post more.

Tags: Ajax · Javascript · PHP · Prototype

4 responses so far ↓

  • 1 robert // Jan 21, 2008 at 7:57 am

    Wow, I can’t believe no one has commented on this since you posted it almost a year ago?! This calendar looks great, I would love to see a live demo/ be able to use the calendar in my little app. Good work man!

  • 2 Trond Husø // Jun 18, 2008 at 1:11 pm

    That screenshot up there was one nice piece of work. Keep up the good work!

  • 3 Amit Shah // Jun 24, 2008 at 5:35 am

    This is really good example of calender using prototype. We can also make reach UI using aculo.

  • 4 Max // Jan 30, 2014 at 11:20 am

    Hi
    Please, where can we download this ?

Leave a Comment