Skip to content

Files

Latest commit

22244c4 · Nov 29, 2023

History

History

react-calendar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Jan 17, 2022
Nov 29, 2023
Nov 29, 2023
Aug 31, 2021

README.md

Calendar 日历

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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

基础用法

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

import React from 'react';
import { Calendar, Badge } from 'uiw';

const data = [
  { type: 'default', date: '8', label: '中国电动车初创公司蔚来据称考虑明年赴美上市。' },
  { type: 'success', date: '8', label: '苹果收购一批新专利 或用于iPhone 3D摄像头' },
  { type: 'default', date: '8', label: '高通再诉iPhone侵犯专利 苹果正面反驳' },
  { type: 'error', date: '8', label: '谷歌安全团队报告macOS文件系统高危漏洞' },
  { type: 'default', date: '8', label: 'iPhone销量下滑使富士康工人待遇降低' },
  { type: 'default', date: '8', label: 'Flutter 1.0重磅发布,它还想做桌面和Web开发' },
  { type: 'warning', date: '15', label: '月圆的日子?', style: { color: 'red' } },
  { type: 'success', date: '1/1', label: '元旦节' },
  { type: 'error', date: '3/12', label: '植树节' },
  { type: 'info', date: '3/5', label: '学雷锋日' },
  { type: 'default', date: '3/8', label: '妇女节' },
  { type: 'success', date: '2019/3/8', label: '2019植树节' },
  { type: 'warning', date: '5/1', label: '劳动节' },
  { type: 'default', date: '5/4', label: '青年节' },
  { type: 'success', date: '6/1', label: '儿童节' },
  { type: 'warning', date: '7/1', label: '建党节' },
  { type: 'success', date: '8/1', label: '建军节' },
  { type: 'warning', date: '9/10', label: '教师节' },
  { type: 'default', date: '10/1', label: '国庆节' },
]
function filterData(dt) {
  return dt.map((item) => {
    let color = '';
    switch (item.type) {
      case 'success': color = '#28a745'; break;
      case 'error': color = '#dc3545'; break;
      case 'warning': color = '#F95C2B'; break;
      case 'default': color = '#393E48'; break;
      case 'info': color = '#008EF0'; break;
    }
    item.label = <Badge color={color}>{item.label}</Badge>;
    return item;
  });
}

export default function Demo() {
  return(
    <div>
      <Calendar
        onSelectDay={(date, dateSource) => {
          console.log('date:', date, dateSource);
        }}
        data={filterData(data)}
      />
    </div>
  );
}

禁用日历

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

import React from 'react';
import { Calendar, Badge } from 'uiw';

const data = [
  { type: 'default', date: '8', label: '中国电动车初创公司蔚来据称考虑明年赴美上市。' },
  { type: 'success', date: '8', label: '苹果收购一批新专利 或用于iPhone 3D摄像头' },
  { type: 'default', date: '8', label: '高通再诉iPhone侵犯专利 苹果正面反驳' },
  { type: 'error', date: '8', label: '谷歌安全团队报告macOS文件系统高危漏洞' },
  { type: 'default', date: '8', label: 'iPhone销量下滑使富士康工人待遇降低' },
  { type: 'default', date: '8', label: 'Flutter 1.0重磅发布,它还想做桌面和Web开发' },
  { type: 'warning', date: '15', label: '月圆的日子?', style: { color: 'red' } },
  { type: 'success', date: '1/1', label: '元旦节' },
  { type: 'error', date: '3/12', label: '植树节' },
  { type: 'info', date: '3/5', label: '学雷锋日' },
  { type: 'default', date: '3/8', label: '妇女节' },
  { type: 'success', date: '2019/3/8', label: '2019植树节' },
  { type: 'warning', date: '5/1', label: '劳动节' },
  { type: 'default', date: '5/4', label: '青年节' },
  { type: 'success', date: '6/1', label: '儿童节' },
  { type: 'warning', date: '7/1', label: '建党节' },
  { type: 'success', date: '8/1', label: '建军节' },
  { type: 'warning', date: '9/10', label: '教师节' },
  { type: 'default', date: '10/1', label: '国庆节' },
]
function filterData(dt) {
  return dt.map((item) => {
    let color = '';
    switch (item.type) {
      case 'success': color = '#28a745'; break;
      case 'error': color = '#dc3545'; break;
      case 'warning': color = '#F95C2B'; break;
      case 'default': color = '#393E48'; break;
      case 'info': color = '#008EF0'; break;
      default: color = '#008EF0'; break;
    }
    item.label = <Badge color={color}>{item.label}</Badge>;
    return item;
  });
}
function disabledDate(currentDate, props) {
  const day = currentDate.getDay();
  // 禁用周末,只能点击当月工作日
  if (day === 6 || day === 0 || props.next || props.prev) {
    return true;
  }
  // 今天和今天之前不能选择
  // return currentDate && currentDate.valueOf() < Date.now();
}

export default function Demo() {
  return(
    <div>
      <Calendar
        onSelectDay={(date, dateSource) => {
          console.log('date:', date, dateSource);
        }}
        disabledDate={disabledDate}
        data={filterData(data)}
      />
    </div>
  );
}
参数 说明 类型 默认值
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) -