# 日历 calendar

# 描述

显示日期,提供两种获取所选日期的方式。

# 使用效果

# 使用方法

.ux文件中引入组件

<import name="my-calendar" src="apex-ui/components/calendar/index"></import>
1

# 示例

<template>
    <div class="wrap">
        <div class="line">
            <text>单程使用</text>
            <my-calendar visible="{{open}}" trip="single" onschedule="getSchedule"></my-calendar>
        </div>
        <div class="line">
            <text>联程使用</text>
            <my-calendar visible="{{open}}" trip="round" onschedule="getSchedule"></my-calendar>
        </div>
        <div class="line">
            <text>自定义主题</text>
            <my-calendar visible="{{open}}" number="{{num}}" onschedule="getSchedule" click-style="{{tapArray}}" subtitle="{{subColor}}" title="{{desc}}" bg-color="{{bgColor}}"></my-calendar>
        </div>
        <div class="line">
            <text>自定义标题</text>
            <my-calendar visible="{{open}}" onschedule="getSchedule">
                <div slot="title" class="title">
                    <text>自定义日历标题<text>
                </div>
            </my-calendar>
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.wrap {
    flex-direction: column;
    .line {
        flex-direction: row;
        justify-content: space-between;
        height: 100px;
        border-bottom-color: #bbbec4;
        border-bottom-width: 1px;
        width: 100%;
        align-items: center;
        padding: 0 20px;
    }
    .title{
        height:100px;
        width:100%;
        background-color: #ffff00;
        text{
            width:100%;
            text-align:center;
            font-size:40px;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default {
    data() {
        return {
            open:true,
            num:8,
            bgColor:'#ffffff',
            desc:'test message',
            subColor:'aliceblue',
            tapArray:['#f7c992', '#ffe4c4']
        }
    },
    getSchedule(e){
        console.log(JSON.parse(e.detail.data))
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# API

# 组件属性

属性 类型 默认值 说明
visible Boolean false 组件当前状态
trip String single 组件显示方式
number Number 8 组件显示月份总数
title String 'test message' 组件主标题描述
subtitle String 'aliceblue' 组件子标题背景色
bg-color String '#ffffff' 组件页面背景色
click-style Array ['#f7c992', '#ffe4c4'] 日期被点击时的背景色,间隔日期的背景色

# 组件事件

事件名称 事件描述 返回值
schedule 日期选择发生改变时的事件 {year: yaer, month: month, day: day, week: week}