Calendar-react-ts NPM

Calendar-react-ts

背景

本组件是采用React + Typescript开发的轻量化日程组件，起初只是应用在公司内部项目查中询面试官面试日程的功能中。当时接到需求时，线上找了一些插件，功能上多数都并不如意。于是决定自己开发一个类似的组件，分享供大家使用。

特点

本组件为一个轻量化的React日程组件，只依赖moment插件，开箱即用，无二次封装而外的依赖库；

功能

以天为维度查询日程数据；
日程模块高度，根据时间范围的大小，自动展示相应比例的高度；
拖动指定日程模块，改变该日程时间；
拖动日程模块下边缘，改变日程时间范围；

技术栈

react --------> @18.1.0
react-dom ----> @18.1.0
typescript ---> @4.6.4
moment -------> @2.29.3

安装

要求

本地需要配置nodejs环境，根据不同操作系统配置配置nodejs环境。

npm安装

$ npm i calendar-react-ts

yarn安装

未配置yarn环境需要全局安装yarn.

$ yarn add calendar-react-ts

本地开发

$ git clone git@github.com:wangzi6224/calendar-react-ts.git
$ cd  calendar-ts
$ npm install
$ npm run start

用法

import React, { useEffect, useState } from "react";
import moment from "moment";
import Calendar from "calendar-react-ts";

const initialList = [{
  id: 1,
  startTime: Date.now() - 3600 * 1000,
  endTime: Date.now() + 3600 * 1000
}];

const ScheduleRender: React.FC<{data: dataType, timestampRange: timestampRange}> = ({data, timestampRange}) => {
  return (
    <div style={{width: '90px', fontSize: "14px"}}>
      <span style={{fontSize: "12px"}}>时间范围</span>
      <div>{moment(data.startTime).format('HH:mm:ss')}</div>
      <div>{moment(data.endTime).format('HH:mm:ss')}</div>
    </div>
  );
};

const Page: React.FC = () => {
  const [scheduleList, setScheduleList] = useState<typeof initialList>(initialList);
  const [scheduleDate, setScheduleDate] = useState<number>(new Date().getTime());

  const slideChangeHandle = (currTimestamp: any[], data: { id: number; }) => {
    setScheduleList(
      scheduleList.map((item) => item.id === data.id ? ({
        ...item,
        startTime: currTimestamp[0],
        endTime: currTimestamp[1]
      }) : item)
    );
  };

  return (
    <div>
      <Calendar
        mode='week'
        isDraggable
        data={scheduleList}
        renderItemWidth={60}
        initDay={scheduleDate}
        onChange={setScheduleDate}
        onSlideChange={slideChangeHandle}
        businessRender={(timestamp: number) => <div>businessRender: {timestamp}</div>}
        scheduleRender={({ data, timestampRange }) => <ScheduleRender data={data} timestampRange={timestampRange}/>}
      />
    </div>
  );
};

API

Fields	Description	Required	Type
mode	mode字段，是默认展示以周或者日维度查询日程的方式	no	`week \| day`
isDraggable	是否支持拖拽功能，默认`false`	no	`Boolean`
data	日程数据列表，`startTime`开始时间，`endTime`结束时间	yes	`Array<{startTime: number; endTime: number;}>`
initDay	初始化时间戳，默认为当前时间戳	no	`number`
onChange	切换日期时的回调方法，参数是当前切换的时间戳	no	`(timestamp: number) => void;`
onSlideChange	当滑拖拽日程，改变日程开始时间或日程时间范围是触发	no	`(currTimestamp: [number, number], data: {startTime: number; endTime: number;}) => void;`
businessRender	传入一些自定义的业务组件	no	`(timestamp: number) => React.ReactNode;`
scheduleRender	每一个渲染的日程的内部UI组件，可以自定义一下展示的元素或者点击事件等交互行为	no	`(props: {data: {startTime: number; endTime: number;} ; timestampRange: [number, number]}) => JSX.Element;`
renderItemWidth	每一个渲染的日程的内部UI组件，可以自定义一下展示的元素或者点击事件等交互行为	no	`number`