calendar 日历

渲染出一个日历

@qnpm/q-calendar 已经迁移至@qnpm/qd-calendar ，使用方式不变，旧组件将不再维护更新，注意替换

特殊说明

• 包含全屏日历(FullScreenCalendar)和浮层日历两种(FloatCalendar)
• 日历列表在渲染完成前会对阻尼系数进行调整，此时滚动日历后惯性滚动会很快结束，防止滚动到为渲染区域出现白屏。
• 组件内部整合了节假日展示信息
• 日历浮层内部使用了QPopupLayer组件，需要在页面根节点下使用Portal组件的Provider对页面进行包裹。

安装

npm install @qnpm/qd-calendar --save --registry=http://npmrepo.corp.qunar.com

使用说明

主要属性说明

属性名	类型	默认值	是否必须	说明
accessibilityPreName	string	q_design_calendar	false	自动化标签前缀
allowDates	Array<Date|string>	[]	false	可选日期集合，支持：>=1.0.7
blankOut	boolean	true	false	不在本月的日期是否展示；例如：本月的第一天是周三，前面的周二、周一为不在本月的日期
buttons	Array<IBottomButton>	[{type: 'default', text: '确定'}]	false	范围日历底部栏展示按钮
isShowFooter	boolean	false	false	是否展示底部组件（目前只在单选模式下生效，多选模式默认有确定按钮）
canSelectSameDay	boolean	true	false	是否可以选中相同天
checkedDirect	boolean	false	false	是否选中直飞
dataSource	IDataSource	-	false	日历展示数据配置
denyDates	Array<Date|string>	[]	false	不可选日期集合，支持：>=1.0.7
denyWeeks	0-6	[]	false	不可选周次集合，支持：>=1.0.7
directTitle	string	false	false	展示直飞时的文字描述
dynamicHeaderView	ReactElement<any>	null	false	日历头部一个可配置的展示区域
endTime	Date or string	new Date() + 363	false	日历可选范围结束日期，支持：>=0.0.19
finishCallback	boolean	false	false	是否需要在点击完成后再执行回调；针对 范围 和 多选 的没有指明startWith的情况
getMergeDesc	(data: Array<number>) => string	() => {}	false	范围日历选中相同天时，日期头展示信息
hasDirect	boolean	false	false	是否展示直飞按钮
limitInfo	ILimitInfo	{}	false	最多/最少天数限制（仅mode为range时，生效）
locale	1 or 2	1	false	周次标题中英文展示；(1：中文，2：英文)
maxDate	string or Date	new Date() + 363	false	最大可选月份，传日期格式，默认为当前日期加363天
minDate	string or Date	new Date()	false	最小可选月份
mode	single|range|multi	single	false	日期选择模式，单选、范围、多选
monthHeaderConfig	IMonthHeaderConfig	-	false	日历月份标题展示配置
onDataSourceRendered	Function	(data: ICallBackData | Array<ICallBackData>) => void	false	每次dataSource发生变化后，会执行此回调返回当前选中日期
onDirectHandler	Function	() => {}	false	点击直飞按钮时的回调
onInitCallback	Function	(data: ICallBackData | Array<ICallBackData>) => void	false	日历组件创建后回调，回传默认选中日期（单选模式返回对象，范围及多选模式返回数组）
onSelect	(data: ICallBackData | Array<ICallBackData>) => void	() => {}	false	日期选择回调
otherInfo	IOtherInfo	{}	false	多选底部栏右侧展示信息
selectedDate	Array<string> or Array<Date>	-	false	默认选中日期
selectedPayload	Array<ISelectedPayload>	-	false	选中日期的展示配置
startWeek	number	0	false	日历以周几开始(0~6)，默认为周日(0)
startWith	'start' | 'middle' | 'end'	-	false	当前要选择第几个日期
startTime	Date or string	new Date()	false	日历可选范围开始日期，支持：>=0.0.19
stickyHeader	boolean	false	false	日历是否需要吸顶效果
tipsContent	TipNativeProps	[]	false	头部展示提示信息，参考Tips组件的tipList
tipsWrapperCustomStyle	TipCustomStyle	{}	false	头部Tips自定义样式，见Tips组件的CustomStyle属性

关于日历日期配置 说明

• 渲染日历月份上下限：

   maxDate: 最大可选月，example: ['2021-08-01']
   endDate: 最小可选月, example: ['2021-10-01']

• 所有跟日期是否可选有关的设置按照优先级如下：

  allowDates：允许选择的日期集合,example: ['2021-09-10', '2021-09-11']
  denyDates: 指定日历中那些日期不可选，example: ['2021-09-09']
  denyWeeks: 指定周几不可选，example：[0,1] // 周日，周一
  startTime: 指定可选日历范围起始日期，example: [2021-09-01]
  endTime: 指定可选日历范围结束日期，example: [2021-09-20]

特殊日期展示数据配置 说明

export interface IDataSource {
    [key: string]: IDataSourceItem;
}

其中，key为yyyy-MM-dd形式的日期，组件内部会根据日期匹配对象的展示数据。 IDataSourceItem, 定义如下

export interface IDayItemBase {
    text?: string; // 展示文字
    color?: string; // 文字颜色
}
export interface IDataSourceItem {
    header?: IDayItemBase; // 日期头部展示信息
    content?: IDayItemBase; // 日期中间展示信息
    footer?: IDayItemBase; // 日期底部展示信息
    imageUri?: string; // 展示的图片 - 仅支持底部
}

已选日期设置 说明

export interface ISelectedPayload extends IDataSourceItem {
    showArrow?: boolean; // 仅范围选择时支持
    toolTip?: string; // 选中提示
}

其中IDataSourceItem

月份头部展示配置 说明

export interface IMonthHeaderConfig {
    [key: string]: IMonthHeaderConfigItem;
}

其中，key为yyyy-MM-dd形式的日期，组件内部会根据日期匹配对象的展示数据。 IMonthHeaderConfigItem, 定义如下

export interface IMonthHeaderOperation {
    imageUri?: string; // 文字前展示的图片
    text?: string; // 文字信息
    color?: string; // 文字颜色
    scheme?: string; // 要打开的链接，如果该字段不为空时，会展示右箭头
}
export interface IMonthHeaderConfigItem {
    title?: string; // 展示标题，不传时默认展示：2020年8月 类型的标题
    titleColor?: string; // 标题颜色
    subTitle?: string; // 副标题
    subTitleColor?: string; // 副标题颜色
    backgroundColor?: string; // 标题背景色
    operationImage?: string; // 运营位图片地址
    operationConfig?: IMonthHeaderOperation; // 运营位展示的信息
}

月份头部展示配置 说明

选中回调，话返回一个对象，如果是范围日历选择完成后回调（即finishCallback为true）的话返回一个数组 ICallBackData

export interface ICallBackData {
    value: string; // 选中日期字符串形式 2020-07-02
    year: number | string; // 年份
    month: number | string; // 月份
    date: number | string; // 天
    header?: string | number; // 顶部展示信息
    footer?: string | number; // 底部展示信息
    selectedIndex?: number; // 当前选中日期时第几个
    week?: number; // 周次
}

范围日历限制可选信息 说明

export interface ILimitInfoItem {
   day: number; // 限制天数
   message?: string; // 提示信息
}

export interface ILimitInfo {
   min?: ILimitInfoItem;
   max?: ILimitInfoItem;
}

范围日历底部右侧展示信息 说明

{
    type: 'price' | 'interval';
    desc: string;
}

price类型时，会计算选择的日期的价格； interval类型时，会计算选择的两个日期将的间隔时间；

desc是一个模板字符串，使用%进行分割，然后将其中的--用计算出来的数据进行替换

例如：共：%--%晚 ， 会渲染出  共：2晚

范围日历底部按钮配置 说明

interface IBottomButton {
    type: IButtonType; // 按钮类型
    text: string; // 按钮展示文字
    onClick?: (data: ICallBackData[]) => void; // 按钮点击回调
}

type IButtonType =
    | 'default' // 默认渐变按钮
    | 'themeBtn' // 主题色实心按钮
    | 'outlineBtn'; // 主题色外边框按钮

日历浮层属性说明

属性名	类型	默认值	是否必须	说明
visible	boolean	false	false	是否展示日历浮层
onClose	Function	() => {}	false	浮层关闭回调函数
onFloatShow	Function	() => {}	false	浮层弹起后的回调
title	string	false	false	日历浮层标题
useGesture	boolean	true	false	是否使用手势浮层；仅ios
swipeBackControl	boolean	false	false	浮层弹起时，是否禁止左滑返回
gestureType	0|1|2	false	日历浮层类型

gestureType 说明

日历浮层类型

0: 不使用手势浮层；
1: 使用`Native`手势浮层(仅`ios`生效)；
2: 使用`rn`手势浮层