Calendar 日历

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

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) | - |