javascript - jQuery Calendar time selection suggestion - Stack Overflow

admin管理员组

文章数量:1336568

This sounds like yet another "what calendar plugin should I use". And it sort of is, however I'm looking for something fairly specific and I'm hoping someone will have a suggestion on something that I can start from.

I need to create a layout of days and times. Similar to the Weekly view in any calendar program, but slightly different as you can see in the image.

I have a list of dates, store open hours, and available time slots from a server API call and I need to present this list to the user and allow them to select a time slot.

If there is a jQuery plugin or control out there that might be a good starting point, please let me know. Currently, I am using Bootstrap tables and customizing the heck out of it.

The end result doesn't have to match this design EXACTLY, but obviously the closer the better (if I can customize or theme the control).

A similar example, albeit very different design, is the Genius Bar appointment time picker, which would be nice, but I cannot find the control they use.

This sounds like yet another "what calendar plugin should I use". And it sort of is, however I'm looking for something fairly specific and I'm hoping someone will have a suggestion on something that I can start from.

I need to create a layout of days and times. Similar to the Weekly view in any calendar program, but slightly different as you can see in the image.

I have a list of dates, store open hours, and available time slots from a server API call and I need to present this list to the user and allow them to select a time slot.

If there is a jQuery plugin or control out there that might be a good starting point, please let me know. Currently, I am using Bootstrap tables and customizing the heck out of it.

The end result doesn't have to match this design EXACTLY, but obviously the closer the better (if I can customize or theme the control).

A similar example, albeit very different design, is the Genius Bar appointment time picker, which would be nice, but I cannot find the control they use.

• javascript
• jquery
• css
• jquery-plugins
• twitter-bootstrap

Share Improve this question Follow edited Jan 25, 2013 at 18:02 halfer 20.3k1919 gold badges109109 silver badges202202 bronze badges asked Jan 25, 2013 at 17:33 KevinKevin 7701313 silver badges2121 bronze badges 4

• It really is specific and i was looking for something exactly like this. I'm not sure about if there is a good planned calender for this also you gotta customize anyways so best choise here is the closest features that would make your life easier.. I would prefer creating a table with customized hourlines and just implement the whatever datepicker you use on it. I'll try coding some for this. – Berker Yüceer Commented Jan 25, 2013 at 19:20
• Hi @Berker, I'm actually working on a bined Bootstrap tables / CSS override solution. It has turned out well so far. Created some classes for "unavailble", "available", "busy", "cursor selection" has allowed me to dynamically update the time slots when building the page (this is in a Ruby on Rails app so I can easily build this page on the server before sending to the client. So far so good, I'll keep this post updated next week when I continue. – Kevin Commented Jan 26, 2013 at 20:26
• Hi @KevinZych I looking for the calendar same as the above in jquery, could you please refer me the link for the same. Thanks – Mahesh S Commented Jan 22, 2021 at 5:34
• My answer is below, although this solution is very old and I’m sure there is something else you can use. – Kevin Commented Mar 28, 2021 at 18:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

As I mentioned above, I ended up creating my own using good old tables and CSS.

Since this is a Rails app, I customize the HTML view on the server based on the available time slots. I also generate the week days and dates automatically using Ruby.

In the HAML view:

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

In the 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;
      }
    }
  }
}

Still working on the header image / css gradient, but the placeholder I used gives the right idea. I will also need to add a class and use the jQuery data tags to implement selecting a time slot, but that functionality will e. This question was mostly about the design of a control.

Here's my mostly finished product:

Here are a few jQuery plugins that I've used in the past. I really like #2 (Highcharts).

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

本文标签： javascriptjQuery Calendar time selection suggestionStack Overflow