# @event-manager/react 中文文档

规范地址：https://npmcn.com/package/%40event-manager/react/

版本：1\.3\.0
npm 元数据更新时间：2024-09-25T20:32:47.674Z
中文译文更新时间：2026-11-14T01:12:26.106Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40event-manager/react
原文对照：https://npmcn.com/package/%40event-manager/react/?lang=original
项目主页：https://github.com/jurisbandenieks/event-manager#readme
源码仓库：https://github.com/jurisbandenieks/event-manager

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：34.2 kB，28 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16
- 首次发布：2023-07-07T16:03:43.125Z
- 最新版本发布：2024-09-25T20:32:47.450Z
- 近 30 天下载量：2934（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：82（近 12 个月 0 个）

## 中文简介

反应事件管理器组件

## 安装

```sh
npm install @event-manager/react
```

也可以使用：`pnpm add @event-manager/react`、`yarn add @event-manager/react`、`bun add @event-manager/react`

## README

![build](https://github.com/jurisbandenieks/event-manager/actions/workflows/main.yml/badge.svg)

[StackBlitz 实例](https://stackblitz.com/edit/event-manager-react)

# 执行时间线管理器组件

在时间范围内查看和管理资源

没有使用依赖关系

## 安装

`npm install @event-manager/react`

## 使用量

`import { EventManager } from '@event-manager/react'`

![alt text](https://github.com/jurisbandenieks/event-manager/blob/HEAD/images/event-manager.png)

-   本构成部分提供发射活动的工具,但不处理数据处理.
-   用户有责任确定在这些事件中如何与数据互动.

### 示例

```
import React, { useMemo, useState } from 'react'
import { resources } from './data'
import {
  MonthYear,
  EventManager,
  ClickData,
  Page,
  Resource,
  getYearAndMonth,
} from './'
import { TextField, TablePagination } from '@mui/material'

function App() {
  const [page, setPage] = useState<Page>({
    current: 0,
    size: 10,
    count: Math.ceil(resources.length / 10),
    total: resources.length,
  })
  const [data, setData] = useState<Resource[]>([])
  const [monthYear, setMonthYear] = useState<Date>(getYearAndMonth())
  const [loading, setLoading] = useState(false)

  // This can be any async fetch function
  // This function is triggered my page change
  useMemo(() => {
    setLoading(true)
    setTimeout(() => {
      const data = resources.slice(
        page.current * page.size,
        (page.current + 1) * page.size,
      )
      setData(data)
      setLoading(false)
    }, 500)
  }, [page, monthYear])

  const handleClick = (data: ClickData | undefined) => {
    console.log(data)
  }

  const handleUpdateDate = (date: Date) => {
    console.log(date)
    setMonthYear(date)
  }

  const handleSearch = (text: string) => {
    console.log(text)
  }

  const handleChangePage = (
    _event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
    newPage: number,
  ) => {
    setPage({ ...page, current: newPage })
  }
  const handleChangeRowsPerPage = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setPage({ ...page, size: Number(e.target.value) })
  }

  return (
    <div className='app'>
      <EventManager
        resources={data}
        tableId={1}
        search={
          <TextField
            variant='standard'
            label='Search'
            sx={{
              margin: '0 0 24px',
            }}
            onChange={(e) => handleSearch(e.target.value)}
          />
        }
        pagination={
          <TablePagination
            component='div'
            count={page.total}
            page={page.current}
            onPageChange={handleChangePage}
            rowsPerPage={page.count}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        }
        actionsPossition='top'
        showLegend
        showTooltip
        loading={loading}
        onClick={handleClick}
        onUpdateDate={handleUpdateDate}
      />
    </div>
  )
}

export default App

```

## 用过的类型

```
Event {
  start: Date
  end?: Date
  title: string
  color?: string
}
```

```
Resource {
  id: string
  title: string
  label?: string
  events: Event[]
}
```

```
MonthYear {
  month: number
  year: number
}
```

```
ClickData = {
  event: Event
  resourceId: string
}
```

```
ID = number | string
```

```
Page = {
  current: number
  size: number
  count: number
  total: number
}
```

```
handleClick(data: ClickData | undefined) => void
handleUpdateDate(data: Date) => void
```

## 时间线道具

```
<EventManager
  resources={data}
  tableId={1}
  search={
    <TextField
      variant='standard'
      label='Search'
      onChange={(e) => handleSearch(e.target.value)}
    />
  }
  pagination={
    <TablePagination
      component='div'
      count={page.total}
      page={page.current}
      onPageChange={handleChangePage}
      rowsPerPage={page.count}
      onRowsPerPageChange={handleChangeRowsPerPage}
    />
  }
  showLegend
  showTooltip
  hasWeekends
  loading={loading}
  onClick={handleClick}
  onUpdateDate={handleUpdateDate}
/>
```

```
Props = {
  resources: Resource[]
  tableId: ID
  hasWeekends?: boolean // default false
  flat?: boolean // default false
  showLegend?: boolean // default false
  showTooltip?: boolean // default false
  loading?: boolean // default false
  multiLine?: boolean // default true
  search?: ReactElement<HTMLInputElement>
  pagination?: ReactElement<HTMLDivElement>
  title?: string
  actionsPossition?: 'top' | 'bottom' // default 'top'
  noDataText?: string // default 'No data'
  onClick?: (data: ClickData | undefined) => void
  onUpdateDate: (date: Date) => void
}
```

## 常见问题

### @event-manager/react 是什么？

反应事件管理器组件

### 如何安装 @event-manager/react？

在项目目录运行 npm install @event-manager/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @event-manager/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @event-manager/react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @event-manager/react 可以商用吗？

@event-manager/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @event-manager/react 的下载量有多少？

根据 npm 官方下载统计，@event-manager/react 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,934 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @event-manager/react 还在维护吗？

最新版本 1\.3\.0 发布于 2024/09/26（2 年前）；至今共发布 82 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/07/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。