18

Twitter Bootstrapを使用して、動的に応答する週のカレンダーを作成しています。

これが私の現在の実装です: http://jsfiddle.net/dvirazulay/Lhe7C/ (ここに完全に貼り付けるには少し長かった)

そして、これが現在のスクリーンショットです。

ここに画像の説明を入力

私が達成しようとしているのは、完全に動的な設計です。バックエンドから初期ビューを生成することは問題ではありませんが、現在の実装ではテーブルを使用しているため、少し複雑です。JavaScript側でそれを維持するのは難しいのではないかと心配しています。つまり、イベントをその場で削除/追加します。

明らかに、私は理にかなったテーブルを選びました - 週のカレンダーは基本的にテーブルです。私のデザインについて説明します。

  1. イベントは 30 分以上に及ぶ場合があるため、rowspan何時間続くかを定義するために使用します。
  2. 2 つのイベントが競合している可能性があります (2 つ以上は許可しません)。現在設定されているように、それらは互いに隣り合って表示され、それぞれがイベントの幅の 50% を占め、終了時間を表すために必要なだけの高さを取ります。
  3. バックエンド側でtdは、テーブルの最後に余分な列がないようにするためにスキップする必要がある数を計算します (rowspan一部を右に押します)。

私の質問は次のとおりです。

  • これは正しいアプローチですか？
  • 同じバックエンド ロジックをフロントエンドに適用し、イベントの量に応じて表示するtr/の量を再計算する必要がありますか、それともより良い解決策がありますか?td

理想的には、適切な回答は、フロントエンド側でイベントを複雑に処理する方法や、この問題に対する代替 (レスポンシブ!) 設計を説明する必要があります。

複数のプラグインを検索して試したので、既存のプラグインを使用したくありません。また、これを非常に軽量に保ちたいのですが、要件を満たす素晴らしい提案があれば、確認したいと思います。それを！(たとえば、jQuery の週カレンダーは遅すぎて雑然としています)

注: IE9 より古いブラウザーをサポートするつもりはありません。

4

6 に答える 6

4

問題を調査し、数人のフロントエンドの専門家と相談した結果、テーブルを生成するのは簡単ではありませんが、テーブルとして保持することが最善の選択肢であるという結論に達しました。

この決定により、テーブル全体を再生成せずにスケジュールを動的に変更することは難しくなりますが、テーブルとしてテーブルにする必要がある要素をスタイリングする利点 (配置、幅、高さ、境界線など) はすべて簡単に制御できます。優れたクロスブラウザで動作します。

重要な注意点は、このアプローチがスケジュールの応答性を取るに足らない品質にしているということです。

于 2012-07-05T20:10:20.397 に答える
1

dhtmlxScheduler - Ajax/JavaScript イベント カレンダー

dhtmlxScheduler は、Google のようなスケジューラーを Web アプリや Web サイトに追加できる JavaScript イベント カレンダーです。直感的なドラッグ アンド ドロップ インターフェイスにより、エンド ユーザーはさまざまなビュー (日、週、月、年、議題、タイムラインなど) でイベントや予定をすばやく管理できます。 Web ページに Ajax ベースのイベント カレンダーを追加する簡単な方法を提供します。

于 2013-06-06T08:28:13.687 に答える
1

テーブルの使用は良いアプローチです。

OK、これは「行スパンが正しくプッシュされる」問題に対する jQuery ベースのソリューションです。この問題の原因は、バックエンドでの間違ったテーブル生成です。

たとえば、rowspan="3" の td がレンダリングされる場合、次の 2 行の同じ列インデックス位置にある td が影響を受け、右に押し出されます。これは望ましくありません。

<table border="1">
<tr>
    <td>07:30</td>
    <td rowspan="3">Event 07:30 to 09:00</td>
</tr>
<tr>
    <td>08:00</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>08:30</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>09:00</td>
    <td>C</td>
</tr>

正しい解決策は、バックエンドで正しいテーブルを生成することです。行スパンの後に td をレンダリングすることは、単純に発生しないはずです。rowspan="3" をレンダリングしていることがわかっている場合は、それに応じて行動してください。:)

とにかく、テーブルのレンダリングを変更できない場合は、jQuery を使用して修正します。

http://jsfiddle.net/9tQvu/3/

于 2013-03-04T21:24:50.337 に答える
0

テーブル セルの代わりに CSS と div を使用すると、より正確になる可能性があり、クライアント側での計算がより簡単になり、応答性を維持できます。最初のイベントの疑似 CSS/JS の例を次に示します。

.event:first-child {
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */
    position: absolute;
    top: `(10/24)*100`%; /* 41.7%, based on event start */
}
于 2013-10-11T12:47:32.483 に答える
0

イベントが別のイベントと部分的にのみ重複している場合、つまり、2 つの重複するイベントは幅の 50% を占めますが、そのうちの 1 つがより早く終了し、もう 1 つが後で終了する場合、継続するイベントはすべての幅を占めますか? 「次の」行または幅の 50% で続行しますか? イベント A が 8:00 から 8:30 までで、イベント B が 8:00 から 18:00 までの場合はどうなりますか? イベント B が別のオーバーラップするイベントが発生するまで幅をいっぱいにするのはいいことですが、少しトリッキーになる可能性があると思います。ちょっとした考え。幸せなコーディング、これは本当に素晴らしいプロジェクトです。

于 2013-06-06T08:21:30.920 に答える
0

それは完全に受け入れられる方法です。

私があなただったら、おそらくdivを使用するでしょう。なぜなら、それらはより管理しやすく、CSSを使いやすく、より標準的だからです。

それ以外は、あなたは良いアプローチを取っていると思います。おそらく、バックエンドと同じようにフロントエンドを行うべきです。なぜなら、それが機能することがわかっているからです。

イベントを処理する限り、クラスを使用してタイプごとに div をソートし、対応するクラスで使用するイベントのタイプでイベント ハンドラーを使用します (クリック以外に何が必要かはわかりません)。

于 2012-06-30T03:46:31.693 に答える