Calendars in jQuery 1.3 with PHP using jQuery Week Calendar Plugin: Part 2

Deleting events

After creating, moving, and editing events, we might come across a case where the edit form is different from the create form. There is no reason why you would want to delete an event that has not yet been created, so there is no reason to add a delete button to the "Create Event" form.

We have a choice—add the delete button to the section at the bottom of the modal dialog, next to Save and Cancel, or add it to the body of the form itself.

I always try to add delete buttons and links where I think they cannot be hit by accident. Therefore in this case, I chose not to add it to the row of buttons at the bottom. Instead, I placed it in the form itself where there's little chance it will be clicked by accident while saving or closing the form.

And even then, if the link is clicked, there is always a secondary "Are you sure?" confirmation box.

Client-side code

In the calendar_edit_entry function in calender.js, change the beginning of the $.getJSON call to this:

$.getJSON('./calendar.php?action=get_event&id='+calEvent.id,
  function(eventdata){ 
   var controls='<a href="javascript:calendar_delete_entry'
                  +'('+eventdata.id+');">[delete]</a>'; 
   $('<div id="calendar_edit_entry_form" 
           title="Edit Calendar Entry">'
      +'<div style="float:right;text-align:right">'+controls+'</div>'
      +'event name<br />'
      +'<input id="calendar_edit_entry_form_title" 
               value="'+eventdata.title+'" /><br />'
      +'body text<br />'
      +'<textarea style="width:400px;height:200px"
                  id="calendar_edit_entry_form_body">'
                  '+eventdata.body+'</textarea></div>'
      ).appendTo($('body'));
   $("#calendar_edit_entry_form").dialog({

The only real change is to add the controls variable, which lets us create more buttons if necessary, and add that variable's contained HTML to the form.

The only control there at the moment is a delete link, which calls the calendar_delete_entry function when clicked.

Add this function now:

function calendar_delete_entry(id){ 
  if(confirm('are you sure you want to delete this entry?')){ 
    $('#calendar_edit_entry_form').remove(); 
    $.getJSON('./calendar.php?action=delete_event&id='+id,
      function(ret){ 
        $('#calendar_wrapper').weekCalendar('refresh'); 
      }
    ); 
  } 
} 

Server-side code

On the server side, we add a case to handle deletes:

 case 'delete_event': // {
      $id=(int)$_REQUEST['id'];
      unset($_SESSION['calendar'][$id]);
      echo 1;
      exit;
    // }

All it needs to do is to unset the session variable.

With that completed, you now have the finished basics of a calendar, where you can create events, move them around, edit them, and delete them.

Walk-through of the calendar so far

We've built the basics of a weekly calendar, and before we go on to discuss recurring events, let's take the time to walk through the calendar so far with a simple example.

Let's say you have an appointment on Tuesday at 2 pm with a business partner. You add that by clicking on that time, as follows:

You think that the meeting will go on for about two hours, so you resize it:

Now Bob calls up early on Tuesday to say that he's not going to be able to make it, and suggests moving it to Wednesday at 1 pm. You drag the event over:

He also says that he won't be able to make it, but Sally would be there. So, you click on the event and edit the form accordingly:

Wednesday comes, and of course, something has come up on your end. You call Sally and explain that you won't be able to make it, and delete the event by clicking on the event, and then clicking on the delete link.

Simple and quick. What more would you want? Let's do some recurring events.

Recurring events

Sometimes you will want to have the same event automatically populated in the calendar on a recurrent basis. For example, you go to lunch every day at 1 pm, or there might be a weekly office meeting every Monday morning.

In this case, we need to come up with a way of having events recur.

This can be simple or very complex. The simplest method is what we'll demonstrate in this article.

The simple method involves entering a frequency (daily, monthly, and so on) and a final date, where the events stop recurring.

On the server side, when it is asked to create that recurring event, the server actually iterates over the entire requested period and adds each individual event.

This is not extremely efficient, but it's simple to write, and it's not likely that anyone would be placing years-long recurrent events on a very regular basis, so it's justifiable.

The more complex method is to only create events that are actually visible in the week you are viewing, and whenever you change the week, you check to see if there are any events that are supposed to recur that week but are not visible.

This is arguably even less efficient than the simple method, but it would allow us to be a little more flexible—for example, to leave out the final date so that the events just keep recurring.

Anyway, given that there are no major drawbacks to either method, we will choose the simpler method.

Client-side code

On the client side, recurrences are created at the same time as the recurrence of the first event. So, we edit the "Create Event" form.

In calendar.js , adapt the calendar_new_entry function by replacing the form-creation line with this:

var recurbox='<select id="calendar_new_entry_form_recurring">'
  +'<option value="0">non-recurring</option>'
  +'<option value="1">Daily</option>'
  +'<option value="7">Weekly</option>'
  +'</select>';
$('<div id="calendar_new_entry_form" 
        title="New Calendar Entry">event name<br />'
    +'<input value="new event"
             id="calendar_new_entry_form_title" /><br />'
    +'body text<br />'
    +'<textarea style="width:400px;height:200px"
                id="calendar_new_entry_form_body">'
      event description</textarea>'
      +recurbox+'</div>')
  .appendTo($('body')); 
$('#calendar_new_entry_form_recurring')
    .change(calendar_new_get_recurring_end);

This adds a select box below the body text area, requesting the user to choose a recurring frequency (defaulting to non-recurring).

When the select box is changed, the function calendar_new_get_recurring_end is called.

This function is used to request the final recurring date.

We could use a plain old text field, but jQuery UI includes a really cool date widget, which allows us to request the date and have it stored in our own choice of format. I've chosen yyyy-mm-dd format, as it is easy to manipulate.

Add this to calendar.js:

function calendar_new_get_recurring_end(){ 
  if(document.getElementById('calendar_new_recurring_end'))
    return; 
  var year = new Date().getFullYear(); 
  var month = new Date().getMonth(); 
  var day = new Date().getDate();
  $('<span> until <input id="calendar_new_recurring_end" 
                         value="'+year+'-'+(month+1)+'-'+day+'" 
                         style="font-size:14px" 
                         class="date" />'
     +'  </span>'
  ).insertAfter('#calendar_new_entry_form_recurring'); 
  $('.date').datepicker({
    'dateFormat':'yy-mm-dd',
    'yearRange':'-10:+50',
    'changeYear':true
  }); 
}

That creates an input field after the dropdown box, and when it is clicked, a calendar pops up:

Whoops! What's happened here is that the date pop up's z-index is lower than the modal dialog. That can be corrected by adding this CSS line to the  < head > section of calendar.html:

<style type="text/css">
  #ui-datepicker-div{
    z-index: 2000;
  }
</style> 

When reloaded, the calendar now looks correct:

Great! Now, we just need to send the data to the server.

To do that, change the Save button's $.getJSON parameters in the calendar_new_entry function in calendar.js to these (new parameters are highlighted):

'body':$('#calendar_new_entry_form_body').val(), 
'title':$('#calendar_new_entry_form_title').val(), 
'recurring':$('#calendar_new_entry_form_recurring').val(), 
'recurring_end':$('#calendar_new_recurring_end').val() 

And we're done on the client side.

Server-side code

On the server side, the save switch case is going to change considerably, so I'll provide the entire section:

case 'save': // { 
  $start_date=(int)$_REQUEST['start']; 
  $data=array( 
    'title'=>$_REQUEST['title'], 
    'body' =>$_REQUEST['body'], 
    'start'=>date('c',$start_date), 
    'end'  =>date('c',(int)$_REQUEST['end']) 
  ); 
  $id=(int)$_REQUEST['id']; 
  if($id && isset($_SESSION['calendar'][$id])){ 
    if(isset($_SESSION['calendar'][$id]['recurring']))
      $data['recurring']=$_SESSION['calendar'][$id]['recurring'];
    $_SESSION['calendar'][$id]=$data; 
  } 
  else{ 
    $id=++$_SESSION['calendar']['ids']; 
    $rec=(int)$_REQUEST['recurring']; 
    if($rec) $data['recurring']=$id; 
    $_SESSION['calendar'][$id]=$data; 
    if($rec && $rec==1 || $rec==7){ 
      list($y,$m,$d)=explode('-',$_REQUEST['recurring_end']); 
      $length=(int)$_REQUEST['end']-$start_date; 
      $end_date=mktime(23,59,59,$m,$d,$y); 
      $step=3600*24*$rec; 
      for($j=1,$i=$start_date+$step;$i<$end_date;$j++,$i+=$step){ 
        $data['start']=date('c',$i); 
        $data['end']=date('c',$i+$length); 
        $nextid=++$_SESSION['calendar']['ids'];
        $_SESSION['calendar'][$nextid]=$data; 
      } 
    } 
  } 
  echo 1; 
  exit; 
// }

OK. From the data point of view, we've added a single field, recurring, which records the first event in the series. This is needed when deleting recurring events that are not needed anymore.

When editing an existing event, all that's changed is that the recurring field (if it exists) is copied from the original before the event is overwritten with fresh data (shown highlighted).

The real action happens when creating a new event. If a recurring period is required, then the event is copied and pasted at the requested frequency from the event's first creation until the expiry date. This is figured out by counting the seconds, and incrementing as needed.

We can immediately see that recurring events work. Here's an example of a week's lunch hours created from the new recurring method:

You can shift individual events around, and even delete them, without affecting the rest.