Calendar

interface CellState {
    /**
   * Whether the date cell is disabled.
   */
    disabled: boolean;
    /**
   * The content that is displayed at the top of the date cell.
   */
    top?: { label: string; className?: string };
    /**
   * The content that is displayed at the top of the date cell.
   */
    bottom?: { label: string; className?: string };
    /**
   * The timestamp.
   */
    time: number;
    /**
   * The date.
   */
    date: number;
    /**
   * Whether the date cell is selected.
   */
    isSelected: boolean;
}

interface LocaleText {
  /**
   * The names of the days of the week from Monday to Sunday.
   * The default value is ['一', '二', '三', '四', '五', '六', '日'].
   */
  weekdayNames: string[];
  /**
   * The names of the months. The default value is in 'YYYY年MM月' format.
   */
  title: string;
  /**
   * Text for the current date on the cell. The default value is '今日'.
   */
  today: string;
  /**
   * Text for the start date. The default value is '开始'.
   */
  start: string;
  /**
   * Text for the end date. The dedault value is '结束'.
   */
  end: string;
  /**
   * Text for same-day start and end. The default value is '开始/结束'.
   */
  startAndEnd: string;
}

<ant-container
  title="Default: Selection of a date range and display of 3 months beginning from the current month">
  <view
    slot="content"
    style="height: 1000rpx">
    <ant-calendar defaultValue="{{ demo1.defaultValue }}" />
  </view>
</ant-container>

<ant-container
  title="Selection of a single day">
  <view
    slot="content"
    style="height: 1000rpx">
    <ant-calendar
      selectionMode="single"
      defaultValue="{{ demo2.defaultValue }}" />
  </view>
</ant-container>

<ant-container
  title="Customize the top of the calendar">
  <view slot="content">
    <view class="custom-header">
      <view
        onTap="demo3PreviousMonth"
        class="custom-header-left">
        <ant-icon type="LeftOutline" />
        Previous
      </view>
      <view>{{ demo3.title }}</view>
      <view
        onTap="demo3NextMonth"
        class="custom-header-right">
        Next
        <ant-icon type="RightOutline" />
      </view>
    </view>
    <ant-calendar monthRange="{{ demo3.monthRange }}">
      <view slot="calendarTitle" />
    </ant-calendar>
  </view>
</ant-container>

<ant-container
  title="Customize date cells">
  <view slot="content">
    <ant-calendar
      monthRange="{{ demo8.monthRange }}"
      onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}" />
  </view>
</ant-container>

<ant-container
  title="Dynamic control, choose an end date within the following 3 days">
  <view slot="content">
    <ant-calendar
      onFormatter="{{ demoFormatter ? demoFormatter : 'demoFormatter' }}" />
  </view>
</ant-container>

<ant-container
  title="Set Monday as the first day of the week">
  <view
    slot="content"
    style="height: 1000rpx">
    <ant-calendar weekStartsOn="Monday" />
  </view>
</ant-container>

<ant-container
  title="Localize UI text">
  <view slot="content">
    <ant-calendar
      monthRange="{{ demo7.monthRange }}"
      localeText="{{ demo7.localeText }}" />
  </view>
</ant-container>

<ant-container
  title="Control mode">
  <view slot="content">
    <ant-calendar
      value="{{ demo9.value }}"
      monthRange="{{ demo9.monthRange }}"
      onChange="demo9HandleChange"
      selectionMode="single" />
    <ant-button
      type="primary"
      onTap="demo9HandlePreviousDay">
      Previous
    </ant-button>
    <ant-button
      style="margin-top: 8rpx"
      type="primary"
      onTap="demo9HandleNextDay">
      Next
    </ant-button>
  </view>
</ant-container>

import dayjs from 'dayjs';
const localeText = {
  weekdayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  title: 'YYYY/MM',
  today: 'Today',
  start: 'Start',
  end: 'End',
  startAndEnd: 'Start/End',
};
function demo8Formatter(cell) {
  const isOdd = dayjs(cell.time).date() % 2 === 1;
  const isNotBeginEnd = !cell.isSelectedBegin && !cell.isSelectedEnd;
  const isWeekend = dayjs(cell.time).day() > 4;
  let topClassName;
  if (isNotBeginEnd) {
    topClassName = isOdd ? 'odd' : 'even';
  }
  return {
    top: {
      className: topClassName,
      label: isOdd ? 'Odd' : 'Even',
    },
    bottom: {
      label: isWeekend ? 'Weekend' : '',
    },
  };
}
function demoFormatter(cell, value) {
  if (Array.isArray(value) && value.length == 1) {
    const current = value[0];
    return {
      disabled: dayjs(cell.time).diff(dayjs(current), 'days') > 3,
      bottom: dayjs(cell.time).diff(dayjs(current), 'days') > 3
        ? {
          label: 'Unselectable',
        }
        : undefined,
    };
  }
  return {};
}
Page({
  data: {
    demo1: {
      defaultValue: [Date.now(), Date.now()],
      visible: true,
    },
    demo2: {
      defaultValue: Date.now(),
      visible: true,
    },
    demo3: {
      title: dayjs(new Date().getTime()).format('YYYY年MM月'),
      monthRange: [new Date().getTime(), new Date().getTime()],
      visible: true,
    },
    demo7: {
      localeText,
      visible: true,
      monthRange: [new Date().getTime(), new Date().getTime()],
    },
    demo8: {
      visible: true,
      monthRange: [new Date().getTime(), new Date().getTime()],
    },
    demo9: {
      visible: true,
      value: Date.now(),
      monthRange: [new Date().getTime(), new Date().getTime()],
    },
  },
  demo3NextMonth() {
    const current = this.data.demo3.monthRange[0];
    const newMonth = dayjs(current).add(1, 'month').toDate().getTime();
    this.setData({
      'demo3.title': dayjs(newMonth).format('YYYY年MM月'),
      'demo3.monthRange': [newMonth, newMonth],
    });
  },
  demo3PreviousMonth() {
    const current = this.data.demo3.monthRange[0];
    const newMonth = dayjs(current).add(-1, 'month').toDate().getTime();
    this.setData({
      'demo3.title': dayjs(newMonth).format('YYYY年MM月'),
      'demo3.monthRange': [newMonth, newMonth],
    });
  },
  demoFormatter,
  demo8Formatter,
  demo9HandleChange(value) {
    this.setData({
      'demo9.value': value,
    });
    },
    demo9HandlePreviousDay() {
        this.setData({
            'demo9.value': this.data.demo9.value - 1000 * 24 * 3600,
        });
    },
    demo9HandleNextDay() {
        this.setData({
            'demo9.value': this.data.demo9.value + 1000 * 24 * 3600,
        });
    },
});

page {
  padding: 8px;
  box-sizing: border-box;
}
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60rpx;
}
.custom-header-left {
  display: flex;
  align-items: center;
}
.custom-header-right {
  display: flex;
  align-items: center;
}
.odd {
  color: red;
}
.even {
  color: blue;
}

{
  "defaultTitle": "Calendar",
  "usingComponents": {
    "ant-icon": "antd-mini/es/Icon/index",
    "ant-button": "antd-mini/es/Button/index",
    "ant-calendar": "antd-mini/es/Calendar/index",
    "ant-container": "antd-mini/es/Container/index"
  }
}

defaultValue=[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')];

<calendar onFormatter="handleFormat" />

import dayjs from 'dayjs';

Page({
  handleFormat(cell: CellState) {
    // Make dates before today unselectable
    return {
      disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')),
    };
  },
});