calendar

![](/media/202404/2024-04-29_170811_104491.png)

------------
日历

------------
代码示例如下
```html
<template>
    <div>
        <hi-calendar v-bind="props" :dataSource="deptStore" startField="fwritetime" endField="ftime" :timeScale="true" @pick="pickFn"  @addbtn="addbtnFn" @tabclick="tabclickFN">
        </hi-calendar>
    </div>
</template>

export default {
    data() {
        return {
            deptStore:{},
            deptCfg: {
            modelFile: "eap5csxm.pro/KongJianCeShi.dir/ShuJuJiCeShi.dir/MysqlShuJuJi.moduledir/dataset.datadir/ZhuCongCongShuJuJi.bizstore|o6VcEuOC.BizEntity~_extFile",
            desc:"数据集配置部门",
            //数据集配置  部门
            id: "ssss",
            "pageSize":5,
            //主键
            primary: ["id"],
            //操作权限
            operations: ["oinsert", "odelete", "oquery", "omodify"],
            //字段顺序,自动填充的顺充
            sortFields: ["id", "name"],
            fields: {
            id: {
                name: "fnumber", //字段ID
                label: "部门ID", //字段描述
                dbtype: "dbString", //数据类型
                // required: true,
                // precision: 0,
                // readonly: true,
                readonly: false,
                length: 50,
                rules: [],
                /* default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + new Date().valueOf()
                                },
                            }, */
            },
            desc: {
                name: "desc", //字段ID
                label: "部门描述", //字段描述
                readonly: false,
                // required: true,
                dbtype: "dbString", //数据类型
                fireTarget: ["name"],
                "validateList": [
                    {
                        "expr": function (value, dataset, data) {
                            //return new Error("部门描述错误消息")
                        }
                    }
                ]
            },
            name: {
                name: "name", //字段ID
                label: "部门名称", //字段描述
                // required: true,
                dbtype: "dbString", //数据类型
                readonly: false,
                default: {
                //默认值
                //rule: "first", //prior   填充规则
                exps: (data) => {
                    //填充表达式
                    return "部门" + data.desc || data.id;
                },
                },
            },
            field12: {
                name: "field12", //字段ID
                label: "field12", //字段描述
            },
            field18: {
                name: "field18", //字段ID
                label: "field18", //字段描述
                dbtype: "dbBoolean", //数据类型
            },
            field13: {
                lookup: {
                fieldPair: {
                    "dept": {
                        "targetEntity": "ssss",
                        "returnFields": {
                            "field13": "FC1",
                            "id": "FC2"
                        }
                    }
                },
                },
            },
            },
        },
            props:{
                addBtn:true,
                // hasDetail:false,
                // hasWeek:false,
                // hasDay:false,
                monthFn:function(date,data,rows){return `<span>${date.getDate()}</span><div>${rows.length}个日程</div>`
                },
                weekFn:function(date,data,rows){
                    let color="blue"
                    if(date.getDate()>15){
                        color="red"
                    }
                    return `<span style="color:${color}">${date.getDate()}</span><div>${rows.length}个日程</div>`
                },
                dayFn:function(date,rows){
                    if(rows&&rows.length){
                        return `<span>${date.getDate()}</span><div>${rows.length}个日程</div>`
                    }else{
                    return"暂无数据！"
                    }
                },
                detailFn:function(date,rows){
                    return `<span>详情</span><div>${rows.length}个日程</div>`
                },

}
        }
    },
    methods: {
        pickFn(_this,day,rows){
            console.log(_this,day,rows)
        },
        tabclickFN(_this,type,event){
            console.log(_this,type,event)
        },
        addbtnFn(){
        }
    },
    created() {
        this.deptStore = this.$dsContainer.createDataSet(this.deptCfg);
    },
};
</script>
```

</div>

### Attributes

| 参数    | 说明         | 类型     | 可选值                   | 默认值 |
|-------|------------|--------|-----------------------|-----|
| name  | 字段名        | string |                       |     |
| label | 字段描述       | string |                       |     |
| size  | 用于控制该按钮的尺寸 | string | medium / small / mini |     |

</style>