npmpackage.info

Gathering detailed insights and metrics for @uiw/react-calendar

Other packages similar to @uiw/react-calendar

@uiw/react-heat-map

2.3.3

React component create calendar heatmap to visualize time series data, a la github contribution graph.

Gathering detailed insights and metrics for @uiw/react-calendar

@uiw/react-calendar - 4.22.3 | npmpackage.info

@uiw/react-calendar

⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.

4.22.3

736

MIT

TypeScript

38.08 kB

4.3

Installations

npm install @uiw/react-calendar

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.18.2

NPM Version

9.8.1 Pull Requests

Open

7

Total

807

Closed

332

Merged

468

Issues

Open

31

Total

176

Closed

145

Releases

214

v4.22.3

Updated on Nov 29, 2023

v4.22.2

Updated on Nov 09, 2023

v4.22.1

Updated on Nov 08, 2023

v4.22.0

Updated on Sep 19, 2023

v4.21.28

Updated on May 05, 2023

v4.21.27

Updated on Apr 21, 2023

View All 214 releases

Languages

TypeScript

Less

JavaScript

HTML

Shell

TypeScript (78.99%)

Less (20.49%)

JavaScript (0.38%)

HTML (0.12%)

Shell (0.01%)

Developer

uiwjs

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

736 Stars

3,301 Commits

121 Forks

31 Watchers

15 Branches

25 Contributors

Updated on Jul 03, 2025

Sponsor this package

https://jaywcjlove.github.io/#/sponsor

Maintainers

View All 25 Contributors

Package Meta Information

Latest Version

4.22.3

Package Id

@uiw/react-calendar@4.22.3

Unpacked Size

38.08 kB

Size

7.53 kB

File Count

NPM Version

9.8.1

Node Version

18.18.2

Published on

Nov 29, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@uiw/formatter @uiw/react-date-picker @uiw/react-icon @uiw/utils

Peer Dependencies

react react-dom

Calendar 日历

按照日历形式展示数据的容器。

1import { Calendar } from 'uiw';
2// or
3import Calendar from '@uiw/react-calendar';

基础用法

下面是基础使用方法，可以设置日历通知事项，在日历渲染单元格时，会根据 data 内容来渲染单元格通知事项。

1import React from 'react';
2import { Calendar, Badge } from 'uiw';
3
4const data = [
5  { type: 'default', date: '8', label: '中国电动车初创公司蔚来据称考虑明年赴美上市。' },
6  { type: 'success', date: '8', label: '苹果收购一批新专利 或用于iPhone 3D摄像头' },
7  { type: 'default', date: '8', label: '高通再诉iPhone侵犯专利 苹果正面反驳' },
8  { type: 'error', date: '8', label: '谷歌安全团队报告macOS文件系统高危漏洞' },
9  { type: 'default', date: '8', label: 'iPhone销量下滑使富士康工人待遇降低' },
10  { type: 'default', date: '8', label: 'Flutter 1.0重磅发布，它还想做桌面和Web开发' },
11  { type: 'warning', date: '15', label: '月圆的日子?', style: { color: 'red' } },
12  { type: 'success', date: '1/1', label: '元旦节' },
13  { type: 'error', date: '3/12', label: '植树节' },
14  { type: 'info', date: '3/5', label: '学雷锋日' },
15  { type: 'default', date: '3/8', label: '妇女节' },
16  { type: 'success', date: '2019/3/8', label: '2019植树节' },
17  { type: 'warning', date: '5/1', label: '劳动节' },
18  { type: 'default', date: '5/4', label: '青年节' },
19  { type: 'success', date: '6/1', label: '儿童节' },
20  { type: 'warning', date: '7/1', label: '建党节' },
21  { type: 'success', date: '8/1', label: '建军节' },
22  { type: 'warning', date: '9/10', label: '教师节' },
23  { type: 'default', date: '10/1', label: '国庆节' },
24]
25function filterData(dt) {
26  return dt.map((item) => {
27    let color = '';
28    switch (item.type) {
29      case 'success': color = '#28a745'; break;
30      case 'error': color = '#dc3545'; break;
31      case 'warning': color = '#F95C2B'; break;
32      case 'default': color = '#393E48'; break;
33      case 'info': color = '#008EF0'; break;
34    }
35    item.label = <Badge color={color}>{item.label}</Badge>;
36    return item;
37  });
38}
39
40export default function Demo() {
41  return(
42    <div>
43      <Calendar
44        onSelectDay={(date, dateSource) => {
45          console.log('date:', date, dateSource);
46        }}
47        data={filterData(data)}
48      />
49    </div>
50  );
51}

禁用日历

在日历面板上面添加通知事件，还可以通过设置 disabledDate 来禁止部分日期点击，如下实例每月12号不能点击。

1import React from 'react';
2import { Calendar, Badge } from 'uiw';
3
4const data = [
5  { type: 'default', date: '8', label: '中国电动车初创公司蔚来据称考虑明年赴美上市。' },
6  { type: 'success', date: '8', label: '苹果收购一批新专利 或用于iPhone 3D摄像头' },
7  { type: 'default', date: '8', label: '高通再诉iPhone侵犯专利 苹果正面反驳' },
8  { type: 'error', date: '8', label: '谷歌安全团队报告macOS文件系统高危漏洞' },
9  { type: 'default', date: '8', label: 'iPhone销量下滑使富士康工人待遇降低' },
10  { type: 'default', date: '8', label: 'Flutter 1.0重磅发布，它还想做桌面和Web开发' },
11  { type: 'warning', date: '15', label: '月圆的日子?', style: { color: 'red' } },
12  { type: 'success', date: '1/1', label: '元旦节' },
13  { type: 'error', date: '3/12', label: '植树节' },
14  { type: 'info', date: '3/5', label: '学雷锋日' },
15  { type: 'default', date: '3/8', label: '妇女节' },
16  { type: 'success', date: '2019/3/8', label: '2019植树节' },
17  { type: 'warning', date: '5/1', label: '劳动节' },
18  { type: 'default', date: '5/4', label: '青年节' },
19  { type: 'success', date: '6/1', label: '儿童节' },
20  { type: 'warning', date: '7/1', label: '建党节' },
21  { type: 'success', date: '8/1', label: '建军节' },
22  { type: 'warning', date: '9/10', label: '教师节' },
23  { type: 'default', date: '10/1', label: '国庆节' },
24]
25function filterData(dt) {
26  return dt.map((item) => {
27    let color = '';
28    switch (item.type) {
29      case 'success': color = '#28a745'; break;
30      case 'error': color = '#dc3545'; break;
31      case 'warning': color = '#F95C2B'; break;
32      case 'default': color = '#393E48'; break;
33      case 'info': color = '#008EF0'; break;
34      default: color = '#008EF0'; break;
35    }
36    item.label = <Badge color={color}>{item.label}</Badge>;
37    return item;
38  });
39}
40function disabledDate(currentDate, props) {
41  const day = currentDate.getDay();
42  // 禁用周末，只能点击当月工作日
43  if (day === 6 || day === 0 || props.next || props.prev) {
44    return true;
45  }
46  // 今天和今天之前不能选择
47  // return currentDate && currentDate.valueOf() < Date.now();
48}
49
50export default function Demo() {
51  return(
52    <div>
53      <Calendar
54        onSelectDay={(date, dateSource) => {
55          console.log('date:', date, dateSource);
56        }}
57        disabledDate={disabledDate}
58        data={filterData(data)}
59      />
60    </div>
61  );
62}

参数	说明	类型	默认值
data	在日历面板上面添加通知，数组中的对象可以设置 ElementProps，如：`style`, `onClick` 等属性。	`Array[{ date: YYYY/MM/DD, label: String/ReactNode }]`	-
date`<DatePicker>`	选中的日期	Date	-
titleFormat	设置日历面板上面的日期标题。	String	`YYYY年MM月`
today`<DatePicker>`	默认高亮当天日期	Function(currentDate)	-
todayLabel	“今天”按钮的文本设置	String	-
panelDate`<DatePicker>`	日历面板默认展示哪一页	Date	`new Date`
disabledDate`<DatePicker>`	不可选择的日期，函数返回 `true` 当前日期被禁用无法选择。`end`: 周末，`prev`: 上个月，`next`：下个月	Function(currentDate, { end: bool, prev: bool, next: bool })	-
weekTitle`<DatePicker>`	星期显示文本提示	Array	[`星期天`, `星期一`, `星期二`, `星期三`, `星期四`, `星期五`, `星期六`]
weekday`<DatePicker>`	星期显示文本	Array	[`日`, `一`, `二`, `三`, `四`, `五`, `六`]
onSelectDay `@3.0.0+`	点击选择日期回调	Function	function(date?: Date, dateSource: { day?: number, month?: number, year?: number })
monthLabel`<DatePicker>`	月份显示文本	Array	[`一月`, `二月`, `三月`, `四月`, `五月`, `六月`, `七月`, `八月`, `九月`, `十月`, `十一月`, `十二月`]
onPaging	翻页触发事件	`Function(type: 'prev' \| 'next' \| 'today', month: number, date?: Date)`	-

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:103: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:114: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:25
Warn: npmCommand not pinned by hash: .github/workflows/npm.yml:21
Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 11 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More