jQuery Calendar with Time Slots selection

javascript php jquery datepicker

37,408

Solution 1

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>\n\
                        <td colspan="8">\n\
                            <div> \n\
                                <button>8:00 am – 9:00 am </button>\n\
                            </div>\n\
                            <button>9:00 am – 10:00 am</button>\n\
                            </div>\n\
                            <button>10:00 am – 11:00 am</button>\n\
                            </div>\n\
                        </td>\n\
                   </tr>');

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

Solution 2

$('.date-picker-2').popover({
	html : true, 
	content: function() {
	  return $("#example-popover-2-content").html();
	},
	title: function() {
	  return $("#example-popover-2-title").html();
	}
});
$(".date-picker-2").datepicker({
	onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
    	var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
    	$('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
    	$('.date-picker-2').popover('show');
    }
});

.popover {
	left: 40% !important;
}
.btn {
	margin: 1%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
</body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.popover {
    left: 40% !important;
}
.btn {
    margin: 1%;
}
</style>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
    html : true, 
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }
});
$(".date-picker-2").datepicker({
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
</script> 
</body>
</html>

This Is a Static method for showing Available Appointments You Can Use Ajax method in onSelect function of date picker For Dynamic Appointments

Solution 3

Try FullCalendar: http://fullcalendar.io/

It's a full-featured, free, open-source Javascript calendar plugin. It's very flexible and can do all the things you described. The effort reqiured on your part is to handle the events that you want (e.g. user selecting a time slot) and wire it up to your server-side data. You might want to change the appearance and/or behaviour a little so that it automatically creates slots of the size you need. Like I said, it's incredibly flexible so with a bit of work you should be able to do it.

The documentation provided for doing all this is pretty good. If you get stuck though please post more questions here - I've used it quite a lot and might be able to help.

I'm surprised it didn't turn up in your internet searches already to be honest.

Solution 4

You can combine the jQuery plugin Tooltipster for the mouseover and click handler to create the row. Check this sample code :)

You can either load the month's informations and repeat when the month change, or you can load on the fly as I did in my code.

View more solutions

37,408

Author by

Punit Gajjar

[![enter image description here][2]][2] [2]: http://i.stack.imgur.com/sbjHr.png

Updated on August 12, 2022

Comments

Punit Gajjar over 1 year

I want to create an 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 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. (I need a free plugin).
Punit Gajjar over 7 years

i want it with the date picker only . . as given in the ref. link
ADyson over 7 years

don't you want the timeslots as well? It'll give you that too. If you just want a datepicker, use jquery datepicker. But then you'll have to code the timeslots stuff yourself.
Punit Gajjar over 7 years

Yes , i want time slots but not with the full calendar, it should popup after user select the date as given in the example. check this link getbooked.io
ADyson over 7 years

then a combination of the two - fullcalendar and jQuery datepicker - might be a good way to go. fullcalendar can be restricted to just show one day at a time, and you can work out how to render separate selectable timeslots within that.
Punit Gajjar over 7 years

Appreciate your thoughts , but possible like the example i have gave you ?
ADyson over 7 years

by combining those two plugins, yes I think so. You just need to tweak the fullCalendar plugin settings and rendering a bit.
ADyson over 7 years

or if you're honestly returning a static set of slots (as you say you are, but what if one is full already??) then you could just use the datepicker and some custom html of your own
Punit Gajjar over 7 years

Slots will be static for sure,if it will be booked then it will be managed from backed manually, we dont need to worry about it. all i want is that user should select the date from the datepicker and datepicker should display those timeslots , if UI is different i dont mind,.
ADyson over 7 years

ok well I would go for jquery Datepicker. You can handle the event of a date being selected and display some custom UI with the timeslots in it. jqueryui.com/datepicker
Punit Gajjar over 7 years

Nope , Cant use this .
Ale almost 6 years

This is actually a way nicer and looks much better then the accepted answer. It is keeping the structure of the of the datepicker as it is and the pop up with the available hours is a smart decision.