All Products
Search
Document Center

Calendar

Last Updated: Feb 04, 2021

This section describes the calendar component.

Property Description Type Default value Mandatory
type Type of the calendar, which can be single - single day or range - date range. String single false
tagData Tag data, including date, tag, disable, and tagColor. The value of tagColor can be #f5a911, #e8541e, #07a89b, #108ee9, or #b5b5b5. Array<date, tag, tagColor> - false
onSelect Callback when you select a range. ([startDate, endDate]) => void - false
onMonthChange Callback when you tap to change the month. This property has two parameters, currentMonth and prevMonth, indicating the months after and before the change, respectively. (currentMonth, prevMonth) => void - false
onSelectHasDisableDate The range selected contains invalid dates. (currentMonth, prevMonth) => void - false

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents":{
  4. "calendar": "mini-antui/es/calendar/index"
  5. }
  6. }
  1. <view>
  2. <calendar
  3. type="single"
  4. tagData="{{tagData}}"
  5. onSelect="handleSelect" />
  6. </view>
  1. Page({
  2. data: {
  3. tagData: [
  4. { date: '2018-05-14', tag: 'Pay mortgage', tagColor: 5 },
  5. { date: '2018-05-28', tag: 'Housing provident fund', tagColor: 2 },
  6. ],
  7. },
  8. handleSelect() {},
  9. onMonthChange() {},
  10. });