Javascript 带有时隙选择的 jQuery 日历
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38995183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Calendar with Time Slots selection
提问by Punit Gajjar
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.
我想在 PHP 中创建一个约会预订功能。我想要一个日历，用户可以在其中选择日期，而日历则显示要选择的时间段。
Time slot will be static, it might be dynamic in future.
时间段将是静态的，将来可能是动态的。
You can check the example on below link.
您可以查看以下链接中的示例。
Searched over the internet for such kind of plugins, but could not find. (I need a free plugin).
在互联网上搜索此类插件，但找不到。（我需要一个免费插件）。
采纳答案by Ish
Please check this http://jsfiddle.net/Xx4GS/258/
请检查这个 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.
这个想法正在发生变化，我们正在创建新的 html 元素并附加到日期选择器。您需要根据需要修改设计。在change事件中调用ajax函数从DB中获取时间槽。因为我可以看到您提供的链接也在做同样的事情。
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>
回答by Vishnu Bhadoriya
$('.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
这是用于显示可用约会的静态方法您可以在动态约会的日期选择器的 onSelect 函数中使用 Ajax 方法
回答by Gregtheitroade
You can combine the jQuery plugin Tooltipsterfor the mouseoverand clickhandler to create the row. Check this sample code:)
您可以结合的jQuery插件Tooltipster为mouseover和click处理程序创建的行。检查此示例代码:)
You can either load the month's informations and repeat when the month change, or you can load on the flyas I did in my code.
您可以加载月份的信息并在月份更改时重复，也可以像我在代码中所做的那样即时加载。
回答by ADyson
Try FullCalendar: http://fullcalendar.io/
尝试 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.
它是一个功能齐全、免费、开源的 Javascript 日历插件。它非常灵活，可以完成您描述的所有事情。您需要付出的努力是处理您想要的事件（例如，用户选择一个时间段）并将其连接到您的服务器端数据。您可能希望稍微更改外观和/或行为，以便它自动创建您需要的大小的插槽。就像我说的，它非常灵活，所以你应该能够做一些工作。
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.
老实说，我很惊讶它没有出现在您的互联网搜索中。
回答by Gopal Joshi
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
它的全功能开源插件。它建立在 jquery 和 jquery ui 之上，并受到其他在线周历（例如谷歌日历）的启发。根据您描述的要求，您努力从服务器端更新数据库以及插件中的一些 javascript 更改。这是简单的演示Demo。这里有更多可以帮助您的演示
