3

これは、「どのカレンダー プラグインを使用すればよいか」のもう 1 つのように思えます。それは一種のことですが、私はかなり具体的なものを探しています.

曜日と時間のレイアウトを作成する必要があります。他のカレンダー プログラムのウィークリー ビューに似ていますが、画像でわかるように少し異なります。

サーバー API 呼び出しからの日付、店舗の営業時間、および利用可能な時間帯のリストがあり、このリストをユーザーに提示して時間帯を選択できるようにする必要があります。

出発点として適切な jQuery プラグインまたはコントロールがある場合は、お知らせください。現在、私は Bootstrap テーブルを使用しており、それをカスタマイズしています。

最終結果はこのデザインと正確に一致する必要はありませんが、明らかに近いほど良いです (コントロールをカスタマイズまたはテーマ化できる場合)。

同様の例として、デザインは大きく異なりますが、Genius Bar の予約時間ピッカーがあります。これは便利ですが、使用しているコントロールが見つかりません。

タイムスロットピッカー

4

2 に答える 2

4

上で述べたように、古き良きテーブルと 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 データ タグを使用してタイム スロットの選択を実装する必要がありますが、その機能は提供される予定です。この質問は、主にコントロールの設計に関するものでした。

これが私のほとんど完成した製品です： カスタム スケジューラ

于 2013-01-30T16:46:33.513 に答える