Calendar

日历组件 Author: yuhao.ju

Install

qnpm install @qnpm/react-native-ui-calendar

Props

Prop Type Default Required Description
startTime string moment() No 日历开始日期，格式为YYYY-MM-DD的字符串。
endTime string moment().add(5, 'month') No 日历终止日期，格式为YYYY-MM-DD的字符串。
holiday object No 节日数据。
active object No 特殊样式日期数据，样式类型只能为fill/border。
note object No 日期提示文字数据。
allowSelectionBeforeToday bool false No 是否支持选择今天之前的日期。
onPress func No 点击单个日期的回调，回调中会返回该日期的信息。
customStyles array No 自定义样式。

Example:


import React, {Component, StyleSheet, View} from 'react-native';

import Calendar from '@qnpm/react-native-ui-calendar'

class CalendarExample extends Component {
    constructor(props) {
        super(props)

        // prepare options
        const today = new Date(),
            fiveDaysLater = new Date(today.getTime() +  5 * 24 * 60 * 60 * 1000),
            aWeekLater = new Date(today.getTime() +  7 * 24 * 60 * 60 * 1000),
            tenDaysLater = new Date(today.getTime() +  10 * 24 * 60 * 60 * 1000),
            aMonthLater = new Date(today.getTime() +  30 * 24 * 60 * 60 * 1000)

        // Options
        this.state = {
            holiday: {
                [this.convertToDateStr(fiveDaysLater)]: '节日A',
                [this.convertToDateStr(tenDaysLater)]: '节日B',
            },

            active: {
                [this.convertToDateStr(today)]: 'fill',
                [this.convertToDateStr(aWeekLater)]: 'fill',
                [this.convertToDateStr(aMonthLater)]: 'border',
            },

            note: {
                [this.convertToDateStr(today)]: '出发',
                [this.convertToDateStr(aWeekLater)]: '返程',
                [this.convertToDateStr(aMonthLater)]: '特价',
            }
        }
    }

    convertToDateStr(date) {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    }

    render() {
        const {holiday, active, note} = this.state
        return (
            <View style={styles.container}>
                <Calendar
                    holiday={holiday}
                    active={active}
                    note={note}
                    startTime= {Date.now() - 1000 * 60 * 60 * 24 * 30}
                    endTime= {Date.now() + 1000 * 60 * 60 * 24 * 60}
                    onPress={this.showDate}
                />
            </View>
        )
    }

    showDate(d) {
        alert(d.date)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    }
})
Accordion
Carousel