当前位置: 首页 > wzjs >正文

国内最大的c2c网站咸阳seo

国内最大的c2c网站,咸阳seo,网站开发多少工资,wordpress 网速devextreme-react/scheduler系列文章目录 第一章 scheduler 简单学习 第二章 scheduler 分组groups,资源Resource属性学习 文章目录 devextreme-react/scheduler系列文章目录前言一、本章使用的属性二、代码template.jsdata.jsstyle.css三.效果四.属性分析resource…

devextreme-react/scheduler系列文章目录

第一章 scheduler 简单学习
第二章 scheduler 分组groups,资源Resource属性学习


文章目录

  • devextreme-react/scheduler系列文章目录
  • 前言
  • 一、本章使用的属性
  • 二、代码
  • template.js
  • data.js
  • style.css
  • 三.效果
  • 四.属性分析
    • resourceCellRender
    • appointmentComponent
    • dataCellComponent
  • 五 那怎么样定制上的?
  • 总结


前言

基于上一章节,我们完成了scheduler的分区属性了解。接下来我们修改课程的呈现,以及给老师行加上一点不同的样式。

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


一、本章使用的属性

resourceCellRender:重写分类资源,定制分类资源的呈现。
appointmentComponent:重写/定制约会(课堂)资源的呈现。
dataCellComponent:对每个单元格的重写定制

以上三个属性,接收的都是组件

二、代码

准备工作:

npm i react-icons
npm i moment

提示:此处下载react-icons 是为展示图标,moment为了转换日期样式

template.js

引入resourceCellRender,appointmentComponent,dataCellComponent属性的使用

import React from 'react'
import Scheduler, { Editing, Resource } from "devextreme-react/scheduler";
import { data, teachers } from './data';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import './style.css'
import moment from 'moment';
export default function template() {const resourceCellRender = (props) => {return <div>{props.data.icon}{props.data.text}</div>}const appointmentComponent = (e) => {return <divstyle={{backgroundColor: '#009688',color: 'white',borderRadius: '5px',height: '100%',}}>{e.data.appointmentData.text}<br />{moment(e.data.appointmentData.startDate).format("HH:mm")}{moment(e.data.appointmentData.endDate).format("HH:mm")}</div>}const dataCellComponent = (props) => {const { data: { groups: { teacherID } } } = props;if (teacherID === 1) {return null} else {return <div>无数据</div>}}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}width={1400}height={730}groups={["teacherID"]}//本章节的核心代码// 定制老师单元格resourceCellRender={resourceCellRender}//定制资源单元格appointmentComponent={appointmentComponent}//定制单元格dataCellComponent={dataCellComponent}><Resourcelabel="Teacher"dataSource={teachers}fieldExpr="teacherID"allowMultiple={false}/></Scheduler></div>)
}

data.js

import { nanoid } from 'nanoid';
import { Fa1, Fa2, Fa3, Fa4, Fa5 } from "react-icons/fa6";
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(2025, 3, 1, 12,25),endDate: new Date(2025, 3, 1, 13,15),}
];data.forEach((item) => {item.id = nanoid()
})
data.sort((a, b) => a.startDate - b.endDate)//本章节的核心代码,给每个老师,加图标显示
const teachers = [{ text: '张老师', id: 1, icon: <Fa1 /> },{ text: '李老师', id: 2, icon: <Fa2 /> },{ text: '王老师', id: 3, icon: <Fa3 /> },{ text: '秦老师', id: 4, icon: <Fa4 /> },{ text: '赵老师', id: 6, icon: <Fa5 /> },]export { data, teachers }

style.css


.dx-scheduler-cell {height: 100%; /* 使单元格高度充满 */}.dx-scheduler-appointment {
/* 原来单元格默认是蓝色,本章中去掉默认背景颜色 */background-color: transparent; color: "yellow";
}

三.效果

在这里插入图片描述

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

四.属性分析

resourceCellRender,appointmentComponent,dataCellComponent,

以上三个属性,接收的都是组件。

resourceCellRender

其组件props得到, "Resource"传的teachers的数组中object。
例如,本文中的

{"data": {"text": "张老师","id": 1,"icon": ""},"id": 1,"text": "张老师"
}

appointmentComponent

其组件props得到, 资源object。
例如,本文中的

{"data": {"appointmentData": {"text": "体育课","teacherID": 1,"startDate": "2025-04-01T04:25:00.000Z","endDate": "2025-04-01T05:15:00.000Z","id": "tdwZjPILO6dSI1eLck0u_"},"targetedAppointmentData": {"text": "体育课","teacherID": 1,"startDate": "2025-04-01T04:25:00.000Z","endDate": "2025-04-01T05:15:00.000Z","id": "tdwZjPILO6dSI1eLck0u_","displayStartDate": "2025-04-01T04:25:00.000Z","displayEndDate": "2025-04-01T05:15:00.000Z"}},"index": 0
}

dataCellComponent

其组件props得到
例如,本文中的

{"data": {"startDate": "2025-04-01T15:30:00.000Z","endDate": "2025-04-01T16:00:00.000Z","groups": {"teacherID": 1},"groupIndex": 0,"text": ""},"index": 29
}

提示:此处得到每个单元格text都是空字符串

五 那怎么样定制上的?

本章中主要根据组件中传回的属性props的数据的不同,来根据个人喜好,修改呈现样式的


总结

例如:以上就是今天要讲的内容,本文仅仅简单介绍了scheduler的分组resourceCellRender,appointmentComponent,dataCellComponent属性使用。下一章,editing,appointmentDragging属性,托拽联合使用的学习

http://www.dtcms.com/wzjs/435214.html

相关文章:

  • 便宜的香港云服务器宁波seo营销平台
  • 做游戏网站定位搜索引擎营销的方法不包括
  • 专业做网站技术搜狗网站
  • 广州兼职网网站建设网络营销有哪些例子
  • 网站制作视频教程惠州百度推广排名
  • 做网站布为网wordpress官网入口
  • seo图片优化seo专业培训中心
  • 怎样改网站英文域名百度seo搜索引擎优化培训
  • 外国平面设计网站有哪些独立站seo优化
  • 电子商务网站建设完整案例教程软文推广软文营销
  • 目前网站建设用哪种语言培训网址
  • 一般政府网站用什么做安卓优化大师破解版
  • 深圳家装互联网网站站长工具5g
  • 移动端网站开发项目报告资讯门户类网站有哪些
  • 网站建设明细报价单南昌seo排名
  • 内部劵淘网站怎么做24小时免费看的视频哔哩哔哩
  • 图书馆门户网站建设方案关键词挖掘工具爱网
  • 做网站云服务器装系统免费建自己的网址
  • 做亚马逊跨境电商赚钱吗aso安卓优化
  • 对手网站分析简述如何优化网站的方法
  • wordpress怎么链接到文件武汉seo网站排名优化公司
  • 服装服饰设计网站免费网络推广网站
  • 茂名市住房和城乡建设局网站下拉关键词排名
  • 微商城小程序定制开发seo网络推广员招聘
  • 响应式网站用什么工具做百度的网址是什么呢
  • wordpress连接微博 破解网站优化平台
  • 快速做网站的软件seo优化工具有哪些
  • 北京专做粮油米面的配送网站西安seo招聘
  • 没有网站可以做seo西安百度公司
  • 番禺建设网站公司排名湖南网站seo推广