第二章 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>
            <Scheduler
                defaultCurrentView="day"
                dataSource={data}
                defaultCurrentDate={new Date()}
                views={["day", "week", "month"]}
                startDateExpr='startDate'
                endDateExpr='endDate'
                showAllDayPanel={false}
                startDayHour={9}
                endDayHour={24}
                height={730}
                //本章加的核心代码
                groups={["teacherID"]}
            >
            //本章加的核心代码
                <Resource
                    label="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属性使用。下一章，定制课程卡片呈现