第二章 devextreme-react/scheduler 分组groups，资源Resource属性学习

devextreme-react/scheduler系列文章目录

第一章 devextreme-react/scheduler 简单学习

---

---

前言

基于上一章节，我们完成了scheduler的初步属性了解。接下来我们给课程日历加属性group。给课程加上老师等信息区分。

官网地址-devextreme-react/scheduler -groups属性

---

一、groups，Resource是什么？

groups：指定在时间表中对计划程序的约会进行分组的资源类型。
Resource：指定调度程序中可用的资源数组。

二、代码

template.js

引入Resource属性的使用

import React from 'react'
import Scheduler, { Resource } from "devextreme-react/scheduler";
import {data,teachers} from './data';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
export default function template() {return (<div><h2>Scheduler 学生课程表</h2><SchedulerdefaultCurrentView="day"dataSource={data}defaultCurrentDate={new Date()}views={["day", "week", "month"]}startDateExpr='startDate'endDateExpr='endDate'showAllDayPanel={false}startDayHour={9}endDayHour={24}height={730}//本章加的核心代码groups={["teacherID"]}>//本章加的核心代码<Resourcelabel="Teacher"dataSource={teachers}fieldExpr="teacherID"allowMultiple={false}/></Scheduler></div>)
}

data.js

import { nanoid } from 'nanoid';const data = [{text: '语文课',teacherID: 5,startDate: new Date('2025-03-29T16:30:00.000'),endDate: new Date('2025-03-29T18:30:00.000'),}, {text: '数学课',teacherID: 2,startDate: new Date('2025-03-29T19:00:00.000'),endDate: new Date('2025-03-29T20:00:00.000'),}, {text: '英语课',teacherID: 3,startDate: new Date('2025-03-29T21:30:00.000'),endDate: new Date('2025-03-29T22:30:00.000'),}, {text: '语文课',teacherID: 5,startDate: new Date('2025-03-26T17:00:00.000'),endDate: new Date('2025-03-26T18:00:00.000'),}, {text: '数学课',teacherID: 2,startDate: new Date('2025-03-26T19:00:00.000'),endDate: new Date('2025-03-26T20:35:00.000'),}, {text: '语文课',teacherID: 5,startDate: new Date('2025-03-26T21:30:00.000'),endDate: new Date('2025-03-26T22:45:00.000'),}, {text: '体育课',teacherID: 1,startDate: new Date('2025-03-24T16:45:00.000'),endDate: new Date('2025-03-24T18:15:00.000'),}, {text: '英语课',teacherID: 3,startDate: new Date('2025-03-24T19:00:00.000'),endDate: new Date('2025-03-24T21:00:00.000'),}, {text: '语文课',teacherID: 5,startDate: new Date('2025-03-24T22:15:00.000'),endDate: new Date('2025-03-24T23:30:00.000'),}, {text: '美术课',teacherID: 4,startDate: new Date('2025-03-27T18:00:00.000'),endDate: new Date('2025-03-27T19:00:00.000'),}, {text: '体育课',teacherID: 1,startDate: new Date('2025-03-27T19:10:00.000'),endDate: new Date('2025-03-27T20:30:00.000'),},{text: '体育课',teacherID: 1,startDate: new Date(),endDate: new Date('2025-03-28T23:30:00.000'),}
];data.forEach((item) => {item.id = nanoid()
})
data.sort((a, b) => a.startDate - b.endDate)//本次章节加的核心代码
const teachers = [{ text: '张老师', id: 1 },{ text: '李老师', id: 2 },{ text: '王老师', id: 3 },{ text: '秦老师', id: 4 },{ text: '赵老师', id: 5 },]export  { data, teachers }

三.效果

上一章，我们只能看到某天有什么课程，但是该课程所属于哪个老师，我们并不知晓，现在我们加上了分区属性，可以明显看到第一列名称，是老师名字，作为区分。

四.属性分析

groups是接收list。

Resource的属性分析

1.label

指定“约会”弹出窗口字段的标签，允许最终用户分配此类资源。接收字符串string

2.dataSource

指定可用资源实例。接收数组list，字符串等

3.fieldExpr

指定此类资源的约会对象字段的名称。

4.allowMultiple

指定是否可以将多个此类资源分配给约会。布尔值类型

补充效果图

双击点击其中一个空白课程，可以看到以下弹窗

五 那分区是怎么样联系上的呢？

当groups包含Resource里的fieldExpr字段时，该分区资源就联系上了。

比如本文中的Scheduler里dataSource里对象有teacherID{1,2,3,4,5}，而’Resource’里的dataSource中也有id{1,2,3,4,5},这就一一匹配上，有就分配课程给该老师。当如果老师的id{1,2,3,4,6}.那就意味着，id为6的老师，没有课程资源

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了scheduler的分组groups，资源Resource属性使用。下一章，定制课程卡片呈现