description

With our jQuery availability calendar you can
- set unavailable dates via the JS integration code - single dates or recurring dates
- use PHP data feed file to dynamically specify unavailable dates which are stored in MySQL database
- change week starting day
- translate week dates
- show multiple months
- put multiple different calendars on same web page

There is also external dateTimePicker.css file where all the styles can be easily updated. For example this class
.datetimepicker table td.unavailable
is used for the unavailable dates on your calendar

Please check the Demo page of our Free Availability Calendar script to see it in action and also check installation instructions. If you have problems, need help or customization or have a suggestion for improvement please use the comments box below.

download

To download Free Availability Calendar for FREE you need to login your account.

how to install

Follow these steps to run this Availability Calendar free php script

1) include css and js files in your web page by placing the code below in the head tag of the page

<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
<script type="text/javascript" src="scripts/components/jquery.min.js"></script>
<script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>

2) create a div container on your web page where calendar will be loaded

<div id="basic" data-toggle="calendar" ></div>

3) put the JS code to generate the calendar at the bottom of your web page

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar();
}
</script>

There are number of different settings:

1) specify which month to be loaded by default
This can be done by adding data-month="10" data-year="2014" to the div container so it is like this
<div id="basic" data-toggle="calendar" data-month="10" data-year="2014" ></div>

This will make the default month to be October 2014

2) Set week starting day. In the example below we will make Tuesday to be first day of the week.

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
day_first: 2
});
}
</script>

3) Translate the days and months. Here is an example in Vietnamese

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
day_name: ['CN', 'Hai', 'Ba', 'Tư', 'Năm', 'Sáu', 'Bảy'],
month_name: ['Tháng Một', 'Tháng Hai', 'Tháng Ba', 'Tháng Tư', 'Tháng Năm', 'Tháng Sáu', 'Tháng Bảy', 'Tháng Tám', 'Tháng Chín', 'Tháng Mười', 'Tháng Mười Một', 'Tháng Mười Hai']
});
}
</script>

4) Show alert message (or add other JS action) when you click on a date

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
onSelectDate: function(date, month, year){
alert([year, month, date].join('-') + ' is: ' + this.isAvailable(date, month, year));
}
});
}
</script>

5) Display 3 consecutive months

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
num_next_month: 1,
num_prev_month: 1
});
}
</script>

6) Set specific dates to be unavailable via the JS code

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
unavailable: ['2014-07-10', ‘2014-07-11’]
});
}
</script>

7) Set recurring dates to be unavailable via the JS code

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
unavailable: ['*-*-8', '*-*-10']
});
}
</script>

7) Set dates to be unavailable via PHP feed script

First you need to create a MYSQL database and also insert the dates which will be unavailable.

CREATE TABLE `calendar` (
`date` date NOT NULL DEFAULT '0000-00-00',
PRIMARY KEY (`date`)
)

Then open server/adapter.php file and set login details for your server

define('_DB_HOST', 'localhost');
define('_DB_NAME', 'replace_database_name');
define('_DB_USER', 'replace_username');
define('_DB_PASS', 'replace_password');

Using the following JS code to load the calendar

<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
adapter: 'server/adapter.php'
});
}
</script>
193 Comments to "Free Availability Calendar"
  • Padraig Boru

    Padraig Boru

    October 15, 2019 at 15:33 pm

    I have installed the '3-month to view' version of the Calendar on my web host., and I have added unavailable dates, as shown in the demos, using an array of dates. The problem is that the array seems only to take a maximum of 21 entries (adding a 22nd stops the calendar from displaying) which makes the calendar script useless for my purpose!

    Is this a system restriction or is there a programming work-around that someone can suggest?

    I am reluctant to get into the SQL facility, it doesn't seem to be well-enough documented for the uninitiated and it seems a bit like a sledgehammer to crack a nut for my simple purposes.

    I have checked all 192 comments, but this problem isn't referred to, as far as I can see.

  • Ben

    Ben

    October 11, 2019 at 22:57 pm

    For anyone struggling to get the SQL database link to work: In the 'example-page.html' document you need to tag the calendar div with id="dynamic-data". It is tagged as 'basic' by default so only the basic calendar will display, which does not support the SQL database.

    <div id="dynamic-data" data-toggle="calendar"></div>



  • alitaba

    alitaba

    June 18, 2019 at 12:28 pm

    hi there
    Can anybody kindly tell me, how can I replace the ugly arrows with fontawesome or lineawesome arrows? a pen would be appreciate.
    thanks

  • Duncan

    Duncan

    April 20, 2019 at 15:04 pm

    Hey, thanks for the great plugin indeed. Am using Ajax Refresh, to have my unavailability dates change once a user updates to new dates, is there a way to have the below Jquery call also ajax refresh in div?

    $('#basic').calendar({
    day_first: 2
    });

    Or is there another easier way to have my calendars refresh once new dates are picked from the select dates form.

    Thank You

    • Dev Chauhan

      Dev Chauhan

      May 28, 2019 at 09:40 am

      function startTheCalendar(response){
      $("#s-n-m").html("");
      $("#s-n-m").html('<div id="basic" data-toggle="calendar"></div>');
      if(response == ""){ response = [];}
      $("#show-next-month").calendar({
      num_next_month: 11,
      num_prev_month: 0,
      unavailable: response,
      onSelectDate: function(date, month, year, thisEvent){
      var dateData = [year, month, date].join('-');
      selected = response;
      dateClickEvent(dateData, thisEvent);
      }
      });
      }

  • Aris Lopez

    Aris Lopez

    March 25, 2019 at 05:56 am

    Is this just a calendar,or can i select a specific date that can be used for reservations. somehow,i select the date and nothing happens?

    Thanks,

  • Azzeddine

    Azzeddine

    October 3, 2018 at 19:17 pm

    thanks for this tutorial, but please i want to get date end of availibility date,
    i geted start date using this code :
    [year,month >= 10 ? month : '0'+month,date >= 10 ? date : '0'+date].join('-');
    but now i want a date End thnks for you

  • CotswoldTours

    CotswoldTours

    June 19, 2018 at 08:30 am

    How can I change the background style colours of the first and last unavailable dates? We have weekly guests that check-out on a sunday morning and check-in on a sunday afternoon, so would like half diagonal half square as other availability claendars.

  • Arun

    Arun

    January 25, 2018 at 13:53 pm

    How to show onclick on text box.

  • Ghazel Marwen

    Ghazel Marwen

    November 24, 2017 at 15:47 pm

    Please how can i add a range picker for this calendar thanks.

  • Anjani Mishra

    Anjani Mishra

    October 20, 2017 at 10:22 am

    How to show this date by back end to users. If i put this into my hotel availability calender hot i will show this that day available or not..please help me..

next

Add your comment

Captcha