# Calendar 日历

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/calendar/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/ch/rili2/#s2
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Calendar]

## 代码演示

### 基本

最简单的日历

```jsx
import { Component } from 'react';
import { Calendar, DateQuickFilter } from '@weapp/ui'

interface State {
  date?: string | number | Date;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      date: new Date()
    }
  }

  onDatePickerChange = (value: any) => { this.setState({ date: value as string }) }

  render() {
    const { date } = this.state;
    return (<div style={{ height: '100%' }}>
      <DateQuickFilter type={'month'} value={date} onChange={this.onDatePickerChange} />
      <Calendar
        date={date}
      />
    </div>)
  }
}
```

### 通知事项日历

使用 events 设置一段日期内的通知事项；使用 dateExtra 设置某个日期的角标、icon等；使用 weekNames 自定义顶部星期展示。当 isDrag 为 true 时，通知事项可拖动

```jsx
import { Component } from 'react';
import { Calendar, Button, DateQuickFilter } from '@weapp/ui'

interface State {
  events?: any[];
  date?: string | number | Date;
  dateExtra: any;
  holidayEndDate: any;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      date: '2021-3-26',
      holidayEndDate: '2021-06-01',
      events: [
        {
          id: '1',
          title: '非全天数据',
          start: '2021-03-01 08:00',
          end: '2021-03-01 18:00',
          borderColor: '#81AFE2',
        },
        {
          id: '1.5',
          title: 'All Day Event',
          start: '2021-03-02',
          end: '2021-03-05',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
          textColor: 'black',
          addTitle: '测试追加title'
        },
        {
          id: '2',
          title: '测试数据001',
          start: '2021-03-07',
          end: '2021-03-10',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '3',
          groupId: 999,
          title: 'Repeating Event',
          start: '2021-03-09',
          end: '2021-03-09',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '4',
          title: 'Conference',
          start: '2021-03-11',
          end: '2021-03-13',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '5',
          title: '今日关注',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '6',
          title: '今日关注测试1',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '7',
          title: '今日关注测试2',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '8',
          title: 'Lunch',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '9',
          title: 'Meeting',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '10',
          title: 'Happy Hour',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '11',
          title: 'Dinner',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '12',
          title: '生日聚会',
          start: '2021-03-13 08:00',
          end: '2021-03-13 12:00',
          textColor: '#000',
          backgroundColor: '#ffc083',
          borderColor: '#ffc083',
          hoverTitle: "别忘今天的生日聚会哦!"
        },
        {
          id: '13',
          title: 'Click for Google',
          start: '2021-03-28',
          end: '2021-03-28',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '14',
          title: '1103测试数据',
          start: '2021-03-25',
          end: '2021-03-27',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
          opacity: 0.5
        }
      ],
      dateExtra: {
        '2021-03-15': { info: true, sign: { text: '班', textIcon: 'Icon-WeChat03-o', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
        '2021-03-16': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
        '2021-03-17': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
        '2021-03-18': { info: true, sign: { text: '休', textIcon: 'Icon-robot', color: '#5d9cec' } },
        '2021-03-19': { info: true, sign: { text: '假' } },
        '2021-03-20': { info: true, sign: { icon: 'Icon-Speechless', } },
        '2021-03-22': { info: true, sign: { icon: ['Icon-WeChat03-o', 'Icon-Speechless'] } },
        '2021-03-23': {
          info: true,
          sign: {
            icon: [
              { name: 'Icon-WeChat03-o', color: '#FAAD14' },
              { name: 'Icon-robot', color: '#52C41A' },
              'Icon-like'
            ]
          }
        },
        '2021-03-25': { info: true, sign: { icon: 'Icon-WeChat03-o', text: "休", textIcon: "Icon-Rest-mcolor" } },
      }
    };
  }

  // renderEventContent = (arg: any): string => {
  //   return `
  //       <div class="fc-daygrid-event-dot"></div>
  //       <div class="fc-event-time">${arg.timeText}</div>
  //       <div class="fc-event-title">${arg.event.title}</div>
  //     `
  // }

  eventClick = (arg?: any) => {
    console.info('eventClick', arg)
    console.info('id', arg.event.id)
    console.info('title', arg.event.title)
  }

  eventDrop = (arg?: any) => {
    console.info('eventDrop', arg)
  }

  onCellClick = (arg?: any) => {
    console.info('onCellClick', arg)
  }

  onMultiSelect = (dates?: any[]) => {
    console.info('onMultiSelect-dates', dates);
  }

  select = (arg?: any) => {
    console.info('select', arg);
    // return true; // 清除选中样式
  }
  // 当通知事项过多时，会展示
  moreLinkContent = (arg: any) => {
    return `<div>更多</div>`
  }
  changeHolidayEndDate = () => this.setState({ holidayEndDate: '2021-12-31' })
  onDatePickerChange = (value: any) => this.setState({ date: value as string })
  eventMouseEnter = (data: any) => console.info('eventMouseEnter', data)

  render() {
    const { events, date, dateExtra } = this.state;
    return (<div style={{ height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <DateQuickFilter type={'month'} value={date} onChange={this.onDatePickerChange} style={{ marginRight: '10px' }} />
        <Button onClick={this.changeHolidayEndDate} type={'primary'}>改变holidayEndDate</Button>
      </div>
      <Calendar
        events={events}
        date={date}
        eventClick={this.eventClick}
        contentHeight={800}
        isDrag={true}
        eventDrop={this.eventDrop}
        weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]}
        onMultiSelect={this.onMultiSelect}
        onCellClick={this.onCellClick}
        // renderEventContent={this.renderEventContent}
        dateExtra={dateExtra}
        selectable={true}
        select={this.select}
        moreLinkContent={this.moreLinkContent}
        titlePopoverVisible={false}
        fullcalendarProps={{
          eventConstraint: {
            start: '10:00',
            end: '18:00',
          },
          // eventMouseEnter: this.eventMouseEnter
        }}
        holidayStartDate={'2021-1-1'}
        holidayEndDate={this.state.holidayEndDate}
      />
    </div>);
  }
}
```

### 周模式

设置 mode 为 week 开启周模式

```jsx
import { Component } from 'react';
import { Calendar, DateQuickFilter } from '@weapp/ui'

const events = [
  {
    id: '1',
    title: '全天数据',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '11',
    title: '全天数据追加title',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
    addTitle: '测试追加title2222'
  },
  {
    id: '12',
    title: '全天数据12',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '13',
    title: '全天数据13',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '14',
    title: '全天数据14',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '142',
    title: '全天数据14',
    start: '2021-03-27',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '22',
    title: '全天数据12',
    start: '2021-03-25',
    end: '2021-03-25',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '23',
    title: '全天数据13',
    start: '2021-03-25',
    end: '2021-03-25',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '24',
    title: '全天数据14',
    start: '2021-03-25',
    end: '2021-03-25',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '25',
    title: '全天数据15',
    start: '2021-03-25',
    end: '2021-03-25',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  },
  {
    id: '2',
    title: '测试数据001',
    start: '2021-03-25 08:00',
    end: '2021-03-25 13:00',
    backgroundColor: '#E5E5E5',
    borderColor: '#A7A7A7'
  },
  {
    id: '3',
    title: '测试数据001',
    start: '2021-03-26 08:00',
    end: '2021-03-26 14:30',
    backgroundColor: '#E5E5E5',
    borderColor: '#A7A7A7'
  },
  {
    id: '4',
    title: '测试数据0033',
    start: '2021-03-26 00:31',
    end: '2021-03-26 15:30',
    backgroundColor: '#DCEDFF',
    borderColor: '#A7A7A7'
  },
  {
    id: '888',
    title: '1103测试数据',
    start: '2021-03-25',
    end: '2021-03-27',
    backgroundColor: '#DCEDFF',
    borderColor: '#81AFE2',
  }
]

interface State {
  date: string;
  events?: any[];
  dateExtra: any;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      date: '2021-03-25',
      events: events,
      dateExtra: {
        '2021-03-21': { info: true, sign: { text: '班', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
        '2021-03-22': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
        '2021-03-23': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
        '2021-03-24': { info: true, sign: { text: '休', color: '#5d9cec' } },
        '2021-03-25': { info: true, sign: { text: '假' } },
        '2021-03-26': { info: true, sign: { icon: 'Icon-Speechless', } },
      }
    };
  }

  eventClick = (arg?: any) => {
    console.info('eventClick', arg)
    console.info('id', arg.event.id)
    console.info('title', arg.event.title)
  }

  renderWeekTopTitle = (date: Date) => {
    return `${date.getFullYear()}/${date.getMonth() + 1}-${date.getDate()}`
  }

  slotLabelFormat = (data: any) => {
    return `${data.isoTimeStr}`
  }

  onDateFilterChange = (date: any) => this.setState({ date })

  render() {
    const { date, events, dateExtra } = this.state;
    return (
      <div style={{ height: '100%' }}>
        <DateQuickFilter
          value={date}
          onChange={this.onDateFilterChange}
        />
        <Calendar
          events={events}
          mode={'week'}
          date={date}
          isDrag={true}
          eventClick={this.eventClick}
          renderWeekTopTitle={this.renderWeekTopTitle}
          slotLabelFormat={this.slotLabelFormat}
          contentHeight={800}
          scrollTime={'10:00:00'}
          dateExtra={dateExtra}
        />
      </div>
    );
  }
}
```

### 双周模式

设置 mode 为 doubleWeek 开启双周模式

```jsx
import { Component } from 'react';
import { Calendar } from '@weapp/ui'

interface State {
  events?: any[];
  dateExtra: any;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      events: [
        {
          id: '1',
          allDay: true,
          title: 'All Day Event',
          start: '2021-03-29',
          end: '2021-03-29',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
          textColor: 'red'
        },
        {
          id: '2',
          allDay: true,
          title: 'Repeating Event',
          start: '2021-04-01',
          end: '2021-04-01',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '3',
          allDay: true,
          title: '测试数据',
          start: '2021-03-27',
          end: '2021-04-01',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '3.5',
          title: '测试数据',
          start: '2021-03-29 13:30',
          end: '2021-04-03 14:30',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '4',
          allDay: true,
          title: 'Conference',
          start: '2021-03-11',
          end: '2021-03-13',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '5',
          allDay: true,
          title: '今日关注',
          start: '2021-03-12',
          end: '2021-03-12',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '6',
          allDay: true,
          title: '今日关注测试1',
          start: '2021-04-11',
          end: '2021-04-11',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '7',
          allDay: true,
          title: '今日关注测试2',
          start: '2021-04-10',
          end: '2021-04-10',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '8',
          allDay: true,
          title: '今日关注测试34',
          start: '2024-03-29',
          end: '2024-03-29',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        },
        {
          id: '9',
          allDay: true,
          title: '1111',
          start: '2024-03-25',
          end: '2024-03-25',
          backgroundColor: '#FFF1D6',
          borderColor: '#D7B167'
        }
      ],
      dateExtra: {
        '2021-03-21': { info: true, sign: { text: '班', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
        '2021-03-22': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
        '2021-03-23': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
        '2021-03-24': { info: true, sign: { text: '休', color: '#5d9cec' } },
        '2021-03-25': { info: true, sign: { text: '假' } },
        '2021-03-26': { info: true, sign: { icon: 'Icon-Speechless', } },
      }
    };
  }

  eventClick = (arg?: any) => {
    console.info('eventClick', arg)
    console.info('id', arg.event.id)
    console.info('title', arg.event.title)
  }

  eventDrop = (arg?: any) => {
    console.info('eventDrop', arg)
    console.info('id', arg)
  }

  onCellClick = (arg?: any) => {
    console.info('onCellClick', arg)
  }

  render() {
    const { events, dateExtra } = this.state;
    return (
      <div style={{ height: '100%' }}>
        <Calendar
          events={events}
          mode={'doubleWeek'}
          date={'2021-03-22'}
          eventClick={this.eventClick}
          contentHeight={800}
          isDrag={true}
          eventDrop={this.eventDrop}
          hideLunar={true}
          weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]}
          onCellClick={this.onCellClick}
          dateExtra={dateExtra}
        />
      </div>
    )
  }
}
```

### 日模式

设置 mode 为 day 开启日模式； 使用 startTime 设置时间条开始时间，endTime 设置时间条结束时间

```jsx
import { Component } from 'react';
import { Calendar, Button } from '@weapp/ui'

interface State {
  date: string | Date;
  events?: any[];
  dateExtra: any
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      // date: new Date(),
      date: '2021-03-26',
      events: [
        {
          id: '1',
          title: 'All Day Event',
          start: '2021-03-26',
          end: '2021-03-26',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '2',
          title: '测试数据2',
          start: '2021-03-26 08:00',
          end: '2021-03-26 10:30',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '2.1',
          title: '测试数据2.1',
          start: '2021-03-26 12:00',
          end: '2021-03-26 12:05',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '2.2',
          title: '测试数据2.2',
          start: '2021-03-26 13:45',
          end: '2021-03-26 18:00',
          backgroundColor: '#E5E5E5',
          borderColor: '#A7A7A7'
        },
        {
          id: '3',
          title: '全天数据1',
          start: '2021-03-25',
          end: '2021-03-27',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '4',
          title: '全天数据2',
          start: '2021-03-26',
          end: '2021-03-26',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '5',
          title: '全天数据3',
          start: '2021-03-26',
          end: '2021-03-26',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '6',
          title: '全天数据4',
          start: '2021-03-26',
          end: '2021-03-26',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        },
        {
          id: '7',
          title: '1103测试数据',
          start: '2021-03-25',
          end: '2021-03-27',
          backgroundColor: '#DCEDFF',
          borderColor: '#81AFE2',
        }
      ],
      dateExtra: {
        '2021-03-26': { info: true, sign: { text: '班', color: '#FAAD14' } },
      }
    };
  }

  changeDate = () => this.setState({ date: '2021-03-26 13:34:00' })
  changeDate1 = () => this.setState({ date: '2021-03-25 16:35:00' })
  changeDate2 = () => this.setState({ date: '2021-03-27 10:36:00' })

  render() {
    const { date, events, dateExtra } = this.state;
    return (
      <div style={{ height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button onClick={this.changeDate1} type={'primary'}>To '2021-03-25'</Button>
          <Button onClick={this.changeDate} type={'primary'} style={{ marginLeft: '5px' }}>To '2021-03-26'</Button>
          <Button onClick={this.changeDate2} type={'primary'} style={{ marginLeft: '5px' }}>To '2021-03-27'</Button>
        </div>
        <Calendar
          events={events}
          mode={'day'}
          date={date}
          isDrag
          nowTimeline={true}
          weekNames={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
          lineHeight={10}
          // startTime={'08:00'}
          // endTime={'18:00'}
          dateExtra={dateExtra}

        />
      </div>
    )
  }
}
```

### 全天数据展示

不同模式下，不同类型数据的全天数据展示

```jsx
import { Component } from 'react';
import { Calendar, DateQuickFilter } from '@weapp/ui'

const events = [
  {
    "backgroundColor": "rgba(56,138,232,0.4)",
    "borderColor": "#388AE8",
    "textColor": "#666666",
    "start": "2026-03-24 00:00:00",
    "end": "2026-03-24 23:59:59",
    "title": "全天1",
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "start": "2026-03-25 09:00:00",
    "end": "2026-03-27 17:00:00",
    "title": "全天2",
  },
  {
    "backgroundColor": "rgba(255,15,126,0.4)",
    "borderColor": "rgba(255,15,126,0.4)",
    "textColor": "#666666",
    "start": "2026-03-25",
    "end": "2026-03-27",
    "title": "全天3",
  },
  {
    "backgroundColor": "rgba(255,950,126,0.4)",
    "borderColor": "rgba(255,950,126,0.4)",
    "textColor": "#666666",
    "start": "2026-03-25 00:00:00",
    "end": "2026-03-28 00:00:00",
    "title": "全天4",
  },
]

const events2 = [
  {
    "backgroundColor": "rgba(56,138,232,0.4)",
    "borderColor": "#388AE8",
    "textColor": "#666666",
    "start": new Date("2026-03-24 00:00:00"),
    "end": new Date("2026-03-24 23:59:59"),
    "title": "全天1",
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "start": new Date("2026-03-25 09:00:00"),
    "end": new Date("2026-03-27 17:00:00"),
    "title": "全天2",
  },
  {
    "backgroundColor": "rgba(255,15,126,0.4)",
    "borderColor": "rgba(255,15,126,0.4)",
    "textColor": "#666666",
    "start": new Date("2026-03-25"),
    "end": new Date("2026-03-27"),
    "title": "全天3",
  },
  {
    "backgroundColor": "rgba(255,950,126,0.4)",
    "borderColor": "rgba(255,950,126,0.4)",
    "textColor": "#666666",
    "start": new Date("2026-03-25 00:00:00"),
    "end": new Date("2026-03-28 00:00:00"),
    "title": "全天4",
  }
]

// const events3 = [
//   {
//     "backgroundColor": "rgba(56,138,232,0.4)",
//     "borderColor": "#388AE8",
//     "textColor": "#666666",
//     "start": "2026-03-24",
//     "end": "2026-03-24",
//     "title": "全天1",
//   },
//   {
//     "backgroundColor": "rgba(255,125,126,0.4)",
//     "borderColor": "#FF7D7E",
//     "textColor": "#666666",
//     "start": "2026-03-23",
//     "end": "2026-03-27",
//     "title": "全天2",
//   }
// ]

interface State {
  date: string;
  events?: any[];
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      date: '2026-03-25',
      events: events,
    };
  }

  onDateFilterChange = (date: any) => this.setState({ date })

  render() {
    const { date, events } = this.state;
    return (
      <div style={{ height: '100%' }}>
        <DateQuickFilter
          value={date}
          onChange={this.onDateFilterChange}
        />
        <Calendar
          events={events}
          mode={'week'}
          date={date}
          isDrag={true}
          contentHeight={800}
        />
        <Calendar
          events={events}
          mode={'doubleWeek'}
          date={date}
          isDrag={true}
          contentHeight={800}
        />
        <Calendar
          events={events}
          mode={'day'}
          date={date}
          isDrag={true}
          contentHeight={800}
        />
        <Calendar
          events={events}
          mode={'month'}
          date={date}
          isDrag={true}
          contentHeight={800}
        />
      </div>
    );
  }
}
```

### 通知事项排序

当 events 中的数据含有 allDay 并且为 true 时，当前日期下的文字，会根据首字母的 ASCII 顺序排列，否则，根据 start 和 end 的时间排列

```jsx
import { Component } from 'react';
import { Calendar, DateQuickFilter } from '@weapp/ui'

const events = [
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244838280235679745",
    "allDay": false,
    "title": "[日程] 0点跨天",
    "start": 1772384400000,
    "end": 1772575200000,
    "startDate": 1772384400000,
    "endDate": 1772575200000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244838563678355456",
    "allDay": false,
    "title": "[日程] 3点",
    "start": 1772391600000,
    "end": 1772393400000,
    "startDate": 1772391600000,
    "endDate": 1772393400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244838731232411648",
    "allDay": false,
    "title": "[日程] 8点",
    "start": 1772409600000,
    "end": 1772497800000,
    "startDate": 1772409600000,
    "endDate": 1772497800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1243779291741782016",
    "allDay": false,
    "title": "[日程] 测试3",
    "start": 1772413200000,
    "end": 1772415000000,
    "startDate": 1772413200000,
    "endDate": 1772415000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1242235852092964865",
    "allDay": false,
    "title": "[日程] 14点跨天",
    "start": 1772431200000,
    "end": 1772605800000,
    "startDate": 1772431200000,
    "endDate": 1772605800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1242235963862777857",
    "allDay": false,
    "title": "[日程] 红色日程",
    "start": 1772434800000,
    "end": 1772436600000,
    "startDate": 1772434800000,
    "endDate": 1772436600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1243778990968242176",
    "allDay": false,
    "title": "[日程] 测试1",
    "start": 1772496000000,
    "end": 1772497800000,
    "startDate": 1772496000000,
    "endDate": 1772497800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244838984509652993",
    "allDay": false,
    "title": "[日程] 9点",
    "start": 1772499600000,
    "end": 1772532000000,
    "startDate": 1772499600000,
    "endDate": 1772532000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244842291827408897",
    "allDay": false,
    "title": "[日程] 10点",
    "start": 1772503200000,
    "end": 1772505000000,
    "startDate": 1772503200000,
    "endDate": 1772505000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1243779162657882113",
    "allDay": false,
    "title": "[日程] 测试2",
    "start": 1772517600000,
    "end": 1772519400000,
    "startDate": 1772517600000,
    "endDate": 1772519400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244842150017990657",
    "allDay": false,
    "title": "[日程] 15点",
    "start": 1772521200000,
    "end": 1772532000000,
    "startDate": 1772521200000,
    "endDate": 1772532000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1245171569630740481",
    "allDay": false,
    "title": "[日程] 5号8点-8号18点",
    "start": 1772668800000,
    "end": 1772964000000,
    "startDate": 1772668800000,
    "endDate": 1772964000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1245169087114477568",
    "allDay": false,
    "title": "[日程] 8点",
    "start": 1773273600000,
    "end": 1773275400000,
    "startDate": 1773273600000,
    "endDate": 1773275400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244840019756154881",
    "allDay": false,
    "title": "[日程] 14点30分",
    "start": 1773297000000,
    "end": 1773309600000,
    "startDate": 1773297000000,
    "endDate": 1773309600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1244840114052497409",
    "allDay": false,
    "title": "[日程] 12号16点30分-14号18点",
    "start": 1773304200000,
    "end": 1773482400000,
    "startDate": 1773304200000,
    "endDate": 1773482400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1250486265334300673",
    "allDay": false,
    "title": "[日程] 双周日程1",
    "start": 1774400400000,
    "end": 1774402200000,
    "startDate": 1774400400000,
    "endDate": 1774402200000
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1244840298981089281",
    "allDay": undefined,
    "title": "未跨天日历",
    "start": "2026-03-09 09:00",
    "end": "2026-03-09 17:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "id": "1244840582389432321",
    "allDay": undefined,
    "title": "跨天日历2",
    "start": "2026-03-09 10:00",
    "end": "2026-03-11 17:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1247477215512338434",
    "allDay": undefined,
    "title": "解决【NB】EB日历在周模式下文字过长溢出问题解决【NB】EB日历在周模式下文字过长溢出问题解决【NB】EB日解决【N历在周模式下文字过长溢出问题解决【NB】EB日历在周模式下文字过长溢出问题【最后】",
    "start": "2026-03-16 10:00",
    "end": "2026-03-16 10:30",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "id": "1247488966425419777",
    "allDay": undefined,
    "title": "9点-日程名称过长测试过长效果9点-日程名称过长测试过长效果9点-日程名称过长测试过长效果9点-日程名称过长测试过长效果9点-日程名称过长测试过长效果9点-日程名称过长测试过长效果9点【最后】",
    "start": "2026-03-16 11:30",
    "end": "2026-03-16 15:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1247762122199752706",
    "allDay": undefined,
    "title": "名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长名字特别长【最后】",
    "start": "2026-03-23 09:00",
    "end": "2026-03-25 18:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1247806527925706754",
    "allDay": undefined,
    "title": "单行3",
    "start": "2026-03-16 09:00",
    "end": "2026-03-16 18:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1247806557896597505",
    "allDay": undefined,
    "title": "单行1",
    "start": "2026-03-16 09:00",
    "end": "2026-03-16 18:00",
    "startDate": undefined,
    "endDate": undefined
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "id": "1247806592358604801",
    "allDay": undefined,
    "title": "单行2",
    "start": "2026-03-16 09:00",
    "end": "2026-03-16 18:00",
    "startDate": undefined,
    "endDate": undefined
  }
]

const events1 = [{
  "backgroundColor": "rgba(220,237,255,0.4)",
  "borderColor": "#81afe2",
  "textColor": "#666",
  "id": "1245171569630740481",
  "allDay": false,
  "title": "[日程] 5号8点-8号18点",
  "start": 1772668800000,
  "end": 1772964000000,

  // "start": 1772668800000,
  // "end": '2026-03-08 18:00:00',
  "startDate": 1772668800000,
  "endDate": 1772964000000
}]

const events2 = [
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1253745776045752321",
    "allDay": false,
    "title": "[日程] 8点",
    "start": 1775433600000,
    "end": 1775435400000,
    "startDate": 1775433600000,
    "endDate": 1775435400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1253745849211191297",
    "allDay": false,
    "title": "[日程] 14点30",
    "start": 1775457000000,
    "end": 1775458800000,
    "startDate": 1775457000000,
    "endDate": 1775458800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958084124606465",
    "allDay": false,
    "title": "[日程] 00:00",
    "start": 1776182400000,
    "end": 1776184200000,
    "startDate": 1776182400000,
    "endDate": 1776184200000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643215575842816",
    "allDay": false,
    "title": "[日程] 7:30",
    "start": 1776209400000,
    "end": 1776297600000,
    "startDate": 1776209400000,
    "endDate": 1776297600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258642962213240832",
    "allDay": false,
    "title": "[日程] 8:50",
    "start": 1776214200000,
    "end": 1776303000000,
    "startDate": 1776214200000,
    "endDate": 1776303000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958199869145089",
    "allDay": false,
    "title": "[日程] 9:00",
    "start": 1776214800000,
    "end": 1776216600000,
    "startDate": 1776214800000,
    "endDate": 1776216600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643142511067137",
    "allDay": false,
    "title": "[日程] 14:00",
    "start": 1776232800000,
    "end": 1776234600000,
    "startDate": 1776232800000,
    "endDate": 1776234600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258905565162373120",
    "allDay": false,
    "title": "[日程] 14:30",
    "start": 1776234600000,
    "end": 1776236400000,
    "startDate": 1776234600000,
    "endDate": 1776236400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958290080235521",
    "allDay": false,
    "title": "[日程] 15:00",
    "start": 1776236400000,
    "end": 1776238200000,
    "startDate": 1776236400000,
    "endDate": 1776238200000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958397489446912",
    "allDay": false,
    "title": "[日程] 16:00",
    "start": 1776240000000,
    "end": 1776241800000,
    "startDate": 1776240000000,
    "endDate": 1776241800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643962950483968",
    "allDay": false,
    "title": "[日程] 8点50分",
    "start": 1776300600000,
    "end": 1776308400000,
    "startDate": 1776300600000,
    "endDate": 1776308400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258644181958787073",
    "allDay": false,
    "title": "[日程] 14点",
    "start": 1776319200000,
    "end": 1776407400000,
    "startDate": 1776319200000,
    "endDate": 1776407400000
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1258961060536573981",
    "allDay": false,
    "title": "EB-11点",
    "start": "2026-04-14 11:00:00",
    "end": "2026-04-14 11:30:00",
    "startDate": "2026-04-14 11:00:00",
    "endDate": "2026-04-14 11:30:00"
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "id": "1258961103477858305",
    "allDay": false,
    "title": "EB-12点",
    "start": "2026-04-14 12:00:00",
    "end": "2026-04-14 12:30:00",
    "startDate": "2026-04-14 12:00:00",
    "endDate": "2026-04-14 12:30:00"
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1258961193655394305",
    "allDay": false,
    "title": "EB-9点",
    "start": "2026-04-14 09:00:00",
    "end": "2026-04-14 09:30:00",
    "startDate": "2026-04-14 09:00:00",
    "endDate": "2026-04-14 09:30:00"
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1258961245220167682",
    "allDay": false,
    "title": "EB-14点",
    "start": "2026-04-14 14:00:00",
    "end": "2026-04-14 14:30:00",
    "startDate": "2026-04-14 14:00:00",
    "endDate": "2026-04-14 14:30:00"
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1258962713922822145",
    "allDay": false,
    "title": "EB-跨天13点",
    "start": "2026-04-14 13:00:00",
    "end": "2026-04-16 17:00:00",
    "startDate": "2026-04-14 13:00:00",
    "endDate": "2026-04-16 17:00:00"
  }
]

const events3 = [
  {
    "id": "1258958084124606465",
    "name": "00:00",
    "title": "[日程] 00:00",
    "start": 1776182400000,
    "end": 1776270600000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258643215575842816",
    "name": "7:30",
    "title": "[日程] 7:30",
    "start": 1776209400000,
    "end": 1776297600000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258981916738748416",
    "name": "8:30",
    "title": "[日程] 8:30",
    "start": 1776211200000,
    "end": 1776213000000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258958199869145089",
    "name": "9:00",
    "title": "[日程] 9:00",
    "start": 1776214800000,
    "end": 1776303000000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258643142511067137",
    "name": "14:00",
    "title": "[日程] 14:00",
    "start": 1776232800000,
    "end": 1776321000000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258905565162373120",
    "name": "14:30",
    "title": "[日程] 14:30",
    "start": 1776234600000,
    "end": 1776322800000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258958290080235521",
    "name": "15:00",
    "title": "[日程] 15:00",
    "start": 1776236400000,
    "end": 1776324600000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258958397489446912",
    "name": "16:00",
    "title": "[日程] 16:00",
    "start": 1776240000000,
    "end": 1776241800000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258643962950483968",
    "name": "8点50分",
    "title": "[日程] 8点50分",
    "start": 1776300600000,
    "end": 1776308400000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258644181958787073",
    "name": "14点",
    "title": "[日程] 14点",
    "start": 1776319200000,
    "end": 1776407400000,
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666"
  },
  {
    "id": "1258961060536573981",
    "title": "EB-11点",
    "start": "2026-04-14 11:00:00",
    "end": "2026-04-14 11:30:00",
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666"
  },
  {
    "id": "1258961103477858305",
    "title": "EB-12点",
    "start": "2026-04-14 12:00:00",
    "end": "2026-04-14 12:30:00",
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666"
  },
  {
    "id": "1258961193655394305",
    "title": "EB-9点",
    "start": "2026-04-14 09:00:00",
    "end": "2026-04-14 09:30:00",
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666"
  },
  {
    "id": "1258961245220167682",
    "title": "EB-14点",
    "start": "2026-04-14 14:00:00",
    "end": "2026-04-14 14:30:00",
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666"
  },
  {
    "id": "1258962713922822145",
    "title": "EB-跨天13点",
    "start": "2026-04-14 13:00:00",
    "end": "2026-04-16 17:00:00",
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666"
  }
]

const events4 = [{
  "id": "1258961060536573981",
  "title": "EB-11点",
  "start": "2026-04-14 11:00:00",
  "end": "2026-04-14 11:30:00",
  "backgroundColor": "rgba(87,193,231,0.4)",
  "borderColor": "#57C1E7",
  "textColor": "#666666"
}]

const events5 = [
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1253745776045752321",
    "allDay": false,
    "title": "[日程] 8点",
    "start": 1775433600000,
    "end": 1775435400000,
    "startDate": 1775433600000,
    "endDate": 1775435400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1253745849211191297",
    "allDay": false,
    "title": "[日程] 14点30",
    "start": 1775457000000,
    "end": 1775458800000,
    "startDate": 1775457000000,
    "endDate": 1775458800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259339623180795904",
    "allDay": false,
    "title": "[日程] 14号跨天",
    "start": 1776130200000,
    "end": 1776420000000,
    "startDate": 1776130200000,
    "endDate": 1776420000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958084124606465",
    "allDay": false,
    "title": "[日程] 00:00",
    "start": 1776182400000,
    "end": 1776270600000,
    "startDate": 1776182400000,
    "endDate": 1776270600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643215575842816",
    "allDay": false,
    "title": "[日程] 7:30",
    "start": 1776209400000,
    "end": 1776297600000,
    "startDate": 1776209400000,
    "endDate": 1776297600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258981916738748416",
    "allDay": false,
    "title": "[日程] 8:30",
    "start": 1776211200000,
    "end": 1776213000000,
    "startDate": 1776211200000,
    "endDate": 1776213000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958199869145089",
    "allDay": false,
    "title": "[日程] 9:00",
    "start": 1776214800000,
    "end": 1776303000000,
    "startDate": 1776214800000,
    "endDate": 1776303000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259366264730189825",
    "allDay": false,
    "title": "[日程] 9:30",
    "start": 1776216600000,
    "end": 1776250800000,
    "startDate": 1776216600000,
    "endDate": 1776250800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643142511067137",
    "allDay": false,
    "title": "[日程] 14:00",
    "start": 1776232800000,
    "end": 1776321000000,
    "startDate": 1776232800000,
    "endDate": 1776321000000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258905565162373120",
    "allDay": false,
    "title": "[日程] 14:30",
    "start": 1776234600000,
    "end": 1776322800000,
    "startDate": 1776234600000,
    "endDate": 1776322800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958290080235521",
    "allDay": false,
    "title": "[日程] 15:00",
    "start": 1776236400000,
    "end": 1776324600000,
    "startDate": 1776236400000,
    "endDate": 1776324600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258958397489446912",
    "allDay": false,
    "title": "[日程] 16:00",
    "start": 1776240000000,
    "end": 1776241800000,
    "startDate": 1776240000000,
    "endDate": 1776241800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259365959819591680",
    "allDay": false,
    "title": "[日程] 16:30",
    "start": 1776241800000,
    "end": 1776243600000,
    "startDate": 1776241800000,
    "endDate": 1776243600000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259366075760017409",
    "allDay": false,
    "title": "[日程] 17:00",
    "start": 1776243600000,
    "end": 1776245400000,
    "startDate": 1776243600000,
    "endDate": 1776245400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259366187487887360",
    "allDay": false,
    "title": "[日程] 17:30",
    "start": 1776245400000,
    "end": 1776250800000,
    "startDate": 1776245400000,
    "endDate": 1776250800000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258643962950483968",
    "allDay": false,
    "title": "[日程] 8点50分",
    "start": 1776300600000,
    "end": 1776308400000,
    "startDate": 1776300600000,
    "endDate": 1776308400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1258644181958787073",
    "allDay": false,
    "title": "[日程] 14点",
    "start": 1776319200000,
    "end": 1776407400000,
    "startDate": 1776319200000,
    "endDate": 1776407400000
  },
  {
    "backgroundColor": "rgba(220,237,255,0.4)",
    "borderColor": "#81afe2",
    "textColor": "#666",
    "id": "1259365744987340800",
    "allDay": false,
    "title": "[日程] 17:00",
    "start": 1776416400000,
    "end": 1776418200000,
    "startDate": 1776416400000,
    "endDate": 1776418200000
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1258961060536573981",
    "title": "EB-11点",
    "start": "2026-04-14 11:00:00",
    "end": "2026-04-14 11:30:00"
  },
  {
    "backgroundColor": "rgba(255,125,126,0.4)",
    "borderColor": "#FF7D7E",
    "textColor": "#666666",
    "id": "1258961103477858305",
    "title": "EB-12点",
    "start": "2026-04-14 12:00:00",
    "end": "2026-04-14 12:30:00"
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1258961193655394305",
    "title": "EB-9点",
    "start": "2026-04-14 09:00:00",
    "end": "2026-04-14 09:30:00"
  },
  {
    "backgroundColor": "rgba(87,193,231,0.4)",
    "borderColor": "#57C1E7",
    "textColor": "#666666",
    "id": "1258961245220167682",
    "title": "EB-14点",
    "start": "2026-04-14 14:00:00",
    "end": "2026-04-14 14:30:00"
  },
  {
    "backgroundColor": "rgba(255,189,79,0.4)",
    "borderColor": "#FFBD4F",
    "textColor": "#666666",
    "id": "1258962713922822145",
    "title": "EB-跨天13点",
    "start": "2026-04-14 13:00:00",
    "end": "2026-04-16 17:00:00"
  }
]

const events6 = [
  {
    "backgroundColor": "rgba(156,81,224,0.4)",
    "borderColor": "#9c51e0",
    "textColor": "#666666",
    "id": "1261564824127135761",
    "allDay": "",
    "title": "23号0点到24号0点",
    "start": "2026-04-23 00:00:00",
    "end": "2026-04-24 00:00:00",
    "startDate": "",
    "endDate": ""
  }
]

interface State {
  events?: any[];
  date?: string | number | Date;
  dateExtra: any;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      dateExtra: {
        '2021-03-15': { info: true, sign: { text: '班', color: '#FAAD14' } },
        '2021-03-16': { info: true, sign: { text: '休', color: '#52C41A' } },
      },
      date: '2026-4-21',
      events: events
    };
  }

  onDatePickerChange = (value: any) => { this.setState({ date: value as string }) }

  render() {
    const { events, date, dateExtra } = this.state;
    return (<div style={{ height: '100%' }}>
      <DateQuickFilter type={'month'} value={date} onChange={this.onDatePickerChange} style={{ marginRight: '10px' }} />
      <Calendar
        events={events6}
        date={date}
        contentHeight={800}
        isDrag={true}
        weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]}
        dateExtra={dateExtra}
        selectable={true}
        titlePopoverVisible={true}
        fullcalendarProps={{
          eventConstraint: {
            start: '10:00',
            end: '18:00',
          },
        }}
        holidayStartDate={'2021-1-1'}
        mode={'week'}
      />
      <Calendar
        events={events6}
        date={date}
        contentHeight={800}
        isDrag={true}
        weekNames={["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]}
        dateExtra={dateExtra}
        selectable={true}
        titlePopoverVisible={true}
        fullcalendarProps={{
          eventConstraint: {
            start: '10:00',
            end: '18:00',
          },
        }}
        holidayStartDate={'2021-1-1'}
        mode={'doubleWeek'}
      />
    </div>);
  }
}
```

### 农历计算方法

```jsx
import { Component } from 'react';
import { Calendar, DateQuickFilter } from '@weapp/ui'
import { dayjs } from '@weapp/utils';
import { isNil } from '../../../../utils'

const { Lunar } = Calendar

const lunar = new Lunar()
interface State {
  date?: string | number | Date;
}

export default class CalendarDemo extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      date: new Date(),
    }
  }

  onDatePickerChange = (value: any) => { this.setState({ date: value as string }) }

  render() {
    const { date } = this.state;
    let y, m, d
    const _date = dayjs(date)
    if (_date.isValid()) {
      y = _date.year()
      m = _date.month()
      d = _date.date()
    }
    let lunarInfo
    if (!isNil(y) && !isNil(m) && !isNil(d)) {
      lunarInfo = lunar.getLunarByDate(y, m, d)
    }
    return (
      <div style={{ height: '100%' }}>
        <h4>可通过点击不同日期获取对应的农历信息</h4>
        <DateQuickFilter type={'day'} value={date} onChange={this.onDatePickerChange} style={{ marginRight: '10px' }} />
        <h4>农历信息</h4>
        {lunarInfo && (
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ margin: '5px 0', }}>星期：{lunarInfo.week}</span>
            <span style={{ margin: '5px 0', }}>农历：{lunarInfo.fullLDisplay}</span>
            <span style={{ margin: '5px 0', }}>生肖：{lunarInfo.animal}</span>
            <span style={{ margin: '5px 0', }}>天干地支：{lunarInfo.zodiac}</span>
          </div>
        )}
      </div>
    );
  }
}
```

### h5日历面板

```jsx
import { Component } from 'react';
import { Calendar, MCalendar, Button, DateQuickFilter, DatePicker, DatePickerDateType, Select, Switch, SlideTabs } from "@weapp/ui";

const slideData = [
  { id: 'month', content: '月', },
  { id: 'week', content: '周' },
  { id: 'doubleWeek', content: '双周', },
]

const weekOptions = [
  { id: '0', content: '星期日' },
  { id: '1', content: '星期一' },
  { id: '2', content: '星期二' },
  { id: '3', content: '星期三' },
  { id: '4', content: '星期四' },
  { id: '5', content: '星期五' },
  { id: '6', content: '星期六' },
]

type DateType = DatePickerDateType

type State = {
  mode: any
  dateFilterValue: DateType
  monthChangeAutoSelectFirstDate: boolean
  weekStart: string | number
  isShowWeekBar: boolean
  useAttendanceHoliday: boolean
  useAttendanceSameViewHoliday: boolean
  minDate?: string
  maxDate?: string
  filterWeekdays?: any[]
  filterHolidays?: boolean
}

class MCalendarDemo extends Component<any, State> {

  ref: any;
  getRef = (dom: any) => this.ref = dom;

  state = {
    mode: 'month' as any,
    dateFilterValue: new Date(),
    monthChangeAutoSelectFirstDate: false,
    weekStart: '',
    isShowWeekBar: false,
    useAttendanceHoliday: true,
    useAttendanceSameViewHoliday: false,
    minDate: '',
    maxDate: '',
    // minDate: '2025-10-03',
    // maxDate: '2025-10-28',
    filterWeekdays: [],
    filterHolidays: false,
  }

  onCellClick = (date: Date) => console.info('onCellClick', date)
  onPanelChange = (data: any) => console.info('onPanelChange', data)

  onModeChange = (value: any) => this.setState({ mode: value })

  onDatePickerChange = (date: any) => {
    this.ref?.panelRef?.toCustomDate(date)
    this.setState({ dateFilterValue: date })
  }

  consoleRef = () => {
    console.info('this.ref', this.ref)
    console.info('this.ref?.panelRef', this.ref?.panelRef)
  }
  toLastMonth = () => this.ref?.panelRef?.onLastMonth()
  toNextMonth = () => this.ref?.panelRef?.onNextMonth()

  onMonthChangeAutoSelectFirstDateChange = (value: any) => this.setState({ monthChangeAutoSelectFirstDate: value })

  onWeekStartChange = (data: any) => this.setState({ weekStart: data })

  onIsShowWeekBarChange = (value: any) => this.setState({ isShowWeekBar: value })

  onUseAttendanceHolidayChange = (value: any) => this.setState({ useAttendanceHoliday: value })
  onUseAttendanceSameViewHolidayChange = (value: any) => this.setState({ useAttendanceSameViewHoliday: value })

  onMinValueChange = (value: DateType | DateType[]) => this.setState({ minDate: value as string })
  onMaxValueChange = (value: DateType | DateType[]) => this.setState({ maxDate: value as string })
  onFilterWeekdaysChange = (value: any) => this.setState({ filterWeekdays: value })
  onFilterHolidaysChange = (value: boolean) => this.setState({ filterHolidays: value })

  render() {
    const {
      mode,
      dateFilterValue,
      monthChangeAutoSelectFirstDate,
      weekStart,
      isShowWeekBar,
      useAttendanceSameViewHoliday,
      useAttendanceHoliday,
      minDate, maxDate,
      filterWeekdays,
      filterHolidays
    } = this.state
    return (
      <div>
        <h3>自定义控制日历面板</h3>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>改变日历模式：</span>
            <SlideTabs
              data={slideData}
              value={mode}
              onChange={this.onModeChange}
            />
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>改变当前日历面板：</span>
            <DateQuickFilter
             
              defaultValue={new Date()}
              value={dateFilterValue}
              onChange={this.onDatePickerChange}
              type={'month'}
            />
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>操作日历（此功能仅h5面板支持）：</span>
            <Button onClick={this.consoleRef} type={'default'}>点击输出日历ref</Button>
            <Button onClick={this.toLastMonth} type={'success'}>跳转前一个月</Button>
            <Button onClick={this.toNextMonth} type={'warning'}>跳转后一个月</Button>
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>翻页是否选中第一天（此功能仅h5面板支持）：</span>
            <Switch value={monthChangeAutoSelectFirstDate} onChange={this.onMonthChangeAutoSelectFirstDateChange} />
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>自定义周起始日：</span>
            <Select
              data={weekOptions}
              onChange={this.onWeekStartChange}
              value={weekStart}
            />
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span>是否开启周导航栏（此功能仅h5面板支持）：</span>
            <Switch value={isShowWeekBar} onChange={this.onIsShowWeekBarChange}></Switch>
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>是否同步考勤接口数据：</span>
            <Switch value={useAttendanceHoliday} onChange={this.onUseAttendanceHolidayChange} />
          </div>
          <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>是否仅显示非跨面板考勤数据：</span>
            <Switch value={useAttendanceSameViewHoliday} onChange={this.onUseAttendanceSameViewHolidayChange} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最小日期（此功能仅h5面板支持）：</span>
            <DatePicker
              value={minDate}
              onChange={this.onMinValueChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最大日期（此功能仅h5面板支持）：</span>
            <DatePicker
              value={maxDate}
              onChange={this.onMaxValueChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置过滤星期（此功能仅h5面板支持）：</span>
            <Select
              style={{ width: 200 }}
              data={weekOptions}
              multiple
              value={filterWeekdays}
              onChange={this.onFilterWeekdaysChange}
            />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>自动过滤考勤接口节假日数据（此功能仅h5面板支持）：</span>
            <Switch
              value={filterHolidays}
              onChange={this.onFilterHolidaysChange}
            />
          </div>
        </div>
        <MCalendar
          ref={this.getRef}
          onCellClick={this.onCellClick}
          onPanelChange={this.onPanelChange}
          mode={mode}
          // weekMode={'doubleWeek'}
          monthChangeAutoSelectFirstDate={monthChangeAutoSelectFirstDate}
          weekStart={Number(weekStart)}
          isShowWeekBar={isShowWeekBar}
          useAttendanceHoliday={useAttendanceHoliday}
          useAttendanceSameViewHoliday={useAttendanceSameViewHoliday}
          minDate={minDate}
          maxDate={maxDate}
          filterWeekdays={filterWeekdays?.map(Number)}
          filterHolidays={filterHolidays}
        />
        <Calendar
          onCellClick={this.onCellClick}
          date={dateFilterValue}
          mode={mode}
          weekStart={Number(weekStart)}
          useAttendanceHoliday={useAttendanceHoliday}
          useAttendanceSameViewHoliday={useAttendanceSameViewHoliday}
        // minDate={minDate}
        // maxDate={maxDate}
        // filterWeekdays={filterWeekdays?.map(Number)}
        // filterHolidays={filterHolidays}
        />
      </div>
    );
  }
}

export default MCalendarDemo;
```

## API

### 节假日模式说明：

```typescript
calendar组件耦合了后端节假日接口 /api/attend/web/calendar/queryHolidayByUser,
请求方式如下
{
  url: `/api/attend/web/calendar/queryHolidayByUser`,
  method: 'post',
  data: {
    "userId": id, //此id为 window?.TEAMS?.currentUser?.id
    "beginDate": holidayStartDate, //当未传值或不合法时，会按照当前日期当月的开始日期传入
    "endDate": holidayEndDate //当未传值或不合法时，会按照当前日期当月的结束日期传入
  }
}
1.openHoliday默认为ture，会开启节假日模式
2.holidayDatas数据格式如下
{
  "id":"3573169252047636086",//必填
  "day":1633017600000, //必填
  "type":"HOLIDAY", //必填
  "status":"VALID",//必填 -> 当为 'VALID'时，才会添加类名
}
3.calendar组件会根据返回结果的status状态和day的日期类型，赋值给fc-daygrid-day的每个单元格以type的class类名，用户可以根据需求自定义复写样式
4.当传入customHolidayUrlDatas，内部会将customHolidayUrlDatas作为请求参数发起请求，并在内部处理返回数据给内部holidayDatas
5.当前端直接传入了customHolidayDatas时，会直接将值符给内部holidayDatas，不走接口
6.当走自定义url或customHolidayDatas时，需要注意返回的数据格式
```

### dataExtra说明：

```typescript
按照以下下数据为例
const dateExtra = {
        '2021-03-15': { info: true, sign: { text: '班', textIcon: 'Icon-WeChat03-o', color: '#FAAD14', icon: 'Icon-WeChat03-o' } },
        '2021-03-16': { info: true, sign: { text: '休', color: '#52C41A', icon: 'Icon-robot' } },
        '2021-03-17': { info: true, sign: { icon: 'Icon-like', color: '#5d9cec' } },
        '2021-03-18': { info: true, sign: { text: '休', textIcon: 'Icon-robot', color: '#5d9cec' } },
        '2021-03-19': { info: true, sign: { text: '假' } },
        '2021-03-20': { info: true, sign: { icon: 'Icon-Speechless', } },
        '2021-03-22': { info: true, sign: { icon: ['Icon-WeChat03-o', 'Icon-Speechless'] } },
        '2021-03-23': {
          info: true,
          sign: {
            icon: [
              { name: 'Icon-WeChat03-o', color: '#FAAD14' },
              { name: 'Icon-robot', color: '#52C41A' },
              'Icon-like'
            ]
          }
        },
      }
1.sign表示开启额外数据展示
2.当sign中的text存在时，开启月模式单元格头部右上角展示（展示文字），当textIcon存在时，右上角展示图标，text内容在鼠标hover时出现
3.color表示右上角展示底色 
4.icon表示月模式单元格头部日期右侧的额外图标
```

### solarFestival与lunarFestival：

```typescript
按照以下下数据为例
const solarFestival = ['0303 三月三号节日','0404 四月四号节日']
const lunarFestival = ['0303 三月初三','0404 四月初四']
分别代表农历节日与阳历节日
同时也可以用ecode来控制
const solarFestival = window?.weapp_ui_sFtv || window?.weapp_ui_solarFestival
const lunarFestival = window?.weapp_ui_lFtv || window?.weapp_ui_lunarFestival
const showSolarTerm = window?.weapp_ui_showSolarTerm
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| mode | 初始模式 | month, doubleWeek, week, day |  |  |
| events | 通知事项数据源 | any[] |  |  |
| date | 展示日期 | Date / string |  |  |
| fixedWeekCount | 是否显示非本月数据 | boolean |  | false |
| navLinks | 日期 label 是否可以点击 | boolean |  | false |
| contentHeight | 视图高度 | number |  | 600 |
| isDrag | 通知事项是否可以拖动 | boolean |  | false |
| eventClick | 点击通知事项回调 | (arg?: any) => void; |  |  |
| onCellClick | 点击格子空白区域回 | (arg?: any) => void; |  |  |
| onMultiSelect | 多选日期回调 | (dates?: any[]) => void; |  |  |
| renderEventContent | 自定义渲染每条数据 | (eventContent?: EventContentArg) => string; |  |  |
| eventDrop | 拖拽停止并且已经拖拽到其它位置了 | (arg?: any) => void; |  |  |
| eventResize | 大小调整完成并已经执行更新时触发 | (arg?: any) => void; |  |  |
| weekNames | 月模式下日历周显示标签 | string[] |  |  |
| renderWeekTopTitle | 周模式下，顶部周信息自定义渲染 | renderWeekTopTitle?:(arg?: Date) => string |  |  |
| allDayText | 自定义全天视图名称 | string |  |  |
| slotDuration | 一格时间槽代表多长时间，默认 00:30:00（30 分钟） | string |  |  |
| slotEventOverlap | 相同时间段的多个日程视觉上是否允许重叠 | boolean |  | true |
| lineHeight | 周，日模式下行高 | number |  |  |
| fullcalendarProps | fullcalendar 原有 props 都在此处配置 | any |  |  |
| dateExtra | 日期标识，如： 班，休 | any |  |  |
| selectable | 是否允许长按鼠标选择区域 | boolean |  | false |
| select | 点击空白区域/选择区域内容触发 | (arg?: any) => void/boolean |  | 使用该属性时， selectable 需为 true,return true 清除选中样式 |
| getInstance | 获取 calendar 实例 | (calendar: any ) => void |  |  |
| weekStart | 设置一周中显示的第一天是哪天，周日是 0，周一是 1，类推 | number |  | 1 |
| startTime | 周,日模式下起始时间， 如： '08:00' | string |  |  |
| endTime | 周,日模式下结束时间， 如： '18:00' | string |  |  |
| nowTimeline | 日模式下，当前时间线(红色) | boolean |  | false |
| scrollTime | 日,周模式下滚动区域偏移时间点 | string |  | '10:00:00' |
| moreLinkContent | 自定义更多标签 | (arg?: any) => string; |  |  |
| hideLunar | 是否隐藏农历 | boolean |  | false |
| titlePopoverVisible | 标题鼠标放上去是否隐藏 title | boolean |  | false |
| needHoliday | 是否开启节假日模式 | boolean |  | true |
| holidayStartDate | 接口内配置：节假日查询的开始日期 | 可被 dayjs()解析的类型 |  |  |
| holidayEndDate | 接口内配置：节假日查询的结束日期 | 可被 dayjs()解析的类型 |  |  |
| customHolidayUrlDatas | 自定义获取节假日接口数据配置 | any |  |  |
| customHolidayDatas | 自定义节假日数据配置 | any[] |  |  |
| slotLabelFormat | 周模式下，自定义渲染左侧时间区域 | any[] |  |  |
| solarFestival | 阳历节日 | string[] |  |  |
| lunarFestival | 阴历节日 | string[] |  |  |
| showSolarTerm | 是否展示节气 | boolean |  |  |
| useAttendanceHoliday | 是否接入考勤组接口数据 | boolean |  |  |
| useAttendanceSameViewHoliday | 是否使用面板内同视图的节假日数据 | boolean |  |  |
