带时隙的jQuery日历选择

我想在PHP中创建一个约会预订function。 我想要一个日历，用户可以在其中选择日期，作为回报，日历显示要选择的时间段。

时隙将是静态的，将来可能是动态的。

您可以查看以下链接中的示例。

Booked

通过互联网搜索这种插件，但找不到。 （我需要一个免费的插件）。

Answer 1

请查看http://jsfiddle.net/Xx4GS/258/

我们的想法是改变我们正在创建新的html元素并附加到datepicker。 您需要根据需要修改设计。 在change事件中调用ajax函数以从DB获取时隙。 因为我可以看到你给的链接也是这样做的。

附加代码：

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('\n\ \n\ 
 \n\ 8:00 am – 9:00 am \n\ 
\n\ 9:00 am – 10:00 am\n\ \n\ 10:00 am – 11:00 am\n\ \n\ \n\ '); }); }); 
 

Answer 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('Avialable Appiontments'); var html = '8:00 am – 9:00 am
10:00 am – 12:00 pm
12:00 pm – 2:00 pm'; $('#example-popover-2-content').html('Avialable Appiontments On '+dateText+'
'+html); $('.date-picker-2').popover('show'); } }); 

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

Answer 3

试试FullCalendar： http ：//fullcalendar.io/

它是一个function齐全，免费，开源的Javascript日历插件。 它非常灵活，可以完成你描述的所有事情。 您需要的努力是处理您想要的事件（例如，用户选择时间段）并将其连接到服务器端数据。 您可能希望稍微更改外观和/或行为，以便自动创建所需大小的插槽。 就像我说的那样，它非常灵活，所以通过一些工作你应该能够做到。

为完成所有这些提供的文档非常好。 如果你遇到困难，请在这里发布更多问题 – 我已经使用了很多，也许可以提供帮助。

我很惊讶它没有出现在你的互联网搜索中，说实话。

Answer 4

您可以将用于mouseover的jQuery插件Tooltipster和click处理程序组合在一起以创建行。 检查此示例代码 🙂

您可以加载月份信息并在月份更改时重复，也可以像我在代码中一样快速加载。

Answer 5

试试jQuery Week Calendar

它的全function开源插件。 它建立在jquery和jquery ui之上，并受其他在线每周日历（如谷歌日历）的启发。 努力从您这边更新数据库从服务器端和插件中的一些javascript更改根据您的要求描述。 这是一个简单的演示演示 。 这里有更多可以帮助您的演示