@uiw/react-calendar
    TypeScript icon, indicating that this package has built-in type declarations

    4.9.7 • Public • Published

    Calendar 日历

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

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

    基础用法

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

    import ReactDOM from 'react-dom';
    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;
      });
    }
    
    ReactDOM.render(
      <div>
        <Calendar
          onSelectDay={(date, dateSource) => {
            console.log('date:', date, dateSource);
          }}
          data={filterData(data)}
        />
      </div>,
      _mount_
    );

    禁用日历

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

    import ReactDOM from 'react-dom';
    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();
    }
    
    ReactDOM.render(
      <div>
        <Calendar
          onSelectDay={(date, dateSource) => {
            console.log('date:', date, dateSource);
          }}
          disabledDate={disabledDate}
          data={filterData(data)}
        />
      </div>,
      _mount_
    );
    参数 说明 类型 默认值
    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) -

    Install

    npm i @uiw/react-calendar

    DownloadsWeekly Downloads

    236

    Version

    4.9.7

    License

    MIT

    Unpacked Size

    62.2 kB

    Total Files

    21

    Last publish

    Collaborators

    • wcjiang