Sunday, May 2, 2010

Resource Booking and Availability Calendar Plugin for Wordpress

Resource Availability & Booking Calendar plugin for Wordpress allows you to show the availablity status of any resource on the Calendar to the visitors and allows the resource vendors (admin users in Wordpress) to change the booking states on the Calendar.

Background

One of my clients had requirement for a Calendar that shows the availability status of the resources such as Hotel rooms, Taxi for hire, etc. These resources belonged to multiple suppliers and the booking/reservation of the resources would be controlled by the respective resource vendors.

Solution

Upon discussing the use cases and the look & feel requirements with my client, we zeroed on using a AJAX implementation for the Calendar, so that we can fetch months of booking data without refreshing the resource details pages. Then we stumbled upon a free source, Ajax Availability Calendar developed by Christopher Bolson. Since my client’s existing website was built using Wordpress, I started adopting this cool code into a Wordpress plugin. The result is a Resource Booking & Availability Calendar plugin for wordpress.

Features in version 1.0

  • Open Source and FREE to use in your site or application
  • Unlimited Items (holiday homes, apartments etc.).
  • Booking States: Available, Booked, Provisionally booked.
  • Multiple administration users, with their own resource handling.
  • Styled with CSS - easy to adapt to any design.
  • Uses AJAX to change months viewed without reloading the page.
  • All javascript handled by the Mootools library.

Download

You can download the latest version of this plugin from Wordpress Plugins database. The plugin is released under GPL2 license.

Installation and Usage

How to install the plugin and get it working?

Follow these simple steps:

  1. Download the plugin and extract it. Upon extraction, you will get `resource-booking-and-availability-calendar` folder.
  2. Upload `resource-booking-and-availability-calendar` folder to the `/wp-content/plugins/` directory
  3. Activate the plugin through the 'Plugins' menu in WordPress

How do I update the bookings in Calendar?

Go to edit post in Wordpress. Select the desired post. In the edit screen, you will see the option to enable Booking. If you enable booking, the Booking Calendar is displayed. Click through the desired dates to alter the booking status on each day.

How do I show the availability calendar to users?

Once you enabled the Booking on a post as said above, the users visiting that post will see the Availability Calendar at the end of the post content.

Screenshots

  • Availability Calendar - This is the public view of Availability Calendar on the posts for which Booking is enabled.

screenshot-1

  • Booking Calendar - This is the Admin view of Calendar. If the Booking is enabled by checking the radio button, the Booking Calendar is loaded. Click on the desired date to change its booking status.

screenshot-2

Change log

Version 1.0.1 – Snapshots uploaded in gif format

76 comments:

  1. I have wp version 2.9.2 and the plugin seems to have problem with the ajax, Instead of the calendars I get only the png waiting image both on the admin side and on the post page.
    It seems that I cannot access the data on the database, how can I fix it?

    ReplyDelete
  2. Seems like javascript conflict. Can you share the URL?

    ReplyDelete
  3. Yes thanks a lot,
    http://www.salentorental.com/uncategorized/hello-world/

    ReplyDelete
  4. Well, the best thing would be to isolate the problem by disabling un-used plugins. And just check once if it work on different theme (just a quick check)

    ReplyDelete
  5. Now I tried with a fresh install of wordpress and every other plugin disabled, also with the default theme. Try to have a look now

    ReplyDelete
  6. Marco,
    Did you use my latest version? Did you see any issues while installation? Some reported that there were issues after upgrading from old version. Can you please do ftp and delete all my plugin related files and newly download the plugin from http://wordpress.org/extend/plugins/resource-booking-and-availability-calendar/ then unzip it and manually copy the folder to plugin directory. I am sure it works. I just tested it on default template in my localhost.

    ReplyDelete
  7. It worked!! Thanks a lot, I do not know why, but it seems that using the automated install from wp-admin panel it generates some errors during the installation.
    Maybe was just a connection issue during the insallation process.

    ReplyDelete
  8. :) Yep.. Its a known issue since WP 2.8 (http://autoblogged.com/kb/installation/invalid-header/)

    ReplyDelete
  9. GREAT!! Its a very good plugin for me. Is it possible to put it on a page instead of post?...
    How could i do this?

    Thanks,
    ángel

    ReplyDelete
  10. It can be done by:

    1) adding an action to publish_post hook; It can be same as actions for draft_post, publish_post, save_post, and edit_form_advanced in the existing plugin. (Ref: cstart-Resource-booking-and-availability-calendar.php)

    2) For the javascript, I am supplying the 'post_id' variable to identify the applicable calendar. You need to pass 'page_id' instead, incase of pages.

    3) Its wise to create a shortcode to call the calendar in page. That needs to be implemented. Orelse, you can call function 'addPublicCalendar()' in the relevant page template.

    ReplyDelete
  11. Thanks so much for this, it is amazing! Is there any way to display calendars for multiple posts using a template file? Thanks again!

    ReplyDelete
  12. @Danielle,
    I think, you want to just maintain one site wide calendar and display it in all/many posts. If my understanding is right, you can't use it like that, right away.

    The plugin is designed in such a way that each post represents a resource and each resource has its own calendar.

    You need to modify a bit of my code and can get it working as per your use case. Do contact me if you wanna take up this task; I can help you understand my code.

    ReplyDelete
  13. Thank you for your response. I was actually referring to displaying multiple calendars on one page, for example a bed and breakfast site, have the ability to display calendars for all three rooms on one page. I thought something like "get_post_custom_values" or something like that might work but I am not a php expert... For now I will simply link to each room individually from the availability page - thanks so much for your help!

    ReplyDelete
  14. @ángel, I had a fair bit of success with the following:

    1. Copied the 'publish_post' hook (line 462) and changed it to 'publish_page'.

    2. Copied the 'edit_advanced_form' hook (line 464) and changed it to 'edit_page_form'.

    3. Added the 'is_page()' conditional to the addContent() method (line 287).

    Therefore, using version 1.0.1 of the plugin, do as follows (with line numbers):

    287 if (/*$adminOptions['add_content'] == "true" && */ is_single() || is_page()) {

    462 add_action('publish_post', array(&$cs_RBA_plugin,'store_post_options'),1);

    463 add_action('publish_page', array(&$cs_RBA_plugin,'store_post_options'),1);

    464 add_action('save_post', array(&$cs_RBA_plugin,'store_post_options'),1);

    465 add_action('edit_page_form', array(&$cs_RBA_plugin,'post_options'),1);

    466 add_action('edit_advanced_form', array(&$cs_RBA_plugin,'post_options'),1);


    As far as I can tell, it works fine, so everything else can be left alone, including 'post_id' and 'page_id'. I didn't bother creating a shortcode, as it now fulfills my needs.


    Thank you for the plugin, sir!
    Paul d'Aoust

    ReplyDelete
  15. Hi
    Brilliant plugin, do you intend to add the additional legend items to the plugin, such as Chris has in his e.g. booked AM, Provisional AM etc. I am using the plugin to show availability of holiday rentals.

    Thanks for the great work.

    ReplyDelete
  16. @Paul, Well I would implement it once I get some time. But, its as simple as adding new 'states' in 'bookings_states' table. Refer to line num. 419 (in function: createTables()) of cstart-Resource-booking-and-availability-calendar.php

    There I am adding different states for bookings; you can extend it with your own states and associate CSS to it with color info.

    ReplyDelete
  17. This is perfect for my purposes in its simplicity. In reference to your last sentence in the comment above, where would I find the CSS with the color info for the Provisional booking state? I'd like to change it to green from the orange it currently is. Thanks!

    ReplyDelete
  18. @Jen, the CSS element for Provisional Booking is "booked_pr" (You can see this linkage in: cstart-Resource-booking-and-availability-calendar.php line num. 419)

    The style for the element is in /css/avail-calendar.css line num. 154

    There you can change the color code from 'background-color: #ff9700;' to 'background-color: orange;'

    Hope it helps.

    ReplyDelete
  19. Thank you! I found it!

    Now... I am wondering how to re-label "Provisional" as "Available" as I deleted the gray "available" label in the legend (grey is a nice default and I didn't want to be marked available every day of the year by default and it was really easy to delete that in the php) I am sure it is in the php functions somewhere.

    ReplyDelete
  20. Actually, I think I will relabel it as "Open" or something other than "Available" as I don't want to run into other functions that might use the same label.

    ReplyDelete
  21. @Jen, well thats retrieved from DB. You need to modify in line no. 419 of cstart-Resource-booking-and-availability-calendar.php
    Instead of 'desc_en' => 'Provisional', change it to 'desc_en' => 'Available or whatever'

    ReplyDelete
  22. @Jen, remember to recreate the DB. Reactivate the plugin.

    ReplyDelete
  23. Raghavendra, thank you for your help! I think I might be in a little over my head - I don't quite know how to do the last bit.. but I am so thrilled at what I've got so far! I am assuming DB=database and if so, which database do I need to recreate? I don't recall making one for the plug-in so is it the database that I originally set-up when I installed WordPress? Please forgive me - I do not really understand php. Also, if it's not too much trouble, could you point me in the direction of changing the start of the week to Sunday instead of Mondays?

    I think an admin panel in WordPress for this plug-in with these customizable options would be fantastic for people like me. I know just enough to break the entire thing and have to re-install it from scratch! :-)

    Thanks again for your helpfulness! If you want to see what I've done, you can view my test-post (eventually I do want to get it on a page instead of a post as mentioned above) here: http://www.jenbarnesphoto.com/2010/06/availability-as-of-june-27th/

    ReplyDelete
  24. @Jen, No Do not recreate the entire wordpress database.

    If you have access to phpMyAdmin, go to the wordpress database. And look for a table called "wp_bookings_states". Just 'drop' this table & re-activate the plugin.

    Now, your new state names shall take effect.

    You can tune it to start from Sunday by adding this line:

    define ("AC_START_DAY","sun");

    in /php/functions.inc.php at the begining, just after define("DATE_DISPLAY_FORMAT", "us");

    ReplyDelete
  25. Hello Raghavendra, I have a small problem. My calendar days are only displaying 6 rows across, so consequently Monday and Sunday occur in the same column. I've tried a fresh install and still have the same problem. Any ideas how I can amend this. Many thanks! Stuart.

    ReplyDelete
  26. @stuart, Pls share the link to your post.

    ReplyDelete
  27. hi, do have any example code or instuructions to display the calendar on a page instead of posts, I was the above comment saying it was possable but dont really understand what you ment by

    ReplyDelete
  28. Raghavendra, please find the link below as requested. http://www.eventphotographybristol.co.uk/?p=362
    Kind regards, Stuart.

    ReplyDelete
  29. @Stuart, Its CSS issue in your template. Here is a fix: in file /css/avail-calendar.css Please update the following style sheet elements:

    #cal_wrapper .cal_month ul {
    clear:both;
    color:#FFFFFF;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:auto;
    padding:4px;
    width:200px;
    }



    #cal_wrapper .cal_month {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    -moz-border-radius-bottomleft:6px;
    -moz-border-radius-bottomright:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-topright:6px;
    background:#FFFFEE none repeat scroll 0 0;
    border:1px solid #006699;
    color:#666666;
    float:left;
    line-height:20px;
    margin-bottom:6px;
    margin-right:6px;
    min-height:194px;
    padding-bottom:6px;
    width:205px;
    }

    ReplyDelete
  30. Hello,

    I have the same problem like Marco.
    My wp version is 3.0 and i can't see dates on the calendars.
    Here is the link to the page: http://www.vivavert.eu/?p=86

    I have also tryed the manual instal and disabled al plugins but its not working.

    How can i fix the problem

    ReplyDelete
  31. I have the same issue : My wp version is 2.9.2 and i can't see dates on the calendars.

    Do you have a solution to solve it ?

    ReplyDelete
  32. @pascal,@Sebastein,

    In sites that have jQuery, Prototype js, its known to cause some conflicts.

    Before we conclude, I would ask you to revert to 'default' theme on wordpress and test the plugin. Let me know, whether it works there.

    ReplyDelete
  33. With the default theme, it works with the following errors :
    Deprecated: Assigning the return value of new by reference is deprecated in C:\Program Files (x86)\EasyPHP-5.3.2\www\wordpress\wp-settings.php on line 646 / 661 / 668 / 675 / 711 and 18.

    However, when we edit the post, the theme is not applicable because we are in the administration part and I keep the same isse : i can't see dates on the calendar.

    Do you have idea ?

    ReplyDelete
  34. It's not working with the default theme.
    The plugging is working on my test site (wp 2.9.2) and its configured with the same theme (arras)

    ReplyDelete
  35. I spent hours checking out various booking/availability systems and this is by far the easiest to use and among the best.

    I've tried following the instructions above for showing it on a page, but I can't find some of the text shown on there and can't seem to figure it out.

    If you could add to this, and add booking to it, you'll have the best availability/booking plugin for WordPress.

    ReplyDelete
  36. Thank you very much indeed!
    Regards,

    Stuart.

    ReplyDelete
  37. @Paul d'Aoust - thank you for the detailed instructions for adding the resource to the page - simple and it works!

    @Raghavendra Deshpande - Thank you for the plugin. It was just what I was looking for. Simple and easy to use.

    ReplyDelete
  38. I am having trouble when not using the plugin on a post. It still shows the title 'Availability Calendar' at the bottom of the post.

    Is there a way to get this to not show up?

    Here is an example:
    http://www.somerset.ws/uncategorized/quick-test/

    ReplyDelete
  39. I have the same problem with "Availability Calendar" showing on posts where it is disabled.

    ReplyDelete
  40. Same problem here with the "availability calendar".. Not understand php os much but I was trying to play with it. My best solution so far is to delete the line completely. It works for my purpose :p

    I found out I have problem (conflict) with (probably) jQuery, prototype js, or something. I tried to revert to default theme and the calendar came out brilliantly.
    Has this issue (conflict) resolved? Is there any workaround?
    I am happy to drop the current theme and change to a friendlier theme as your calendar is PRICELESS!

    ReplyDelete
  41. Hi Raghavendra,

    Is it possible to bring the calendar (and management) of the calendar out to a custom front-end? I'm looking at implementing the calendar on a template page that allows people to update a post listing without having to visit the wp-admin back end. Have you tried this yourself?

    Calendar works great in the backend and displays nicely in the posts at the front end - what I'm trying to do is bring the admin side of the calendar out to the front-end of the site. Is that a possibility or are there any specific template calls or functions that could be called from a template page to make that happen?

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. I have the same problem of Availability Calendar showing on posts where the function is disabled.

    ReplyDelete
  44. Dear Raghavendra, I have installed the plugin (as the only plugin) on a WordPress 3.0.1 site using the 2010 theme. It works fine except for one nasty error. When editing the dates it throws me a javascript error in Internet Explorer and does not save the changed state of the bookings.

    Any chance you could have a look at that error. It says:
    Messag: 'msg_state' is empty or no object
    Line: 113
    Character: 2
    Code: 0
    URI: .../plugins/resource-booking-and-availability-calendar/js/mootools-cal-admin.js?ver=1.2.4


    PS It does work in FireFox....

    ReplyDelete
  45. Dear Raghavendra,
    Is it possible to use your super plugin on pages instead of posts.
    Sincerely,
    Troels

    ReplyDelete
  46. Dear,

    Your plugin has the power to become a giant killer. If you would make it more flexible like available on pages, translation page, block history months, custom colors to refer to prices...
    But you need to have time to do so.
    Good luck, I enjoyed the quality of your work.

    ReplyDelete
  47. Do you think you will be making a widget version anytime soon? Would like to be able to have the calendar up on a side bar at all times.

    ReplyDelete
  48. Wordpress 3.0.1: the admin is not cliquable. You can set the calendar on and off, but nothing in the admin is cliquable.
    Also the first month display correctly, the second month is blank. Cannot change month as well as the 2 arrows are not cliquable too. Anyone go this issue?

    ReplyDelete
  49. Hi Raghavendra, I am having a CSS problem I think like Stuart above. I added the CSS code you suggested to Stuart above but that made no difference to mine. Could you please have a look?

    http://www.hotelsinscarborough.org/accommodation/bedroom-2/

    thanks
    Russ

    ReplyDelete
  50. Hi there Raghavendra! i am having a problem with your plugin, i can add a calendar to my post, but when i add them it doesn't show any dates and can't modify days. I am using wordpress 3.0.1 and chocotheme with jquery. Example here! http://crystalinagaucin.com/haeuser/example-3
    Thanks in advance, btw, i was trying it on other webpage and it worked with the same plugins and theme installed, example: http://gaucin.vacau.com/?p=42

    ReplyDelete
  51. Hello! Will there be an update for WP 3.0.1 in the near future? Any one know of a way to incorporate this with PayPal to be able to accept payments?

    Thanks!

    ReplyDelete
  52. Thanks so much for this plugin! I was looking for days for something like this and couldn't find anything. Finally I stumbled on to this and I am so happy and relieved. Thanks again for this great plugin :)

    ReplyDelete
  53. Your great plugin conflicts with
    mappress-google-maps-for-wordpress
    It gives in mappres a javascript error.
    In mappress_min.js
    "Message: 'a[...].point.lat' is empty or no object
    regards rob

    ReplyDelete
  54. Hi

    How to move the position of the calendar into some div or tab in post? How to change the php to do that? I would like to move it in one of my tabs.

    ReplyDelete
  55. Hi

    I installed already the plugin under wp page but does not show in admin page any settigns for this plugin. Why? Where I should looking for? Thx

    ReplyDelete
  56. Hi,

    i'm trying to use your plugin in a project, but i can't figure out how to show only one month at a time.
    Can anyone give me a hand please?

    Regards

    ReplyDelete
  57. I really wish this had the ability to work on pages as well. I realize others have manually edited the code to do this but I'm not willing to bank a solution on stuff I've mucked with like that.

    ReplyDelete
  58. hi, thanks for this plugin, works great, i would like to ask you, how can translate the legends? because i could transalate only Available but not Booked and Provisional, can you help me please?

    ReplyDelete
  59. does it also support booked am and booked pm?
    does it work with wp3.1

    ReplyDelete
  60. Works like a charm. By reading ALL the above comments I now have the ability to add availability to pages instead of posts. I'm sure I can get other suggestions working once I read the comments.

    Read the comments!

    ReplyDelete
  61. How can I remove the code from the_content() and call it inside the sidebar? Thanx.

    ReplyDelete
  62. So sad that this plugin is no longer being developed, it had so much potential but is now a year old and no longer compatible with the current version of WordPress.

    As Raghavendra has been missing for over a year, it would be a wonderful if someone else could take over development of this GPL licensed plugin.

    ReplyDelete
  63. Great plugin! Can someone upload the version for pages please I read here how to do it but I didnt understand any one word. :-(

    Thanks a lot. Nice work here.

    ReplyDelete
  64. Good work, mate. I have one Question. Is it posible to use this calendar with multilanguage website (qTranslate for example. Thank U

    ReplyDelete
  65. Hello,
    Would be nice to be able to put the calendar inside of a post, in a user defined place, or in a widget.

    Does anyone how to do this?

    ReplyDelete
  66. as a visitor not Admin can i make a request from this calendar or Not?

    ReplyDelete
  67. how we seprate calender from the_content in wordpress

    ReplyDelete
  68. Hi: I need a booking calendar for my website - I am a hotel directory and have app. 125 hotels on my site.

    I would like a booking calendar where people can add the dates on my site and when they hit the reservation OK button the info will immediately connect with the hotels and B&B's.

    I don't want to do the bookings but direct the bookings to the pertinent hotel.

    does this work with XML feed? and can i do what i want with this plug in please - thanks! Heather

    ReplyDelete
  69. Hello! Congratulations for your Availability calendar plugin. I have a technical question, I hope you can help me. The content of my post is shown by custom fields, and I need the calendar is displayed in a full position (not at the very end) is this possible? Thank you!

    ReplyDelete
  70. Hi Is there any way that I can select a range of dates and set them to e.g. booked instead of having to select them day by day?

    ReplyDelete
  71. Hi,

    Is there a way to include calendar after the content and not inside?
    I would like to open content and calendar in separate window with PrettyPhoto but I don't know how to separate them.

    Thank You for answer,

    Regards

    ReplyDelete
  72. Amazing post dude.It will be very helpful for begginers like me.Thank you very much for this important post.Waiting for your next post.You can visit our site to get awesome html templates

    ReplyDelete
  73. I'll give you a pat on the back just for the sheer effort in screencapping all those blogs.Giving a blog talk to beginner bloggers in the not-too-distant future, I'll be pointing people in the direction of your efforts. Nicely put together dude.Here is our small effort about css templates

    ReplyDelete
  74. I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep the good work, please visit our website for more free piugins

    ReplyDelete