Post

Finding this code had me pulling my hair out! The Booking Calendar plugin for WordPress is a very nice plugin with a free version as well as several incrementally complex versions that offer helpful features for more cost.  I’m using this plugin to take booking requests for the Coppertree House Vacation Guest Suite.

Many of the minor tweaks that I made to the plugin for my own use were rather simple and straightforward — simply using some css and a little php.  But I couldn’t find a way to clear the dates after a range of dates were selected. The jQuery plugin has a “Clear” call in newer versions, however, the plugin uses an older version of the Keith Wood’s jQuery Datepicker plugin that does not include the simple call $(selector).datepick('clear')! It wasn’t included until version 4.0. The Booking Calendar plugin uses version 3.7.1.

I thrashed around for quite a while before I finally found this little piece of code that is actually just copied from the link to clear the selection that was in the Datepicker Calendar example that is packaged with the original jQuery plugin. I had to dig around a bit because the sample calendar isn’t included with the Booking Calendar WordPress plugin. (The ids #calendar_booking1 and #datepick-status-booking_form1 are ids that are generated by the free version of the Booking Calendar Worpress plugin.)


<div class="datepick-clear"><a href="javascript:void(0)" onclick="jQuery.datepick._clearDate('#calendar_booking1');" onmouseover="jQuery('#datepick-status-booking_form1').html('Erase the current date');" onmouseout="jQuery('#datepick-status-booking_form1').html('Select a date');">Clear Selected Dates</a>


Now, you can put this into the same page where you have the shortcode for the Booking Calendar (in the ‘Text’ side of the Editor).  However, WordPress, will strip it or mess it up any chance it gets. To avoid that, I put the code in
/wp-content/plugins/booking/lib/wpdev-booking-class.php in the “Client Side & Hooks” section, just before the “Style” elements at about line 1567 just after this line: $calendar = $style. (Note the escapes in the jQuery code):

  $calendar = $style.
'<a href="javascript:void(0)" onclick="jQuery.datepick._clearDate(\'#calendar_booking1\');" onmouseover="jQuery(\'#datepick-status-booking_form1\').html(\'Erase the current date\');" onmouseout="jQuery(\'#datepick-status-booking_form1\').html(\'Select a date\');">Clear Selected Dates</a>'.

 

I hope this helps someone!