jQuery日历时间选择建议

这听起来像是另一个“我应该使用什么日历插件”。 而且有点像,但是我正在寻找一些相当具体的东西,我希望有人会对我可以从中开始的事情提出建议。

我需要创建一个日期和时间的布局。 与任何日历程序中的每周视图类似,但在图像中可以看到略有不同。

我有一个日期列表,存储营业时间和服务器API调用的可用时间段,我需要将此列表提供给用户并允许他们选择一个时间段。

如果有一个jQuery插件或控件可能是一个很好的起点,请告诉我。 目前,我正在使用Bootstrap表并自定义它。

最终结果不必与此设计完全匹配,但显然越接近越好(如果我可以自定义或主题控件)。

一个类似的例子,尽管设计非常不同,是Genius Bar预约时间选择器,这会很好,但我找不到他们使用的控件。

时段选择器

正如我上面提到的,我最终使用好的旧表和CSS创建了自己的。

由于这是一个Rails应用程序,我根据可用的时间段自定义服务器上的HTML视图。 我还使用Ruby自动生成工作日和日期。

在HAML视图中:

%table %thead %tr %th .day-of-week= Time.now.strftime("%A") .date= Time.now.strftime("%b %e") %th .day-of-week= (Time.now + 1.day).strftime("%A") .date= (Time.now + 1.day).strftime("%b %e") ... %tbody %tr - (1..7).each do %td.closed 6:00 am %tr - (1..7).each do %td.available 7:00 am ... 

在CSS中:

 table { border-collapse: separate; border-spacing: 20px 10px; tbody tr td { &.closed { color: lightgray; } &.unavailable { color: #777; background-color: lightgray; border-radius: 15px; } &.available { cursor: pointer; &:hover { color: white; background-color: blue; border-radius: 15px; } } } } 

仍在处理标题图像/ css渐变,但我使用的占位符给出了正确的想法。 我还需要添加一个类并使用jQuery数据标签来实现选择时隙,但该function将会出现。 这个问题主要是关于控件的设计。

这是我的大部分成品: 自定义计划程序

这里有一些我过去使用过的jQuery插件。 我真的很喜欢#2(Highcharts)。

http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/