Clever Geek Handbook

Googleカレンダーアナログを30行に入れない



旅客輸送に携わる運送会社のプロジェクトを開発する際、システムに組み込むためのGoogleカレンダーアナログを実装するタスクが発生しました。

いくつかの理由（プロジェクトへの深い統合、さまざまなエンティティとの通信、コードのすべての部分の完全な制御など）のために、Googleのソリューションを使用することは多くの観点から非合理的でした。



したがって、問題の条件：

  1. インターフェースは、Googleからのインターフェースにできるだけ近いものにする必要があります（使用する前に）
  2. RFC 2445の通常の実装、RRULE（繰り返しパターン）に関する部分
  3. イベント（この場合はフライト）の日付の計算の高速とブラウザーでのレンダリング
  4. 既存のライブラリの使用を最大化して、費やす時間を削減します。


トピックが興味深い場合、または何か言いたいことがある場合は、 作業はまだ進行中であり、この投稿はほんの一部に影響します-カットをお願いします、意味のあるアドバイスを喜んでいます。





最初に、詳細を述べる前に、このソリューションの全体的な戦略を決定することが決定されました。 rubyとgem ice_cubeの使用に失敗しました すでにかなりの量のコードがphpで記述されており、プロジェクトの一部は別のプログラミング言語に移行するのにあまり適していません。 まあ、パフォーマンスの問題（またはRoRでの私の経験不足）。

その結果、熟考後、次のことが生まれました。

  1. カレンダーの形で視覚化するために、わずかに変更されたjQueryプラグインFullCalendarが責任を負います。
  2. 定期的なフライトの作成は、 FuelUXスイートからScheduler.jsに割り当てられます
  3. 繰り返しパターンは、「FREQ = DAILY; INTERVAL = 2; UNTIL = 20130130T230000Z;」の形式でデータベースに保存されます（各フライトを個別に保存し、繰り返しの終わりが割り当てられていない場合、個々のフライトの数は無限になります）
  4. サーバー容量をアンロードするために、繰り返しパターンの一連のフライト日付への変換がクライアント側で実装されます




最初に実装する必要があるのは、RRULEを取得し、一連の日付に変換し、FullCalendarプラグインを使用してレンダリングすることです。 短い検索の後、次の変換ソリューションが見つかりました。rrule.jsはブラウザーで、node.js上のアプリケーションとして機能し、クライアントからサーバーに転送する機能をさらに提供します。



おおよそのパスは明確です-始めましょう。 すぐに警告します。プロトタイプが開発されており、コードは高品質の指標ではなく速度指標に基づいて記述されています。



フィールド名、長さ、繰り返しパターン自体を持つRRULEルールのjson配列があるとします。 バックエンドからの領収書は省略します。 

[{ "name": "Reccurence Event #1", "length": "120", "rrule": "DTSTART=20020201T083000Z;FREQ=WEEKLY;WKST=MO;BYDAY=WE,FR" }, { "name": "Reccurence Event #2", "length": "120", "rrule": "FREQ=MONTHLY;DTSTART=20000201T083000Z;WKST=MO;BYDAY=TU" }, { "name": "Reccurence Event #3", "length": "120", "rrule": "FREQ=DAILY;DTSTART=20000201T063000Z;WKST=MO;BYDAY=MO,FR" } ]


配列を初期化し、RRULE文字列からrrule.jsプラグインオブジェクトを作成します。 

 var data = private_env.get_data(); var rules = new Array(); var occurs = new Array(); for (var k in data){ rules.push( { name: data[k].name, length: data[k].length, rrule: RRule.fromString(data[k].rrule) }); }


オブジェクトから各フライトの日付のリストを取得します。DATE_STARTとDATE_ENDは、取得する必要がある距離の開始と終了に対応しています。 

 for (var k in rules){ occurs.push( { name: rules[k].name, length: rules[k].length, occurs: rules[k]['rrule'].beetween(DATE_START,DATE_END) }); }


レンダリングする前にカレンダーをクリアします。 

 $calendar.fullCalendar('removeEvents', function (event){ return true; });


そして、画面にフライトを表示します。 

 for (var k in occurs){ for (var i in occurs[k].occurs){ var event = { id: k, title: occurs[k].name, start: occurs[k].occurs[i], /*         ,   */ end: new Date(occurs[k].occurs[i].getTime()+(1000*60*occurs[k].length)), allDay: false }; /*  renderEvent,       , ..   */ $calendar.fullCalendar('renderEvent', event, 1, 0); } } /*    ,   1   */ this.fullCalendar('renderEvent',{allDay: false}, 0, 1);


上記のすべてを1つの関数でラップします。たとえば、レンダリング（DATE_START、DATE_END）で、viewRenderイベント中にFullCalendarプラグインを呼び出します。 

 ... viewRender: function(view, element){ $(private_env.env_self).service('render', 'between', view.visStart, view.visEnd); } ...




現時点では、次の図について把握しています。





UPD ： 例



投稿をコードからシートに変換する意味はありません。一般的な考え方は明確だと思います。 外観などを変更することは難しくありません。



作成と編集に関するいくつかの言葉。



FullCalendarの多数のイベントにより、編集機能を実装できます。 必要な機能：

  1. クリックすると、フライト編集フォームが開きます
  2. ドラッグアンドドロップするとき、アクションオプションのリクエストを発行します。 単一のフライトの編集、繰り返しチェーン全体の編集、将来の繰り返しの編集


タスクは簡単で、イベントeventClick、eventDrop、eventResizeで関数をハングさせることになります。 ところで、最後の2つにはアクションをキャンセルする機能があります。 

 ... revertFunc(); ...


唯一の注意点。 「単一のフライトのみを変更する」を選択すると、「RRULE FREQ = MONTHLY; DTSTART = 20000201T083000Z; WKST = MO; BYDAY = TU」を3つの異なるパターンにカットします。

これの飛行前に何が起こったのか、現在の飛行自体、そしてその後に何が起こるのか。 これは、DTSTARTおよびUNTILルールのオプションを変更することで解決されます。



フライトの作成に関しては、Scheduler.jsはRFC 2445に従って繰り返しの文字列を出力できます。これは必要なものです。 

 ... $('#myScheduler').scheduler('value') ...


このプラグインの寄せ集めの修正にはまだかなり時間がかかりますが、移動する方向は明確です。

そして、あなたの注意に感謝します。批判や改善の提案があれば、スタジオでお願いします。


More articles:


All Articles