DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExtreme v22.1正式版下載

DevExtreme附帶了一個原生的React Scheduler組件——可以與Material-UI 無縫集成。

原生 React 組件

我們的React Scheduler組件是一個原生的響應式組件，它利用了React的所有東西。該組件實現了各種響應式概念，例如受控和非受控模式、Redux 集成、實時更新和響應式屬性。

由于它與 Material-UI 的無縫集成，該組件看起來很像 Google 日歷（也是根據 Material Design Style guide 構建的）。雖然是一個高度先進的 UI 控件 - 我們試圖通過高度靈活的自定義功能讓事情變得簡單。

預約編輯界面

React Scheduler提供了多種方式來添加、編輯和刪除日程，根據您配置的插件，Scheduler可以打開一個表單并允許用戶編輯日程的每個細節，包括資源和重復模式。

要快速修改活動時間，您可以在日程表中拖動約會并調整約會大小以調整活動持續時間，還可以在工具提示中啟用刪除操作。

預約資源界面

Scheduler組件的一個非常流行的用例是資源管理（員工、設備等）。

我們的React Scheduler完全支持在其容器內顯示資源，事件資源使用不同的顏色顯示（我們默認使用 Google Material Design 顏色）。您可以通過組件的 API 輕松自定義資源顏色，甚至還可以根據需要使用Material-UI 顏色，資源信息將顯示在日程表格和工具提示中。

分組用戶界面

另一個強大的功能是分組日程的功能，這在處理大量日程和資源時很有用。

當使用我們Scheduler的分組用戶界面時，該組件將按資源和日期對日程進行分組，提供垂直和水平組。

工具提示界面

Scheduler可以包含一個工具提示，其中包含有關個人日程的附加信息，此功能的靈感來自于Google日歷，不需要額外的代碼。

為了幫助解決廣泛的使用場景，我們的 React Scheduler 為您提供了幾種自定義工具提示的方法。

視圖切換界面

為了幫助您打造最佳的用戶體驗，我們的Scheduler 可以輕松地在以下日歷視圖之間切換：

• Day View
• Week View
• Workweek View (from Week View)
• Month View
• Timeline View

日期導航界面

Scheduler組件附帶一個日期導航器——它允許您和您的用戶根據當前選擇的視圖查看不同的時間范圍，Today按鈕將您導航到當前日期，此功能包括內置日歷和快捷按鈕。

淺色、深色和自定義Material Design主題

所有DevExtreme reactive控件都附帶2個Material Design主題——明亮和暗黑，當然如果您需要也可以創建自己的主題。

附加功能

除了上述功能之外，我們的 React Scheduler 還能夠可視化不同的日程類型，包括：

• All Day
• Recurring
• Zero-time（無持續時間的提醒）

我們的Current Time Indicator是當前時間的一個小視覺元素，該組件支持 Typescript 并且可以輕松本地化。

DevExpress技術交流群6：600715373      歡迎一起進群討論