示例

日历单元格可以通过beforeRender函数设置不同类型展示不一样的背景色，也支持操作单元格弹出popover自定义内容的弹框，详情想看下面的demo和说明。

Click触发弹框

通过click触发弹框展示

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="日历">
    <calendar x="calendar"
              before-render="{{beforeRender}}"
              bindselect="selecteHandler"
              bindchanged="change">
        <template slot="popover">
            <main title="标题标题" subtitle="{{subtitle}}">
                <form label-size="{{50}}">
                    <item colspan="6" label="我是label" node="input"></item>
                    <item colspan="6" label="我是label" node="input"></item>
                    <item colspan="6" label="我是label" node="input"></item>
                </form>
            </main>
        </template>
    </calendar>
</page>

import moment from 'moment';

const getTomorrow=(num)=>{
    let today=new Date();
    let tomorrow=new Date(today);
    tomorrow.setDate(today.getDate()+num);
    return moment(tomorrow).format('YYYY-MM-DD');
}

export default XPage({
    data: {
        showPopoverLists: [
            {date: moment(new Date()).format('YYYY-MM-DD'), status: 'danger'},
            {date: getTomorrow(1), status: 'success'},
            {date: getTomorrow(2), status: 'success'},
            {date: getTomorrow(3), status: 'success'},
            {date: getTomorrow(4), status: 'warning'}
        ],
        subtitle: '',
    },
    selecteHandler(date, obj) {
        obj.isPopoverShow ? this.getComponent('calendar').hidePopover() : this.showPopoverHandler(date);
    },
    beforeRender(date) {
        const list = this.data.showPopoverLists.filter((item) => {
            return moment(item.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD');
        });

        if (list.length) {
            return {
                status: list[0].status || '',
            };
        }
    },
    change(date) {
        this.setData({
            subtitle: `选中日期是 ${moment(date).format('YYYY-MM-DD')}`
        });

        this.showPopoverHandler(date);
    },
    showPopoverHandler(date) {
        const needShow = this.data.showPopoverLists.filter((item) => {
            return moment(item.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD');
        });

        if (!needShow.length) {
            return;
        }

        // 请在设置value后延时展示弹框
        this.getComponent('calendar').showPopover();
    }

});

Hover触发弹框

通过hover触发弹框展示，注：通过hover触发弹框展示时调用showPopover函数请传入参数'hover'。

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="日历">
    <calendar x="calendar"
              before-render="{{beforeRender}}"
              bindcell-mouse-enter="mouseEnter"
              bindcell-mouse-leave="mouseLeave"
    >
        <template slot="popover">
            {{text}}
        </template>
    </calendar>
</page>

import moment from 'moment';

const getTomorrow=(num)=>{
    let today=new Date();
    let tomorrow=new Date(today);
    tomorrow.setDate(today.getDate()+num);
    return moment(tomorrow).format('YYYY-MM-DD');
}

export default XPage({
    data: {
        showPopoverLists: [
            {date: moment(new Date()).format('YYYY-MM-DD'), status: 'danger'},
            {date: getTomorrow(1), status: 'success'},
            {date: getTomorrow(2), status: 'success'},
            {date: getTomorrow(3), status: 'success'},
            {date: getTomorrow(4), status: 'warning'}
        ],
        text: '',
    },
    beforeRender(date) {
        const list = this.data.showPopoverLists.filter((item) => {
            return moment(item.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD');
        });

        if (list.length) {
            return {
                status: list[0].status || '',
            };
        }
    },

    mouseEnter(date) {
        this.setData({
            text: `当前hover日期是 ${moment(date).format('YYYY-MM-DD')}`
        });

        this.showPopoverHandler(date);
    },
    mouseLeave() {
        this.getComponent('calendar').hidePopover();
    },

    showPopoverHandler(date) {
        const needShow = this.data.showPopoverLists.filter((item) => {
            return moment(item.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD');
        });

        if (!needShow.length) {
            return;
        }

        this.getComponent('calendar').showPopover('hover');//hover展示弹框请传入参数：'hover'
    },
});

Attributes

属性	说明	类型	可选值	默认值	端	版本
value	绑定值	Date/String	--	--	PC	--
beforeRender	单元格渲染前执行，可返回对象如：{status:'success'},具体支持属性请参考下表	Function	--	--	PC	--

beforeRender

单元格渲染前执行，返回的参数为Object，对象中值的说明如下表

属性	说明	类型	可选值	默认值	端	版本
status	单元格状态	String	success/danger/warning	--	PC	--

Events

名称	说明	回调参数	端	版本
changed	选择日期改变后触发	(value)	PC	--
select	选择单元格时触发	(value, callback)	PC	--
cell-mouse-enter	鼠标进入单元格触发	(value, callback)	PC	--
cell-mouse-leave	鼠标离开单元格触发	(value, callback)	PC	--

Methods

名称	说明	入参	返回	端	版本
showPopover	展示popover弹框	--	--	PC	--
hidePopover	关闭popover弹框	--	--	PC	--

Slot

名称	说明	端	版本
popover	自定义内容弹框	PC	--