CareUI

# 日历

# 事项日历面板

请选择
请选择
隐藏周末
28
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
一二三四五六日
<template>
  <t-calendar :controllerConfig="controllerConfig"/>
</template>
<script>
export default {
    data() {
        return {
            controllerConfig: {
                visible: true,
                disabled: false, // 是否禁用（全部控件）
                // 年份选择框组件相关设置
                year: {
                    visible: true, // 是否显示
                    selecteProps: {
                        // 用于透传props给该select组件
                        disabled: false,
                        size: 'small',
                    }
                },
                // 月份选择框组件相关设置
                month: {
                    visible: true, // 是否显示（“year”模式下本身是不显示该组件的）
                    selecteProps: {
                        // 用于透传props给该select组件
                        disabled: false,
                        size: 'small',
                    },
                },
                // 模式切换单选组件设置
                mode: {
                    visible: true, // 是否显示
                    radioGroupProps: {
                        disabled: false,
                        size: 'small',
                    },
                },
                // 隐藏\显示周末按钮组件相关设置
                weekend: {
                    visible: true, // 是否显示
                    showWeekendButtonProps: {
                        // 用于透传props给显示周末按钮组件
                        disabled: false,
                        size: 'small',
                    },
                    hideWeekendButtonProps: {
                        // 用于透传props给隐藏周末按钮组件
                        disabled: false,
                        variant: 'base',
                        size: 'small',
                    },
                },
                // “今天\本月”按钮组件相关设置
                current: {
                    visible: true, // 是否显示
                    currentDayButtonProps: {
                        // 用于透传props给“今天”钮组件（“month”模式下有效）
                        disabled: false,
                        size: 'small',
                    },
                    currentMonthButtonProps: {
                        // 用于透传props给“本月”按钮组件（“year”模式下有效）
                        disabled: false,
                        size: 'small',
                        theme: 'warning',
                    },
                },
            }
        }
    }
}
</script>
显示代码 复制代码

# 卡片日历面板

请选择
请选择
请选择
28
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
一二三四五六日
<template>
    <div class="demo-calendar-column">
        <div class="demo-calendar-row">
            <label>请选择风格：</label>
            <t-select v-model="theme" style="width: 200px;margin-right: 20px;">
                <t-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
            </t-select>
            <t-button theme="primary" @click="toCurrent()">今天（当前高亮日期）</t-button>
        </div>
        <div class="demo-calendar-row">
            <label style="margin-left: 50px;">日期补零：</label>
            <t-switch size="large" v-model="fillWithZero"></t-switch>
        </div>
        <t-calendar
        ref="myCalendar"
        :theme="theme"
        :isShowWeekendDefault="isShowWeekendDefault"
        :fillWithZero="fillWithZero"
        :controllerConfig="controllerConfig">
        </t-calendar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            theme: 'card',
            isShowWeekendDefault: true,
            fillWithZero: true,
            options: [
                { value: 'full', label: '全屏风格' },
                { value: 'card', label: '卡片风格' },
            ],
            controllerConfig: {
                visible: true,
                disabled: false, // 是否禁用（全部控件）
                // 年份选择框组件相关设置
                year: {
                    visible: true, // 是否显示
                    selecteProps: {
                        // 用于透传props给该select组件
                        disabled: true,
                        size: 'small',
                    }
                },
                // 月份选择框组件相关设置
                month: {
                    visible: true, // 是否显示（“year”模式下本身是不显示该组件的）
                    selecteProps: {
                        // 用于透传props给该select组件
                        disabled: false,
                        size: 'small',
                    },
                },
                // 模式切换单选组件设置
                mode: {
                    visible: true, // 是否显示
                    radioGroupProps: {
                        disabled: false,
                        size: 'small',
                        variant: "primary-filled",
                    },
                },
                // 隐藏\显示周末按钮组件相关设置
                weekend: {
                    visible: true, // 是否显示
                    showWeekendButtonProps: {
                        // 用于透传props给显示周末按钮组件
                        disabled: false,
                        size: 'small',
                    },
                    hideWeekendButtonProps: {
                        // 用于透传props给隐藏周末按钮组件
                        disabled: false,
                        variant: 'base',
                        size: 'small',
                    },
                },
                // “今天\本月”按钮组件相关设置
                current: {
                    visible: true, // 是否显示
                    currentDayButtonProps: {
                        // 用于透传props给“今天”钮组件（“month”模式下有效）
                        disabled: false,
                        size: 'small',
                    },
                    currentMonthButtonProps: {
                        // 用于透传props给“本月”按钮组件（“year”模式下有效）
                        disabled: false,
                        size: 'small',
                        theme: 'warning',
                    },
                },
            }
        };
    },
    methods: {
        toCurrent() {
            if (this.$refs.myCalendar) {
                this.$refs.myCalendar.toCurrent();
            }
        }
    },
};
</script>
显示代码 复制代码

# 自定义日历面板（插槽示例）

🗓 CareDesign开发计划
请选择
请选择
隐藏周末
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
错误事件
警告事件
正常事件
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
一二三四五六日
<template>
  <t-calendar>
    <div slot="head">
        🗓 CareDesign开发计划
    </div>
    <div slot="cell" slot-scope="data" class="outerWarrper">
      <div class="number">{{ displayNum(data) }}</div>
      <template v-if="isShow(data)">
        <div class="slotWarrper">
          <div v-for="(item, index) in dataList" :key="index" class="item">
            <span :class="item.value"></span>
            {{item.label}}
          </div>
        </div>
        <div class="shadow"></div>
      </template>
    </div>
  </t-calendar>
</template>

<script>

export default {
    data() {
        return {
        dataList: [{
            value: 'error',
            label: '错误事件',
        }, {
            value: 'waring',
            label: '警告事件',
        }, {
            value: 'success',
            label: '正常事件',
        }],
        };
    },
    methods: {
        isShow(data) {
            return data.mode === 'month' ? data.formattedDate.split('-')[2] === '15' : data.formattedDate.split('-')[1] === '07';
        },
        displayNum(cellData) {
            if (cellData.mode === 'month') {
                return cellData.date.getDate();
            }
            return cellData.date.getMonth() + 1;
        },
    },
};
</script>

<style lang="less" scoped>
.outerWarrper {
  width: 100%;
  height: 100%;
  position: relative;

  .shadow {
    position: absolute;
    width: 100%;
    height: 12px;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  }
  .number {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 14px;
  }
  .item {
    position: relative;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.6);
    span {
      display: block;
      left: 1px;
      width: 5px;
      height: 5px;
      border-radius: 10px;
      margin-right: 4px;
    }
  }
  .error  {
    background: #E34D59;
  }
  .waring {
    background: #ED7B2F;
  }
  .success {
    background: #00A870;
  }

  .slotWarrper {
    position: absolute;
    bottom: 2px;
    left: 5px;
  }
}
</style>
显示代码 复制代码

← progress 进度条 →