キーテイクアウト

Kendo UIフレームワークの一部であるKendo UIスケジューラには、使用するための商用ライセンスが必要であり、必要なすべての機(jī)能を備えた基本的で簡単にカスタマイズ可能なスケジューラを提供します。ただし、Kendo UIフレームワークの他のコンポーネントに興味がない場合は、最良の選択ではないかもしれません。 サードパーティのjQueryプラグインであるFullCalendarは、アプリケーションを完全に制御できる軽量ツールです。要件に応じて、追加の機(jī)能で強(qiáng)化できるミニマルな基本カレンダーを提供します。 MITライセンスの下でリリースされています。これは、その使用法にほとんど制限がありません。
• DHTMLXSCHEDULERは、無料の標(biāo)準(zhǔn)版、モバイルバージョン、Windows 8バージョン、および機(jī)能が豊富なProエディションにあるスタンドアロンのJavaScriptイベントカレンダーです。 Googleマップとの統(tǒng)合の例と初心者向けのガイドのセットで、スケジューラが必要な場合、それは良い選択です。
獨(dú)自のスケジューラを作成するときは、外部Webにアクセスできないイントラネットアプリケーションの構(gòu)築、システムに既に存在するデータの視覚化と管理、またはGoogleがサポートされていない高度な機(jī)能が必要な場合など、ユースケースを検討してください。カレンダー。
• 日は急速に動いており、現(xiàn)代人は自分の人生を整理するためにたくさんの粘著性のメモではなく、オンラインスケジュールアプリを選択します。オンラインアプリは、スマートフォンまたはラップトップで使用できます。また、デバイス間でデータを同期する必要はありません。獨(dú)自のカレンダーまたはスケジューラを作成したいが、どこから始めればよいかわからない場合は、恐れがありません。この記事の目的は、あなたの決定を支援することです。
既存のスケジューラを使用する代わりに、なぜ獨(dú)自のスケジューラを作成するのですか？さて、ここにいくつかのユースケースがあります：

• 3つの異なるタイプのJavaScriptカレンダーをご覧ください。
  • kendo uiスケジューラは、kendo uiフレームワークの一部である
  • フルカレンダー、サードパーティのjQueryプラグイン
  • dhtmlxscheduler - astand-alone javascriptイベントカレンダー

  スケジューラの作成

  

  始める前に、私たちにとって価値がある特性を定義しましょう。

  利用規(guī)約
  外観
  ユーザビリティ
  コーディングの複雑さ
  さて、今から始めましょう。
  kendo uiスケジューラ
  このスケジューラを使用するために、ライブラリパッケージ全體を取得する必要があります。または、カスタムダウンロードを使用すると、必要なモジュールを選択できますが、使用するには商用ライセンスが必要です。 30日間のトライアルを取得するには、Webフォームに記入するか、ソーシャルネットワークアカウントを介して登録する必要があります。ちなみに、Kendo UIの無料オープンソースバージョンも利用できます。 Kendo UI Coreと呼ばれ、このGitHubページの詳細(xì)を確認(rèn)できます。しかし、殘念ながら、スケジューラはその部分の1つではありません。

  ライブラリを抽出した後、基本的なスケジューラを作成できます。まず、必要なファイルを含めます：

  kendo ui javascriptファイルの前にjqueryを含める必要があることに注意してください。

  <link rel="stylesheet" href="styles/kendo.common.min.css" />
  <link rel="stylesheet" href="styles/kendo.default.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/kendo.all.min.js"></script>
  

  次のステップは、スタイルを定義することです。 およびタグのスタイリングに加えて、フルスクリーンモードで見栄えを良くするために、スケジューラのコンテナの適切なスタイルを定義する必要があります。
  これで、コンストラクターを使用してスケジューラを初期化できます。

  <span>html<span>, body</span>{
  </span>  <span>margin:0;
  </span>  <span>padding:0;
  </span>  <span>height: 100%;
  </span><span>}
  </span><span><span>#scheduler</span> {
  </span>  <span>border-width: 0;
  </span>  <span>height: 100%;
  </span><span>}
  </span>

  ビュープロパティを使用すると、1日、週、月のビューを有効にして、最初に選択したものを選択できます。

  このコードは、以下に示す基本的なスケジューラを作成します：

  <div ></div>

  <span>$("#scheduler").kendoScheduler({
  </span>  <span>// The current date of the scheduler
  </span>  <span>date: new Date(),
  </span>  <span>views: [
  </span>    <span>"day",
  </span>    <span>{ type: "week", selected: true },
  </span>    <span>"month"
  </span>  <span>]
  </span><span>});
  </span>

  ダブルクリックすると、新しいイベント作成ウィンドウが開きます。

  作成されたイベントはドラッグ可能であるため、必要に応じて再配置できます。もう1つの便利な機(jī)能は、スケジュールのナビゲーションに役立つミニカレンダーです。

  /丸1日を表示トグルボタンは、通常のイベントから作業(yè)時間イベントをフィルタリングするのに役立ちます。スケジューラの下部で見つけることができます：
  スケジューラは直感的で、必要なすべての基本的な機(jī)能があります。イベントを作成して、カレンダーグリッドを介して移動できます。ミニカレンダーや

  show営業(yè)時間などのその他の機(jī)能ボタンはかなり便利です。 デフォルトで得られるのはそれだけなので、一緒に進(jìn)みましょう。

  fullcalendar

  このカレンダーはMITライセンスの下でリリースされているため、どのように使用できるかについてはほとんど制限がありません。このカレンダーをインストールできるさまざまな方法があります。Bowerを使用したり、CDNJSを介して必要なファイルをページに追加するか、JavaScriptとCSSファイルを使用してパッケージをダウンロードできます。詳細(xì)については、ダウンロードページを確認(rèn)してください。

  前進(jìn)する前にもう1つのこと。 FullCalendarはjQueryプラグインであるため、ページに追加することを忘れないでください。別の依存関係は、日付を扱うためのJavaScriptライブラリであるempon.jsです。 CDNを使用した場合に備えて、ページにファイルを含める方法は次のとおりです。

  その後、カレンダーを保持するDivコンテナを定義し、必要に応じてCSSルールを定義し、最後にカレンダーを初期化することができます。たとえば、コンテナがあります：

  <link rel="stylesheet" href="styles/kendo.common.min.css" />
  <link rel="stylesheet" href="styles/kendo.default.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/kendo.all.min.js"></script>
  

  初期化プロセスがどのように見えるかが次のとおりです

  <span>html<span>, body</span>{
  </span>  <span>margin:0;
  </span>  <span>padding:0;
  </span>  <span>height: 100%;
  </span><span>}
  </span><span><span>#scheduler</span> {
  </span>  <span>border-width: 0;
  </span>  <span>height: 100%;
  </span><span>}
  </span>

  ご覧のとおり、このカレンダーを機(jī)能させるために必要なコードはあまりありません。そして、デフォルトでは、使用できる機(jī)能はそれほど多くありません。

  ここでは、デフォルトのスケジューラがどのように見えるかを見ることができます：

  <div ></div>

  これは、現(xiàn)在の日付が強(qiáng)調(diào)表示されている月のビュー、表示された月を変更する可能性、

  今日のボタンです。それだけです。ご存知のように、FullCalendarはある種のDIY-Toolです。使用できる便利な機(jī)能がたくさんありますが、デフォルトのカレンダーは

  非常に

  基本です。必要な最小限の機(jī)能のみを備えた最小限のアプリケーションを作成したい場合は、良い選択です。

  アプリの外観と動作をより良くするために、いくつかのコードを記述しましょう： カスタムテーマを使用する必要があるため、必要なCSSファイルを追加する必要があります。

  もう終わった！最後のステップは、レンダリングするイベントを定義することです。イベントを定義できるさまざまな方法があります。配列として、JSONフィードとして、さらには関數(shù)としてです。

  例を次に示します

  <span>$("#scheduler").kendoScheduler({
  </span>  <span>// The current date of the scheduler
  </span>  <span>date: new Date(),
  </span>  <span>views: [
  </span>    <span>"day",
  </span>    <span>{ type: "week", selected: true },
  </span>    <span>"month"
  </span>  <span>]
  </span><span>});
  </span>

  さあ、結(jié)果を確認(rèn)しましょう：
  今回ははるかに優(yōu)れています！これで、ビューを変更し、既存のイベントをドラッグしてサイズ変更し、営業(yè)時間が強(qiáng)調(diào)され、週と日ごとのビューが他のイベントから終日イベントをフィルタリングできます。

  <link rel='stylesheet'  />
  
  <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>
  

  これがF(xiàn)ullCalendarの全體的な印象です。これは、アプリを完全に制御できる軽量ツールとして設(shè)計されています。低機(jī)能の基本アプリケーションを作成してから、必要な機(jī)能を1つずつ追加できます。そして、それらがたくさんあります：著色、イベント、既存のビューのカスタマイズなど。このドキュメントページを完全なリストについて確認(rèn)してください。

  dhtmlxscheduler

  ダウンロードページを確認(rèn)すると、無料の標(biāo)準(zhǔn)版が利用可能であることがわかります。さらに、モバイルバージョンとWindows 8バージョンの2つの特別版が利用可能です。拡張機(jī)能を取得したい場合は、Proエディションを購入できます。

  基本的なチャートを作成するには、codebaseフォルダーからHTMLファイルへのいくつかのファイルを含める必要があります。

  <link rel="stylesheet" href="styles/kendo.common.min.css" />
  <link rel="stylesheet" href="styles/kendo.default.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/kendo.all.min.js"></script>
  

  ここで、必要な
  セクションを定義できます
  そして最後に、スケジューラを初期化することができます：

  <span>html<span>, body</span>{
  </span>  <span>margin:0;
  </span>  <span>padding:0;
  </span>  <span>height: 100%;
  </span><span>}
  </span><span><span>#scheduler</span> {
  </span>  <span>border-width: 0;
  </span>  <span>height: 100%;
  </span><span>}
  </span>

  <div ></div>

  init（）メソッドは、dhtmlxschedulerオブジェクトを初期化します。この場合、スケジューラは、以前に定義されたスケジューラ_ HOREコンテナ內(nèi)で初期化されます。 new Date（）は、現(xiàn)在の日付をスケジューラの初期日付値として設(shè)定します。 「週」パラメーターは、初期ビューを設(shè)定します?？激à椁欷雮帳?、「日」、「週」、「月」です

  <span>$("#scheduler").kendoScheduler({
  </span>  <span>// The current date of the scheduler
  </span>  <span>date: new Date(),
  </span>  <span>views: [
  </span>    <span>"day",
  </span>    <span>{ type: "week", selected: true },
  </span>    <span>"month"
  </span>  <span>]
  </span><span>});
  </span>

  すべての準(zhǔn)備が整っており、デフォルトのスケジューラがどのように見えるかを見ることができます：

  デフォルトでは、日、週、月のビューを切り替える可能性があります。今日の日付が強(qiáng)調(diào)されていますが、スケジュール內(nèi)で自分を失った場合は、ボタンを使用してください。 適切なカレンダー領(lǐng)域をダブルクリックすることで、新しいイベントを作成できます。イベントのサイズを変更すると、期間が変更されます。ドラッグアンドドロップイベントの並べ替えも利用できます

  長期イベントを作成するには、イベントの左側(cè)にある詳細(xì)ボタンを使用する必要があります。

  スケジュールでその場所を変更するには、月ビューを選択する必要があります。

  

  全體的な結(jié)果 kendo uiスケジューラ

  Kendo UIは、大きくて高度なJavaScriptフレームワークです。大量のウィジェットとツールが含まれています。他のコンポーネントに興味がない場合は、スケジューラウィジェットを使用することは良い考えではないかもしれません。 Kendo UIのドキュメントはよく書かれており、コードの例を添えたスケジューラデモの束を確認(rèn)できます。コーディングに関しては、基本的なスケジューラを構(gòu)築して、いくつかの機(jī)能を追加するのに時間がかかりません。デフォルトのビューは少し平易ですが、それを変更するのは簡単です。
  fullcalendar

  これは、自分が何を望んでいるかを知っている人にとっては良い選択です。目標(biāo)を得るために何をすべきかを説明する詳細(xì)なステップバイステップガイドはありません。簡単な入りガイドとドキュメントページのみ。軽量。

  dhtmlxscheduler

  スケジューラが必要な場合、これは非常に良い選択です。 Googleマップとの統(tǒng)合の例があるため、必要に応じて基本機(jī)能を拡張できます。ドキュメントページには、初心者に役立つガイドのセットが含まれています。このスケジューラの動作を行うために必要な

  コンテナの束は、最初にあなたを混亂させるかもしれませんが、全體的なコーディングプロセスは非常に明確です。 JavaScriptカレンダーとスケジューラーに関するよくある質(zhì)問（FAQ）

  JavaScriptカレンダーまたはスケジューラで探す重要な機(jī)能は何ですか？

  JavaScriptカレンダーまたはスケジューラを選択するとき、考慮すべきいくつかの重要な機(jī)能があります。まず、日、週、月、アジェンダビューなど、さまざまなビューを提供するツールを探してください。これにより、イベントを最も適切な形式で表示できます。第二に、ツールがドラッグアンドドロップ機(jī)能をサポートしているかどうかを検討します。これにより、ユーザーがイベントを管理しやすくなります。第三に、ツールがカスタマイズ可能なテンプレートを提供しているかどうかを確認(rèn)してください。そうすれば、ウェブサイトまたはアプリケーションに合わせてカレンダーまたはスケジューラのルックアンドフィールを調(diào)整できます。最後に、ツールがGoogleカレンダーやOutlookなどの他のシステムとの統(tǒng)合をサポートするかどうかを検討してください。カスタマイズ可能なテンプレート。これにより、ツールのルックアンドフィールを変更できます。これには、カレンダーまたはスケジューラの配色、フォント、またはレイアウトの変更が含まれる場合があります。一部のツールでは、イベントにカスタムフィールドを追加することもできるため、ユーザーに追加情報を表示できます。ツールをカスタマイズするには、通常、CSSまたはHTMLコードを変更する必要があります。具體的な手順については、ツールが提供するドキュメントを必ず確認(rèn)してください。

  JavaScriptカレンダーまたはスケジューラーを他のシステムと統(tǒng)合できますか？ 。これは、GoogleカレンダーやOutlookなどの外部カレンダーとツールを同期する場合に特に便利です。一部のツールは、データベースとの統(tǒng)合もサポートしているため、中央の場所からイベントを保存および取得できます。ツールを別のシステムに統(tǒng)合するには、通常、ツールが提供するAPIまたはプラグインを使用する必要があります。

  JavaScriptカレンダーとスケジューラはモバイルデバイスをサポートしていますか？

  ほとんどの最新のJavaScriptカレンダーとスケジューラーは、レスポンシブになるように設(shè)計されています。つまり、さまざまな畫面サイズに適応し、デスクトップデバイスとモバイルデバイスの両方でうまく機(jī)能します。また、一部のツールはタッチサポートを提供しているため、ユーザーがタッチスクリーンデバイスのカレンダーまたはスケジューラと対話しやすくなります。ただし、モバイルサポートのレベルはツール間で異なる場合があるため、決定を下す前にモバイルデバイスのドキュメントをチェックしたり、モバイルデバイスのツールをテストしたりする価値があります。 ??>

  JavaScriptカレンダーまたはスケジューラにイベントを追加するには、通常、イベントオブジェクトを作成してツールのデータソースに追加することが含まれます。イベントオブジェクトには、通常、イベントの開始時間と終了時間、タイトル、説明などのプロパティが含まれます。一部のツールでは、イベントにカスタムフィールドを追加することもできるため、ユーザーに追加情報を表示できます。イベントオブジェクトを作成したら、ツールが提供する方法を使用してツールのデータソースに追加できます。具體的な指示についてはドキュメントを必ず確認(rèn)してください。

  JavaScriptカレンダーまたはスケジューラを無料で使用できますか？ 。無料のツールは、小規(guī)模プロジェクトやJavaScriptカレンダーやスケジューラーを始めるための良いオプションです。ただし、有料ツールと比較して制限があるか、特定の機(jī)能がない場合があります。 コンテンツ管理システム（CMS）を備えたJavaScriptカレンダーまたはスケジューラを使用できますか？ WordPressやJoomlaなどのコンテンツ管理システム（CMS）。これは、CMSベースのWebサイトにカレンダーまたはスケジューラを表示する場合に特に便利です。 CMSでツールを使用するには、通常、ツールが提供するプラグインまたはモジュールをインストールする必要があります。具體的な指示については、必ずドキュメントを確認(rèn)してください。

  JavaScriptカレンダーまたはスケジューラでタイムゾーンを処理するにはどうすればよいですか？

  JavaScriptカレンダーとスケジューラーを操作するときのタイムゾーンの処理は課題になる可能性があります。ただし、多くのツールは、UTC時間のサポートやユーザーのタイムゾーンに基づいたイベント時間の自動調(diào)整など、これを支援する機(jī)能を提供します。ツールのタイムゾーンを処理するには、通常、ツールの構(gòu)成にタイムゾーンオプションを設(shè)定するか、ツールが提供するメソッドを使用する必要があります。具體的な手順については、ドキュメントを必ず確認(rèn)してください。

  プロジェクト管理にはjavaScriptカレンダーまたはスケジューラを使用できますか？

  はい、多くのJavaScriptカレンダーとスケジューラーはプロジェクト管理に適しています。タスクのスケジュール、進(jìn)捗を追跡し、リソースを管理するのに役立ちます。一部のツールでは、ガントチャートやリソースビューなど、プロジェクト管理用に特別に設(shè)計された機(jī)能を提供しています。プロジェクト管理にツールを使用するには、通常、イベントとしてタスクを表示し、適切なビューを使用するように構(gòu)成する必要があります。具體的な指示については、必ずドキュメントを確認(rèn)してください。

以上がJavaScriptカレンダーとスケジューラーの比較の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。