React Scheduler - 柔軟なイベントカレンダーコンポーネント
- 日、週、月、予定、年、タイムラインビューなど、さまざまなビューで鮮やかなイベントを表示します。
- 細かくグループ化されたイベントを持つ複数のカレンダーを単一のレイアウトで表示します。
- すぐに使える組み込みテンプレートオプションで簡単にカスタマイズできます。
Quick Overview Video
Trusted by the world’s leading companies
概要
ライブデモを見る
React Scheduler、またはイベントカレンダーは、ユーザーが時間を効率的に管理するのに役立つフル機能のイベントカレンダーコンポーネントです。エディターのポップアップ、ドラッグアンドドロップ、サイズ変更アクションを通じて、リソースのスケジュール設定やイベントや予約の再スケジュールを容易にします。
Syncfusion React Schedulerを選ぶ理由
高パフォーマンス
React Schedulerは、転送時間とロード時間を短縮するために、デフォルトでオンデマンドでデータをロードします。異なるフィールド名を持つデータソースにSchedulerをバインドする場合、適切なフィールドマッピングが必須です。
シームレスなデータバインディング
データマネージャーの助けを借りて、JSON、OData、WCF、RESTful Webサービスなど、さまざまなローカルおよびリモートデータソースとデータをシームレスにバインドします。
組み込みビュー
日、週、勤務週、月、予定、月-予定、年、タイムラインなど、いくつかの異なる組み込みビューモードが利用可能です。さまざまなビュー固有の変数を使用して、各ビューをカスタマイズできます。
定期的なイベント
組み込みの繰り返しオプションを使用して、日、週、月、年単位で繰り返す定期的なイベントを簡単に設定できます。
複数のリソースとグループ化
複数の要素に従ってリソースをグループ化するために、React Schedulerは幅広い柔軟なオプションを提供します。また、リソースと日付によるスケジューリングタイムラインと予約のグループ化もカバーしています。
あらゆる解像度に適応
Schedulerは、デスクトップ、タッチスクリーン、スマートフォン向けに高い応答性を持つレイアウトと最適化されたデザインを備えています。iOS、Android、Windows OSを使用するすべての携帯電話でうまく機能します。
魅力的でカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなど、5つ以上の組み込みテーマを備えた最先端のデザイン。 オンラインTheme Studioツールを利用して、Schedulerのテーマを簡単にカスタマイズできます。
グローバル化とローカライゼーション
異なるロケールのユーザーがSchedulerを使用できるようにし、日付、通貨、番号付けを好みに合わせてフォーマットします。
よりスマートな計画のための AI Scheduler
AI Scheduler は、カレンダーを簡単に整理します。「毎週金曜日の午前10時にチームと会う」などの指示を入力するだけで、残りの処理は AI Scheduler が行います。競合をチェックし、最適な時間を提案し、カレンダーを視覚的に整理します。
React Schedulerコード例
以下のTSXコード例に示すように、いくつかの簡単なコード行でReact Schedulerを簡単に使い始めることができます。また、ReactでSchedulerをレンダリングおよび構成する方法を示すReact Schedulerの例もご覧ください。
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const data = [{
Id: 1,
Subject: 'Scrum Meeting',
Location: 'Office',
StartTime: new Date(2022, 0, 1, 9, 30),
EndTime: new Date(2023, 0, 1, 10, 30),
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
}];
return (
<div>
<ScheduleComponent height='650px' eventSettings=>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);複数のスケジューラビュー
日、週、勤務週、月、予定、月-予定、年、タイムラインなど、さまざまな組み込みビューモードが利用可能です。ビュー固有のさまざまなオプションを使用して、個々のビューを簡単に構成できます。
予定ビュー
イベントを仮想的にロードし、日ごとにグループ化されたリストとして順序どおりに表示します。React Schedulerの予定ビューで最初にロードする日数数を指定するオプションがあります。
年ビュー
年ビューは、特定年のすべての月をカレンダービュー形式で表示します。そのカレンダービューでは、イベントと予約を含む日付が、個々の日付の下に配置された点で強調表示されます。日付をクリックすると、イベントポップアップが表示され、イベントがリストされます。
タイムラインビュー
Reactは、タイムライン日、タイムライン週、タイムライン勤務週、タイムライン月、タイムライン年の5つの組み込みタイムラインビューを提供します。各ビューは、単一の日または複数の日の水平タイム軸全体にイベントを正確に表示します。
パフォーマンスを向上させるために、タイムラインビューはスクロールアクションごとにリソース、イベント、予約を仮想的にロードします。
ユニークなビュー構成
各個別のビューモードを異なるカレンダー設定で簡単に構成できます。たとえば、月ビューでグループ化機能を有効にし、週ビューでイベントテンプレートを適用できます。
インラインでの予約
この機能を有効にすると、ユーザーはスケジューラセルまたは既存の予約の件名をシングルクリックするだけで、インラインで予約を作成および編集できます。インラインテキストボックスに新しい件名テキストを入力した後Enterキーを押すと、予約が適切に更新および保存されます。
高度なイベント処理オプション
React Event Calendarは、割り当てられた期間に基づいて、Schedulerタイムライン全体でイベントと予約を明確、鮮明、正確に表現します。
追加および編集機能
デフォルトのイベントエディターを使用するか、直感的なドラッグアンドサイズ変更アクションを通じて、予約の作成と編集を容易にするなど、より良いイベント処理のための組み込みサポートがあります。さらに、カスタムデータフィールドをイベントとリソースの両方のデータソースに追加することもできます。
複数イベント選択
Ctrlキーを押しながらイベントをクリックすることで、一度に複数のイベントを簡単に選択できます。モバイルデバイスでは、イベントをタップして押し続け、他のイベントをシングルタップして選択を続けることができます。イベントを正常に選択した後、それらを同時に削除または再配置します。
ツールチップ
カスタマイズ可能なツールチップは、マウスポインターがイベントの上にホバーしている間、イベント情報を表示します。モバイルデバイスでは、イベントをタップして押し続けることで同じことができます。
外観のカスタマイズ
任意のHTMLまたはCSSを使用して、デフォルトの外観やスタイルをカスタマイズすることで、React Schedulerのイベントと予約のルックアンドフィールを変更します。
タイムゾーン
システムタイムゾーンに関係なく、React Event Calendarは、コントロール自体とイベントの両方に必要なタイムゾーンを設定することをサポートしています。
クリップボード
React Schedulerはクリップボード機能をサポートしており、ユーザーはイベントを効率的に管理できます。ユーザーはCtrl+Cショートカットを使用して選択したイベントをコピーし、Ctrl+Xでイベントを切り取り、Ctrl+Vを使用して異なる時間枠にイベントを貼り付けることができます。
適応型行
新しい同時イベントや予約が追加されたときに、月およびタイムラインビューの行の高さを自動的に増やす組み込みオプションがReact Event Calendarに追加されました。
リアルタイムデータ同期
リアルタイムの予約データは、React Schedulerと正確に同期します。
OutlookとGoogle Calendarの統合
Google Calendar APIまたはMicrosoft Outlookのオブジェクトライブラリを介して、React Event CalendarとGoogleまたはOutlook Calendar間でイベントを簡単に同期します。
リアルタイム更新
双方向データ通信により、Schedulerで行われたサーバー側の予約更新が、SignalRを介して接続されているすべてのクライアントに伝達されます。
機能豊富なカレンダーオプション
React Event Calendarは、週の最初の曜日やタイムスケールなど、ほとんどすべてのカレンダー固有の機能を継承しています。
週番号の表示
日、週、勤務週ビューの日付ヘッダーの横に、現在の期間の週番号を表示します。また、月ビューでは最初の列に週番号を表示します。週番号は、週の最初の曜日と週のルール（最初の日、最初の完全な週、または最初の4日間の週）によって決定されます。
時刻モード
Schedulerコントロールは、12時間形式と24時間形式の両方をサポートしています。
完全にカスタマイズ可能なUI
HTMLとCSSスタイルを使用して、Schedulerインターフェースの任意の部分の外観をカスタマイズします。
イベントエディターを外部から開く
React Event Calendarは、デフォルトのイベントエディターウィンドウをプログラムで開くための組み込みメソッドを提供します。
ユーザーフレンドリーなインタラクション
React SchedulerのモダンでトレンディなUIデザインは、ユーザーインタラクションをよりシンプルで効率的にします。
クイックイベント概要
イベントをクリックまたはタップすると、件名や時刻などの重要な詳細が、編集および削除オプションとともに表示されます。
セル選択
ポインターをクリックしてSchedulerセルをドラッグすると、複数セルを選択できます。キーボードショートカットでも同じことができます。
イベントコンテナー
月ビューとタイムラインビューでテキストインジケーター（+n more）をクリックすると、その日の非表示のイベントおよび予約の詳細をすべてリストするイベントコンテナーが開きます。
クイックナビゲーション
React Schedulerは、インラインカレンダーを使用して日付範囲間を前後に移動する直感的な方法を提供し、異なるビューモード間を移動することもできます。
リアルタイムアプリケーション
多くのリアルタイムアプリケーションは、Schedulerを不可欠な部分として使用しており、プロジェクトの種類に基づいてさまざまな目的に役立っています。いくつかの活発なアプリケーションは次のとおりです。運賃カレンダー、会議室カレンダー、医師の予約プランナー、ホテル客室予約。
インタラクティブな機能
React Schedulerを使用すると、イベントをExcelファイルまたはICSファイルの2つの方法でエクスポートできます。
Excelへのエクスポート
React Schedulerを使用すると、すべてのイベントをデフォルトでExcelドキュメントにエクスポートできます。また、カスタムイベントデータコレクションをエクスポートするための追加のカスタマイズオプションも提供します。
ICSのエクスポートとインポート
React Event Calendarは、すべてのイベントデータをiCal形式にエクスポートすることをサポートしており、iCalファイルからSchedulerにイベントをインポートすることをサポートしています。
開発者フレンドリーなAPI
開発者は、組み込みの、開発者フレンドリーなAPIを通じて、イベントカレンダーのUIと動作を完全に制御できます。これにより、複雑なScheduler機能でも簡単にカスタマイズできます。
アクセシビリティ
React Schedulerコンポーネントは、スクリーンリーダーによって簡単にアクセスできます。完全なキーボード操作サポートも提供されています。
完全なアクセシビリティ
React Schedulerコンポーネントは、完全なWAI-ARIAアクセシビリティをサポートしています。Scheduler UIには、高コントラストの視覚要素が含まれており、視覚障害のある人に最高の視聴体験を提供します。また、有効なUI説明は、スクリーンリーダーなどの補助技術を通じて簡単にアクセスできます。
キーボードインタラクティブ
複数セルまたはイベントの選択、他のビューへの移動など、ほとんどすべてのSchedulerアクションを実行するためのさまざまなキーボードショートカットが利用できます。
Syncfusionの完全なReactコンポーネントエコシステムを発見しよう
確立された本番環境対応のコントロールと、モダンなウェブアプリ開発のためにネイティブに構築された最新の純粋なReactコンポーネントを特徴とする、145+以上のReact UIコンポーネントをご覧ください。
-
Reactコンポーネント
-
純粋なReactコンポーネント
-
スマートコンポーネントグリッドドロップダウンインプットデータビジュアライゼーションナビゲーションボタンインタラクティブチャット
-
グリッドデータ可視化ナビゲーション
よくある質問
Syncfusion Essential Studio® React Scheduler を選ぶ理由は何ですか?
Syncfusion React Scheduler は、以下の機能を提供します。- デスクトップ、タブレット、携帯電話向けに高度に応答性があり、最適化されたデザイン。- 日、週、稼働日、月などの基本的なビュー と、年間カレンダーモード および タイムラインモード。- 仮想スクロールにより、大量のリソースとイベントを動的に読み込むことができます。- 異なるタイムゾーンに即座に適応します。- タイムライン、水平、階層、日付ビューに基づいた複数リソースのグループ化。- ソフトウェアと対話するための機能豊富なUIを提供する、市場で最高の React Scheduler の1つ。- GoogleおよびOutlookカレンダーとのイベントの簡単な同期。- シンプルな構成とAPI。- すべてのモダンブラウザをサポート。- React Scheduler を素早く学習して開始するためのデモ、ドキュメント、ビデオなどの豊富な学習リソース。
Syncfusion React Scheduler の価格はいくらですか?
React Scheduler は個別に販売していません。Syncfusion チームライセンスの一部としてのみ購入可能です。このライセンスには、React Scheduler を含む 1,600 を超えるコンポーネントとフレームワークが含まれています。チームライセンスの価格は、5人の開発者で月額395ドルからで、サブスクリプションの有効期限までサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。本日、当社の製品スペシャリストにお問い合わせいただき、追加割引の対象となるかをご確認ください。
Syncfusion React Scheduler のデモはどこで見つけられますか?
Scheduler のレンダリングと設定方法を示すReact Scheduler デモをご覧ください。
React で Scheduler を作成する方法は?
Syncfusion の無料アポイントメント Scheduler がユーザーにとって優れた選択肢となる理由は何ですか?
Syncfusion は個人および中小企業向けに無料コミュニティライセンスを提供しており、その React Scheduler は最高の無料オプションの1つとなっています。複数のビュー、リソースグループ化、イベント編集などのエンタープライズグレードの機能を制限なく提供します。
Syncfusion React Scheduler コンポーネントを個別に購入できますか?
いいえ、当社のウェブ、モバイル、デスクトップ向けの 1,600+ コンポーネントおよびフレームワーク（React Schedulerを含む）は個別に販売されていません。これらはチームライセンスの一部としてのみ利用可能です。ただし、Mitaは競合力のある価格設定を行っており、他のベンダーが Scheduler コンポーネント単体で請求するよりもわずかに高いだけです。また、私たちの経験上、お客様は通常、当社の製品の1つを使い始め、その後すぐに複数の製品に拡張することが多いため、すべての 1,600+ コンポーネントおよびフレームワークを、5人の開発者チームで月額395ドルから始まるサブスクリプション料金で提供するのが最善であると考えました。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。本日、当社の製品スペシャリストにお問い合わせいただき、追加割引の対象となるかをご確認ください。
Syncfusion React Scheduler を無料でダウンロードして利用できますか?
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間売上総収入が100万米ドル未満で開発者が5人以下の企業および個人向けには、無料コミュニティライセンスも利用できます。
Syncfusion React Scheduler を始めるにはどうすればよいですか?
当社の包括的な入門ドキュメントが最適です。
React の Schedule コンポーネントとは何ですか?
Syncfusion React の Schedule コンポーネントは、完全に機能するカレンダーおよびアポイントメント管理コンポーネントです。イベントの表示、リソースの管理、ドラッグ・アンド・ドロップの有効化、ビューのカスタマイズが可能です。繰り返しイベント、タイムゾーン処理、Google や Outlook などの外部カレンダーとの統合をサポートしています。
Scheduler と Calendar の違いは何ですか?
Syncfusion React Calendar は、単一または複数の日付を選択するための軽量な日付ピッカーです。日付の表示と月や年間の基本的なナビゲーションに焦点を当てています。Syncfusion React Scheduler は、イベント、リソース、繰り返しアポイントメント、複数のビュー（日、週、月、タイムライン）、ドラッグ・アンド・ドロップ、Google や Outlook などの外部カレンダーとの統合をサポートする、フル機能のアポイントメントマネージャーです。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress.
Oliver O.
Geschäftsführung Kreation/Artdirektion
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent
Don M.
CEO
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion React Schedulerリソース
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
React Schedulerブログとチュートリアルの最近の活動
React Schedulerのブログとチュートリアルビデオの投稿は、Reactコンポーネントを使用して最初のアプリを構築するのに役立ちます。これらは、問題解決戦略を提供し、機能と機能について説明し、新機能リリースを発表し、ベストプラクティスを説明し、例のシナリオを紹介します。React Schedulerの最新情報については、当社のブログとチュートリアルビデオチャネルで最新の投稿をご覧ください。
