jQuery Calendar with Time Slots selection [closed]

问题

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

回答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>

回答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

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

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

回答5:

Try jQuery Week Calendar

Its full featured opensource plugin. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar. Effort from your side for updating database from server side and some javascript changes in plugin as per your requirement described. Here is simple demo Demo. Here is more demos that can help you

来源：https://stackoverflow.com/questions/38995183/jquery-calendar-with-time-slots-selection

标签

javascript

php

jquery

datepicker