1

さて、私はこの問題に対して頭を悩ませてきました (数ヶ月)。しかし、イベントを動的に追加し、複数日のイベントをサポートできる Javascript を使用してカレンダーを作成する簡単な解決策を見つけることができないようです。

私の最初のアプローチは、年、月、日に関連付けられた ID を持つ div を使用することでした。これにより、イベントを簡単に追加できるようになりました。ここでの問題は、複数日のイベントをサポートする方法がないことです。ただし、1 日のイベントを追加するのは簡単です。

私の最新のアプローチは、Googleカレンダーを分析することでした。彼らは明らかにテーブルを使用しています。これは、(colspanを使用して)複数日のイベントブロックを簡単にサポートするため、優れたソリューションですが、テーブルにイベントを追加/レンダリングすることはまったく別の偉業のようです.それらを列/セルブロックに単純に追加することはできないためです。新しい行を生成する必要があり、イベントを押し下げる複数日のイベントの場合は、カレンダーのそれらの部分も再レンダリングする必要があります。これは、私が取り組んできた現在の「動的」アプローチへのリンクです: https://r3dux.com/css/caldyn.php

これは、イベントがどのように見えるかを示す静的バージョンです: https://r3dux.com/css/cal.php

サードパーティ製のカレンダーは一切使用したくありません。これを純粋な Javascript で行いたいのですが、Jquery やその他のフレームワークは使用しません。

これにアプローチするためのいくつかの提案や別の方法を教えていただければ、それは非常に役に立ちます。

基本的な要件は、複数日のイベントのサポートがあり、「週」ビュー (現在と次の週のみを表示) に適応でき、イベントの各日の開始/終了時刻を個別に表示できることです。また、夏時間と標準時間にまたがるイベントのスケジューリングをサポートする必要もあります。同様に、現在 DST であり、STD のときに将来のイベントをスケジュールする場合、ユーザーが DST 中に選択した時刻をイベントがスケジュールされたときにしたいので、切り替えが発生しても時刻は 1 時間変わりません。

4

1 に答える 1

2

まず、関数のリファクタリングを検討しrenderCalendarます - それは巨大です! そのコードで複数日のイベントを実装することはもちろん、想像するのも簡単ではありません。

古い未完成のコード (目標は Google のようなカレンダーを作成することでした) に基づいてフィドルを作成しました。それはあなたが望むものとはかけ離れていますが、そこからいくつかのアイデアを引き出すことができるかもしれません.

サードパーティのライブラリなしで作成されていますが、最新のブラウザが必要です。mapただし、、、などのsome関数は簡単にポリフィルできます。

、およびプロトタイプはCalendar、巨大なメソッドを回避する方法として機能します。たとえば、レンダリング メソッドのロジックを削除して、MVC パターンに完全に従うことで、開発が容易になります。DayEvent

イベントを動的に追加するには、 をプッシュしEventCalendar.eventsを呼び出しますCalendar.render()。すでに複数日のイベントと単一のイベントを「サポート」していますが、間違いなくいくつかの作業が必要です。

幸運を!

于 2013-06-26T10:35:34.847 に答える