Punit Gajjar Punit Gajjar - 18 days ago 14
PHP Question

Jquery Calendar with Time Slots selection

I want to create Appointment Booking feature in PHP.

I want to have a calender in which user can select date and in return calender shows the time slots to select.

Time slot will be static.
It might can be Dynamic in future,

You can check the example on below link.

https://getbooked.io/

searched over the internet for such kind of plugins, but could not find. ( Need Free Plugin )

Anybody can help me with this.

Ish Ish
Answer

Please check this http://jsfiddle.net/Xx4GS/258/

The idea is on change we are creating the new html element and appending to the datepicker. You need to modify the design according to your need. Call the ajax function in the change event to fetch the time slot from DB. because I can see that the link you gave is also doing the same.

Attaching the code as well:

var $datePicker = $("div#datepicker");

var $datePicker = $("div");

$datePicker.datepicker({
 changeMonth: true,
 changeYear: true,
 inline: true,
 altField: "#datep",
}).change(function(e){
setTimeout(function(){   
   $datePicker
     .find('.ui-datepicker-current-day').parent().after('<tr><td colspan="8"><div><button>8:00 am – 9:00 am</button></div><button>9:00 am – 10:00 am</button></div><button>10:00 am – 11:00 am</button></div></td></tr>')

  });
});
<div id="datepicker"></div>
Comments