Free Availability Calendar

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

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.

How to show onclick on text box.

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

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..

How to disable click on unavailable dates?

Calendar is not getting display in internet explorer.What should i do?

Hi , I have a problem using the calendar.
dev console of chrome tell me : Uncaught SyntaxError: missing ) after argument list

Here are the lines causing problem for chrome :
<script type="text/javascript">
$(document).ready(function()
{
$('#basic').calendar({
day_first: 2
});
}
</script>


If anyone have a solution it would be nice. Have a great day

Hi,

Thank you for the script.
How can I set mindate and maxdate?

• 

  Wefa

  July 3, 2017 at 16:02 pm

  Hi, you can apply some modification in the source code of the calendar.
  Maybe this could help you, just replace each bloc in your code:
  var plugin_name = 'calendar',
  data_key = 'plugin_' + plugin_name,
  defaults = {
  modifier: 'datetimepicker', // wrapper class
  day_name: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], // 0-6 = sunday -> saturday
  day_first: 0,
  minDate: 0,
  maxDate: 0,
  month_name: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  paging: ['<i class="prev"></i>', '<i class="next"></i>'],
  unavailable: [], // static data - to merge with dynamic data
  adapter: null, // host to get json data of unavailable date
  month: null, // month of calendar = month in js + 1, month in js = 0-11
  year: null, // year of calendar
  num_next_month: 0, // number of next month to show
  num_prev_month: 0, // number of prev month to show
  num_of_week: 6, // number of week need to show on calendar number/auto
  onSelectDate: function(date, month, year){}, // trigger on select
  };
  -------------------------------------------------------------------------------------------------------------------------
  getCalendar: function(month, year){
  var _this = this, date = new Date();
  date.setFullYear(year);
  date.setDate(1);
  date.setMonth(month);
  
  var day_first = date.getDay();
  
  var minDate = new Date(this.options.minDate);
  minDate.setHours(0,0,0,0);
  
  var maxDate = new Date(this.options.maxDate);
  maxDate.setHours(0,0,0,0);
  
  var today = new Date();
  today.setHours(0,0,0,0);
  
  var selectedDay = "";
  if (window.day != "")
  {
  selectedDay = new Date(window.day);
  selectedDay.setHours(0,0,0,0);
  }
  
  // total date
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  var total_date = date.getDate();
  
  // begin date
  var date_start = this.day_index.indexOf(day_first);
  // total week need to show
  var total_week;
  if (!isNaN(this.options.num_of_week)){
  total_week = 6;
  }else{
  total_week = Math.ceil((date_start + total_date)/7);
  }
  
  // draw
  return $('<div>').addClass(this.options.modifier).append([
  $('<div>').addClass('paging').append(function(){
  return [
  $('<span>').addClass('prev').append(_this.options.paging[0]).click(function(){
  _this.prevMonth();
  }),
  $('<div>').addClass('month-name').append([_this.options.month_name[date.getMonth()], ', ', date.getFullYear()]),
  $('<span>').addClass('next').append(_this.options.paging[1]).click(function(){
  _this.nextMonth();
  }),
  ];
  }),
  $('<table>').append(function(){
  return [
  $('<thead>').append(function(){
  return $(_this.options.day_name).map(function(index, element){
  return $('<td>').append(element);
  }).toArray();
  }),
  $('<tbody>').append(function(){
  var ap = [];
  for (var i = 0; i < total_week; i++){
  ap.push($('<tr>').append(function(){
  var ap = [];
  for (var j = 0; j < 7; j++){
  var d = new Date();
  d.setHours(0,0,0,0);
  d.setFullYear(year);
  d.setDate(1);
  d.setMonth(month);
  //console.log(month, year);
  //d.setDate(1);
  d.setDate(-date_start + (j + 1)+(i*7));
  //var available = me.options.filter.call(me, d);
  ap.push($('<td>').addClass(function(){
  var cls = [];
  // if ((d.getDate() == today.getDate()) && (d.getMonth() == today.getMonth()) && (d.getFullYear() == today.getFullYear()))
  // cls.push('today');
  if (selectedDay != "")
  {
  if ((d.getDate() == selectedDay.getDate()) && (d.getMonth() == selectedDay.getMonth()) && (d.getFullYear() == selectedDay.getFullYear()))
  cls.push('selected');
  }
  if ((minDate >= d) || (maxDate < d))
  cls.push('no-access');
  if (_this.isAvailable(d.getDate(), d.getMonth() + 1, d.getFullYear())){
  cls.push('available');
  }else{
  cls.push('unavailable');
  }
  if (d.getMonth() == date.getMonth()){
  cls.push('cur-month');
  }else{
  cls.push('near-month');
  }
  return cls.join(' ');
  }).data({date: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear()}).append(d.getDate()).click(function(){
  var date = $(this).data('date'),
  month = $(this).data('month'),
  year = $(this).data('year');
  _this.options.onSelectDate.call(_this, date, month, year);
  }));
  }
  return ap;
  }));
  }
  return ap;
  })
  ];
  })
  
  ]);
  },

  • reply
  • report
  • (0)
  • (0)
• 

  mywebhostel

  March 24, 2018 at 16:27 pm

  thanks,
  And how can i display it in the calendar?

  • reply
  • report
  • (0)
  • (0)

I want to show an alert box when clicked on unavailable dates but script is not getting call.Can you suggest some help.
Thanks.