DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme v22.1正式版下載

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

原生 React 組件

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

由于它與 Material-UI 的無縫集成，該組件看起來很像 Google 日歷（也是根據(jù) Material Design Style guide 構(gòu)建的）。雖然是一個(gè)高度先進(jìn)的 UI 控件 - 我們?cè)噲D通過高度靈活的自定義功能讓事情變得簡(jiǎn)單。

預(yù)約編輯界面

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

要快速修改活動(dòng)時(shí)間，您可以在日程表中拖動(dòng)約會(huì)并調(diào)整約會(huì)大小以調(diào)整活動(dòng)持續(xù)時(shí)間，還可以在工具提示中啟用刪除操作。

預(yù)約資源界面

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

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

分組用戶界面

另一個(gè)強(qiáng)大的功能是分組日程的功能，這在處理大量日程和資源時(shí)很有用。

當(dāng)使用我們Scheduler的分組用戶界面時(shí)，該組件將按資源和日期對(duì)日程進(jìn)行分組，提供垂直和水平組。

工具提示界面

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

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

視圖切換界面

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

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

日期導(dǎo)航界面

Scheduler組件附帶一個(gè)日期導(dǎo)航器——它允許您和您的用戶根據(jù)當(dāng)前選擇的視圖查看不同的時(shí)間范圍，Today按鈕將您導(dǎo)航到當(dāng)前日期，此功能包括內(nèi)置日歷和快捷按鈕。

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

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

附加功能

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

• All Day
• Recurring
• Zero-time（無持續(xù)時(shí)間的提醒）

我們的Current Time Indicator是當(dāng)前時(shí)間的一個(gè)小視覺元素，該組件支持 Typescript 并且可以輕松本地化。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論