Skip to content
On this page

业务日历

Hidden Title

基础用法:<s-schedule-calendar v-model="currentMonth" v-model:view="view" :tasks="tasks" />

基础用法(view 默认值:monthtasks 默认值:[]maxTasksPerDay 默认值:3

使用 v-model 控制当前月份,使用 v-model:view 在月历和日程间切换。日程模式使用 s-table 展示日期、履约事项、所属合同、提醒时间和操作。筛选条件通过 filters 插槽传入;点击日期触发 day-click,点击月历任务、日程事项或“查看”操作都会触发 task-click。单日任务超过 maxTasksPerDay 时,日期格右上角显示“更多”,点击后以下拉层展示剩余任务;下拉任务与直接展示的任务触发相同事件。

属性

属性名说明类型可选值默认值
modelValue / v-model当前展示月份,切换上月、下月或今天时自动更新string / number / Date当前日期
view / v-model:view当前展示模式'month' / 'schedule'month / schedulemonth
tasks任务列表ScheduleCalendarTask[][]
maxTasksPerDay月历单日直接显示的最大任务数,超出部分通过右上角“更多”展开number3
emptyText日程模式无任务时的提示string暂无日程

ScheduleCalendarTask

字段说明类型默认值
id任务唯一标识string / number
title任务标题string
date任务日期string / number / Date
type履约事项类型,显示在日程事项标题下方string-
contractName所属合同string-
reminder提醒时间string-
color文字和左侧标记颜色string#2761a5
backgroundColor任务背景色string#eaf2ff

插槽

插槽名说明插槽参数
filters工具栏右侧的搜索、选择等业务筛选项{ currentDate, view }
day自定义月历日期内容{ day }
task自定义月历任务及日程表格中的履约事项标题{ task, day }
scheduleAction自定义日程表格操作列,默认显示“查看”按钮{ task, day }
empty自定义日程空状态

事件

事件名说明参数
month-change月份变化时触发(date: Date)
view-change月历/日程切换时触发(view: 'month' / 'schedule')
day-click点击任意日期格或日程日期时触发(day: ScheduleCalendarDay)
task-click点击任务时触发,不会继续触发 day-click(task, day, event)

思云博智私有前端组件库