まず、ご意見をお寄せいただきありがとうございます。私のためにこれを行うように頼んでいるわけではありません。このプロジェクトにアプローチする最善の方法について、あなたの考えを知りたいだけです. 以下の画像をご覧ください。
ドイツ語であることをお詫びします。重要な翻訳は次のとおりです。
verfügbar = 利用可能
bereits reserviert = 予約済み
Uhrzeit = 時間枠
aktuelle Woche = 今週
および Mo、Di、Mi などは曜日の短縮です。
この図ではすべてが説明されていないため、何をすべきかを簡単に説明します。基本的には、「誰か」が一日中利用できるときに表示されます。データは JSON として取得され、ユーザーごとに動的に表示され、2 週間分のリストが表示されます。私たちがいる週、そしてこれからの週。
とにかく、私は文字通り、これについての最善の方法についてあなたの意見を聞きたいと思っています. 私の最初の考えは、Unix タイムスタンプ、時差を見つけて、それをピクセルに変換して、各 div の高さとして使用することでした。しかし、div を開始する場所を見つけることができないことに気付きました。(たぶん写真のように10:00から始まると思いますが、どうやって判断するのでしょうか)
キャンバスでこれを行うことを考えましたが、キャンバスの経験がほとんどないため、避けました。あなたがそれをお勧めするかどうか叫んでください。理想的な解決策を探しています。
何を学ぶべきかを知ることは、私にとって大きな助けになるでしょう。
時間をありがとう、
ピーター
編集：申し訳ありませんが、それらのことを言及するのを忘れていました。指摘してくれてありがとう：
予約された時間データも取得され、ユーザーはその期間に利用可能か利用不可かを決定できます。同じ日に 2 つのバーがあることがどれほど複雑になるかはよくわかりません。例: 06:00 から 12:00 までは利用できませんが、12:00 から 18:00 までは利用できます。なので、とりあえず避けています。
時間間隔は 15 分です。15 分ごとに 9px を高さに追加する必要があります。
返信ありがとうございます。