BizCalendarBoard 日期排版

月/周双模式日期排版板：月模式按天网格铺满整月（动态行数），周模式 7 天横排；头部支持上一月/下一月（周模式为上一周/下一周）切换与「今天」回跳。单元格内容经 #cell 作用域插槽完全自定义；当天之前的日期默认禁用（不可选中、不触发事件），并支持 min/max 范围与 disabled-date 组合圈定可交互区间。排班、考勤、预约、营销日历等一切「按天组织内容」的场景。

基础用法

一

二

三

四

五

六

日

已上线

26今

需求评审

版本发布

上线窗口

选中：未选择；灰色单元格为当天之前的日期，点击不生效。

月模式 + v-model 选中 + marks 标记（色点 + 文案）；当天之前自动禁用，历史只读。

<script setup lang="ts">
/** 场景：月模式基础用法——v-model 选中、marks 标记，当天之前自动禁用（历史只读） */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardMark } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const selected = ref<Date>()
const marks: BizCalendarBoardMark[] = [
  { date: key(1), type: 'primary', text: '需求评审' },
  { date: key(3), type: 'warning', text: '版本发布' },
  { date: key(5), type: 'success', text: '上线窗口' },
  { date: key(-2), type: 'info', text: '已上线' },
]
</script>

<template>
  <div>
    <BizCalendarBoard v-model="selected" :marks="marks" style="max-width: 720px" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      选中：{{ selected ? selected.toLocaleDateString() : '未选择' }}；灰色单元格为当天之前的日期，点击不生效。
    </p>
  </div>
</template>

周模式排班

10月26日周一今

早班

10月27日周二

中班晚班

10月28日周三

10月29日周四

早班中班

10月30日周五

10月31日周六

11月1日周日

点击本周及以后的日期逐个追加班次（满 3 个后再点即清空）；当天之前的日期组件已禁用，不会被误改。

v-model:mode 切到周模式，#cell 插槽自绘班次标签；点击未来日期逐个追加班次，历史日期被组件拦截不会误改。

<script setup lang="ts">
/** 场景：周模式排班——v-model:mode 切周视图，cell 插槽自绘班次；历史日期被组件拦截，只有未来可改 */
import { ref } from 'vue'
import { ElMessage, ElTag } from 'element-plus'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardCell } from 'vue3-ep-biz-lib'

const mode = ref<'month' | 'week'>('week')

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const SHIFTS = ['早班', '中班', '晚班'] as const
const shifts = ref<Record<string, string[]>>({
  [key(0)]: ['早班'],
  [key(1)]: ['中班', '晚班'],
  [key(3)]: ['早班', '中班'],
})

const tagType = (shift: string): 'success' | 'primary' | 'warning' =>
  shift === '早班' ? 'success' : shift === '中班' ? 'primary' : 'warning'

const onCell = (cell: BizCalendarBoardCell): void => {
  const list = shifts.value[cell.key] ?? []
  if (list.length >= SHIFTS.length) {
    shifts.value[cell.key] = []
    ElMessage.info(`${cell.key} 班次已清空`)
    return
  }
  shifts.value[cell.key] = [...list, SHIFTS[list.length]]
}
</script>

<template>
  <div>
    <BizCalendarBoard
      v-model:mode="mode"
      style="max-width: 960px"
      :week-cell-height="180"
      @cell-click="onCell"
    >
      <template #cell="cell">
        <ElTag
          v-for="shift in shifts[cell.key] ?? []"
          :key="shift"
          size="small"
          :type="tagType(shift)"
          style="margin: 0 4px 4px 0"
          disable-transitions
        >
          {{ shift }}
        </ElTag>
        <span v-if="cell.past" style="font-size: 12px; color: var(--el-text-color-placeholder)">已归档</span>
      </template>
    </BizCalendarBoard>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击本周及以后的日期逐个追加班次（满 3 个后再点即清空）；当天之前的日期组件已禁用，不会被误改。
    </p>
  </div>
</template>

考勤月历（只读 + 周末高亮）

一

二

三

四

五

六

日

外勤

正常

缺卡

正常

迟到

正常

26今

补卡截止

历史月份自动整体禁用只读；周末列红色高亮，红点=迟到、灰点=缺卡、橙点=外勤。

selectable=false 纯展示 + highlight-weekend 周末高亮；历史打卡状态经 marks 色点呈现。

<script setup lang="ts">
/** 场景：考勤月历——selectable=false 纯展示 + 周末高亮，历史打卡状态经 marks 色点呈现 */
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardMark } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const marks: BizCalendarBoardMark[] = [
  { date: key(-1), type: 'success', text: '正常' },
  { date: key(-2), type: 'danger', text: '迟到' },
  { date: key(-3), type: 'success', text: '正常' },
  { date: key(-4), type: 'info', text: '缺卡' },
  { date: key(-5), type: 'success', text: '正常' },
  { date: key(-6), type: 'warning', text: '外勤' },
  { date: key(2), type: 'primary', text: '补卡截止' },
]
</script>

<template>
  <div>
    <BizCalendarBoard :selectable="false" highlight-weekend :marks="marks" style="max-width: 720px" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      历史月份自动整体禁用只读；周末列红色高亮，红点=迟到、灰点=缺卡、橙点=外勤。
    </p>
  </div>
</template>

场地预约（范围与自定义禁用）

一

二

三

四

五

六

日

26今

余 6

余 0

余 12

余 3

余 8

仅 30 天内可约（其余日期禁用）；周日闭馆整体禁用；点满员日期给出告警。

max-date 圈定 30 天可约窗口、disabled-date 屏蔽每周日（闭馆），#cell 插槽展示剩余名额。

<script setup lang="ts">
/** 场景：场地预约——min/max 圈定可约窗口、disabled-date 屏蔽闭馆日，cell 插槽展示剩余名额 */
import { ref } from 'vue'
import { ElMessage, ElTag } from 'element-plus'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardCell } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

/** 仅开放 30 天内可约（当天起），每周日闭馆 */
const maxDate = key(30)
const disabledDate = (date: Date): boolean => date.getDay() === 0

const remaining: Record<string, number> = {
  [key(1)]: 6,
  [key(2)]: 0,
  [key(3)]: 12,
  [key(5)]: 3,
  [key(6)]: 8,
}

const selected = ref<Date>()
const onCell = (cell: BizCalendarBoardCell): void => {
  const left = remaining[cell.key] ?? 5
  if (left <= 0) {
    ElMessage.warning(`${cell.key} 名额已满`)
    return
  }
  ElMessage.success(`已预约 ${cell.key}，剩余名额 ${left - 1}`)
}
</script>

<template>
  <div>
    <BizCalendarBoard
      v-model="selected"
      :max-date="maxDate"
      :disabled-date="disabledDate"
      style="max-width: 720px"
      @cell-click="onCell"
    >
      <template #cell="cell">
        <ElTag
          v-if="remaining[cell.key] !== undefined"
          size="small"
          :type="(remaining[cell.key] ?? 5) > 0 ? 'success' : 'danger'"
          disable-transitions
        >
          余 {{ remaining[cell.key] ?? 5 }}
        </ElTag>
      </template>
    </BizCalendarBoard>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      仅 30 天内可约（其余日期禁用）；周日闭馆整体禁用；点满员日期给出告警。
    </p>
  </div>
</template>

外部控制与实例方法

一

二

三

四

五

六

日

26今

当前面板范围：点击上方按钮查看

expose（switchPrev / switchNext / switchToday / goTo / setMode / getViewRange）+ view-change 事件轨迹与面板范围回显。

<script setup lang="ts">
/** 场景：外部受控——expose 方法（prev/next/today/goTo/setMode/getViewRange）+ view-change 事件轨迹 */
import { ref } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardInstance, BizCalendarBoardViewChange } from 'vue3-ep-biz-lib'

const boardRef = ref<BizCalendarBoardInstance>()
const mode = ref<'month' | 'week'>('month')
const logs = ref<string[]>([])
const rangeText = ref('')

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const onViewChange = (payload: BizCalendarBoardViewChange): void => {
  logs.value.unshift(`${payload.source} · ${payload.mode === 'week' ? '周' : '月'} · ${payload.viewDate.toLocaleDateString()}`)
  logs.value = logs.value.slice(0, 8)
  const range = boardRef.value?.getViewRange()
  rangeText.value = range ? `${range.start.toLocaleDateString()} ~ ${range.end.toLocaleDateString()}` : ''
}
</script>

<template>
  <div>
    <div style="display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap">
      <ElButtonGroup>
        <ElButton size="small" @click="boardRef?.switchPrev()">上一页</ElButton>
        <ElButton size="small" @click="boardRef?.switchNext()">下一页</ElButton>
        <ElButton size="small" @click="boardRef?.switchToday()">回到今天</ElButton>
      </ElButtonGroup>
      <ElButton size="small" @click="boardRef?.goTo(key(45))">跳转 45 天后</ElButton>
      <ElButton size="small" @click="boardRef?.setMode(mode === 'month' ? 'week' : 'month')">
        切换月/周
      </ElButton>
    </div>
    <BizCalendarBoard ref="boardRef" v-model:mode="mode" style="max-width: 720px" @view-change="onViewChange" />
    <p style="margin: 12px 0 4px; font-size: 13px; color: var(--el-text-color-secondary)">
      当前面板范围：{{ rangeText || '点击上方按钮查看' }}
    </p>
    <ul class="cb-log">
      <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
    </ul>
  </div>
</template>

<style scoped>
.cb-log {
  max-width: 360px;
  padding: 8px 12px;
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  list-style: none;
  background: var(--el-fill-color-light);
  border-radius: 4px;
}
</style>

营销日历（完全自定义单元格）

一

二

三

四

五

六

日

26今

新品首发

直播开卖

会员日直播

蓝条=促销、绿条=新品、橙条=直播；历史活动自动呈灰色已结束态，当天之前的日期不可再选。

#cell 插槽完全接管单元格：活动条目分类着色、历史活动自动呈已结束态。

<script setup lang="ts">
/** 场景：营销日历——cell 插槽完全接管单元格：活动条目 + 未开始/已结束状态 + 自定义排版 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

interface Campaign {
  name: string
  kind: 'promo' | 'live' | 'new'
  started: boolean
}

const campaigns: Record<string, Campaign[]> = {
  [key(0)]: [{ name: '双促预热', kind: 'promo', started: true }],
  [key(2)]: [
    { name: '新品首发', kind: 'new', started: false },
    { name: '直播开卖', kind: 'live', started: false },
  ],
  [key(6)]: [{ name: '会员日直播', kind: 'live', started: false }],
  [key(-3)]: [{ name: '返场清仓', kind: 'promo', started: true }],
}

const selected = ref<Date>()
</script>

<template>
  <div>
    <BizCalendarBoard
      v-model="selected"
      :month-cell-height="120"
      style="max-width: 820px"
    >
      <template #cell="cell">
        <div
          v-for="c in campaigns[cell.key] ?? []"
          :key="c.name"
          class="cb-campaign"
          :class="[`cb-campaign--${c.kind}`, { 'is-ended': cell.past }]"
        >
          {{ c.name }}
        </div>
      </template>
    </BizCalendarBoard>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      蓝条=促销、绿条=新品、橙条=直播；历史活动自动呈灰色已结束态，当天之前的日期不可再选。
    </p>
  </div>
</template>

<style scoped>
.cb-campaign {
  margin-bottom: 4px;
  padding: 1px 6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-color-white);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 3px;
}

.cb-campaign--promo {
  background: var(--el-color-primary);
}

.cb-campaign--new {
  background: var(--el-color-success);
}

.cb-campaign--live {
  background: var(--el-color-warning);
}

.cb-campaign.is-ended {
  color: var(--el-text-color-placeholder);
  background: var(--el-fill-color-darker);
}
</style>

日程事件（基础）

一

二

三

四

五

六

日

26今

09:30-10:00晨会同步14:00-15:30版本评审

10:00-11:30客户拜访

周年庆活动

16:00-16:301v1 沟通

点击事件条：（尚未点击事件）；点击空白格选中日期（cell-click 可挂「新建日程」）。

events 数据驱动事件条：时段（time 前缀）+ 语义色 + 全天（allDay 描边形态）；点击事件条外抛 event-click，点击空白格选中日期可挂「新建日程」。

<script setup lang="ts">
/** 场景：个人日程——events 数据驱动事件条（时段 + 语义色），点击事件外抛详情，点击空白格即选日期可建日程 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarEvent } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const events: BizCalendarEvent[] = [
  { id: 1, date: key(0), time: '09:30-10:00', title: '晨会同步', type: 'primary' },
  { id: 2, date: key(0), time: '14:00-15:30', title: '版本评审', type: 'warning' },
  { id: 3, date: key(1), time: '10:00-11:30', title: '客户拜访', type: 'success' },
  { id: 4, date: key(3), title: '周年庆活动', type: 'danger', allDay: true },
  { id: 5, date: key(5), time: '16:00-16:30', title: '1v1 沟通', type: 'info' },
]

const selected = ref<Date>()
const lastEvent = ref('（尚未点击事件）')
const onEventClick = (ev: BizCalendarEvent): void => {
  lastEvent.value = `${ev.time ?? '全天'} · ${ev.title}`
}
</script>

<template>
  <div>
    <BizCalendarBoard
      v-model="selected"
      :events="events"
      :month-cell-height="128"
      style="max-width: 820px"
      @event-click="onEventClick"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击事件条：{{ lastEvent }}；点击空白格选中日期（cell-click 可挂「新建日程」）。
    </p>
  </div>
</template>

日程事件（溢出折叠）

一

二

三

四

五

六

日

26今

09:00产品评审10:30面试-前端13:30架构讨论 +2 项

11:00项目例会

单格最多渲染 3 条，超出折叠为「+N 项」；event-limit 可按格子高度自由调整。

单日事件超出 event-limit（默认 3）自动折叠为「+N 项」，点击外抛 event-more（携带当日完整事件列表）——会议室预约等密集场景按格子高度调节 limit 即可。

<script setup lang="ts">
/** 场景：会议室预约——单日多条事件超出 event-limit 折叠为 +N，点击 +N 弹出当日全部预约 */
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarEvent } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

/** 周三密集预约：默认 event-limit=3 时折叠为 +2 */
const events: BizCalendarEvent[] = [
  { id: 1, date: key(0), time: '09:00', title: '产品评审', type: 'primary' },
  { id: 2, date: key(0), time: '10:30', title: '面试-前端', type: 'info' },
  { id: 3, date: key(0), time: '13:30', title: '架构讨论', type: 'warning' },
  { id: 4, date: key(0), time: '15:00', title: '需求对齐', type: 'success' },
  { id: 5, date: key(0), time: '16:30', title: '周复盘', type: 'danger' },
  { id: 6, date: key(2), time: '11:00', title: '项目例会', type: 'primary' },
]

const onEventMore = ({ date, events: list }: { date: Date; key: string; events: BizCalendarEvent[] }): void => {
  ElMessage.info(`${date.getMonth() + 1}月${date.getDate()}日共 ${list.length} 条预约：${list.map((e) => e.title).join('、')}`)
}
</script>

<template>
  <div>
    <BizCalendarBoard
      :events="events"
      :event-limit="3"
      :month-cell-height="120"
      :disable-past="false"
      style="max-width: 820px"
      @event-more="onEventMore"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      单格最多渲染 3 条，超出折叠为「+N 项」；event-limit 可按格子高度自由调整。
    </p>
  </div>
</template>

日程事件（跨天 / 全天排期）

一

二

三

四

五

六

日

26今

618 大促

618 大促新品巡展

618 大促

19:00-21:00会员夜场

跨天事件在区间内每日铺满（描边轻量形态）；最近点击：（尚未点击）；切到周模式可逐日查看排期。

跨天事件声明 date ~ end 区间后每日铺满该事件条（描边轻量形态），切到周模式可逐日核对排期；meta 附加数据随事件原样带出。

<script setup lang="ts">
/** 场景：活动排期——跨天 / 全天事件按区间铺满每一天（描边形态区分），周模式逐日展示 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarEvent } from 'vue3-ep-biz-lib'

const today = new Date()
const key = (offset: number): string => {
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const events: BizCalendarEvent[] = [
  /** 跨天活动：date ~ end 区间内每天都渲染该事件条 */
  { id: 1, date: key(1), end: key(4), title: '618 大促', type: 'danger', allDay: true, meta: { owner: '运营部' } },
  { id: 2, date: key(2), end: key(3), title: '新品巡展', type: 'primary', allDay: true },
  { id: 3, date: key(6), time: '19:00-21:00', title: '会员夜场', type: 'warning' },
  { id: 4, date: key(9), title: '系统升级维护', type: 'info', allDay: true },
]

const lastClicked = ref('（尚未点击）')
</script>

<template>
  <div>
    <BizCalendarBoard
      :events="events"
      :disable-past="false"
      :month-cell-height="112"
      style="max-width: 820px"
      @event-click="(ev) => (lastClicked = `${ev.title}${ev.end !== undefined ? '（跨天）' : ''}`)"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      跨天事件在区间内每日铺满（描边轻量形态）；最近点击：{{ lastClicked }}；切到周模式可逐日查看排期。
    </p>
  </div>
</template>

日程事件（新建与查看联动）

一

二

三

四

五

六

日

26今

10:00-11:00迭代规划

15:00用例评审

版本发布

点击空白格按日期新建日程、点击事件条查看详情——事件列表是响应式数据，增删后事件条即时刷新。

cell-click 空白格按日期新建（弹窗录入）、event-click 点击查看详情；事件列表是响应式数据，增删后事件条即时刷新。

<script setup lang="ts">
/** 场景：团队日程维护——cell-click 空白格新建（弹窗录入），event-click 点击查看，事件条随数据即时刷新 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarEvent } from 'vue3-ep-biz-lib'
import { ElButton, ElDialog, ElInput, ElMessage, ElRadioButton, ElRadioGroup } from 'element-plus'

const today = new Date()
const pad = (n: number): string => String(n).padStart(2, '0')
const keyOf = (d: Date): string => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
const key = (offset: number): string => keyOf(new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset))

let seedId = 4
const events = ref<BizCalendarEvent[]>([
  { id: 1, date: key(0), time: '10:00-11:00', title: '迭代规划', type: 'primary' },
  { id: 2, date: key(2), time: '15:00', title: '用例评审', type: 'success' },
  { id: 3, date: key(4), title: '版本发布', type: 'danger', allDay: true },
])

const dialogVisible = ref(false)
const draftDate = ref('')
const draftTitle = ref('')
const draftType = ref<'primary' | 'success' | 'warning' | 'danger' | 'info'>('primary')

/** 点击空白格：带上日期打开新建弹窗（日期不可选处不触发） */
const onCellClick = ({ key: cellKey }: { key: string }): void => {
  draftDate.value = cellKey
  draftTitle.value = ''
  draftType.value = 'primary'
  dialogVisible.value = true
}

const confirmCreate = (): void => {
  if (draftTitle.value.trim() === '') {
    ElMessage.warning('请填写日程标题')
    return
  }
  events.value.push({ id: seedId++, date: draftDate.value, title: draftTitle.value.trim(), type: draftType.value, time: '09:00' })
  dialogVisible.value = false
  ElMessage.success('日程已创建')
}

const onEventClick = (ev: BizCalendarEvent): void => {
  ElMessage.info(`查看日程：${ev.time !== undefined && ev.time !== '' ? `${ev.time} ` : ''}${ev.title}`)
}
</script>

<template>
  <div>
    <BizCalendarBoard
      :events="events"
      :disable-past="false"
      :month-cell-height="118"
      style="max-width: 820px"
      @cell-click="onCellClick"
      @event-click="onEventClick"
    />
    <ElDialog v-model="dialogVisible" :title="`新建日程 · ${draftDate}`" width="420px">
      <ElInput v-model="draftTitle" placeholder="日程标题，如：需求评审" maxlength="30" />
      <ElRadioGroup v-model="draftType" size="small" style="margin-top: 12px">
        <ElRadioButton value="primary">常规</ElRadioButton>
        <ElRadioButton value="success">会议</ElRadioButton>
        <ElRadioButton value="warning">提醒</ElRadioButton>
        <ElRadioButton value="danger">重要</ElRadioButton>
      </ElRadioGroup>
      <template #footer>
        <ElButton @click="dialogVisible = false">取消</ElButton>
        <ElButton type="primary" @click="confirmCreate">创建</ElButton>
      </template>
    </ElDialog>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击空白格按日期新建日程、点击事件条查看详情——事件列表是响应式数据，增删后事件条即时刷新。
    </p>
  </div>
</template>

日程导出 .ics

一

二

三

四

五

六

日

26今

09:30-11:00季度经营分析会

供应商年度审计

time（09:30-11:00）→ 当日 VEVENT 起止时刻；跨天（28~30）→ 起日 0 点 ~ 止日次日 0 点全天口径；allDay → 单日全天。

expose.exportIcs() 一键下载标准 .ics：time → 当日 VEVENT 起止时刻（止时 ≤ 起时视为跨零点顺延一日）；跨天 → 起日 0 点 ~ 止日次日 0 点；allDay → 单日全天；UID 稳定取 id@biz-calendar-board，重复导入按同一条目更新而非重复建条。

<script setup lang="ts">
/** ics 导出基础：expose.exportIcs() 一键下载标准 .ics，Outlook / 系统日历直接导入 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardInstance, BizCalendarEvent } from 'vue3-ep-biz-lib'

const calRef = ref<BizCalendarBoardInstance>()

const events: BizCalendarEvent[] = [
  { id: 1, title: '季度经营分析会', date: '2026-10-26', time: '09:30-11:00', type: 'primary' },
  { id: 2, title: '供应商年度审计', date: '2026-10-28', end: '2026-10-30', type: 'warning' },
  { id: 3, title: '团建 · 湖州两日', date: '2026-11-06', end: '2026-11-07', type: 'success' },
  { id: 4, title: '双十一值班', date: '2026-11-11', allDay: true, type: 'danger' },
]
</script>

<template>
  <div style="max-width: 720px">
    <BizCalendarBoard ref="calRef" :events="events" />
    <div style="margin-top: 10px">
      <el-button type="primary" size="small" @click="calRef?.exportIcs({ filename: 'biz-calendar' })">导出 .ics 日历文件</el-button>
    </div>
    <p style="margin: 8px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      time（09:30-11:00）→ 当日 VEVENT 起止时刻；跨天（28~30）→ 起日 0 点 ~ 止日次日 0 点全天口径；allDay → 单日全天。
    </p>
  </div>
</template>

按视图范围导出

一

二

三

四

五

六

日

月度安全巡检

14:00-15:30新品评审会

26今

（尚未读取）

exportIcs 按 events 全量导出；如需「仅当前视图」，用 getViewRange() 区间过滤 events 后再触发导出（事件源由业务侧控制）。

getViewRange() 取当前面板区间——过滤事件源后再导出即得「仅当前视图」子集（事件源由业务侧控制）。

<script setup lang="ts">
/** 按视图范围导出：getViewRange() 取当前面板区间，先过滤事件源再导出 */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarBoardInstance, BizCalendarEvent } from 'vue3-ep-biz-lib'

const calRef = ref<BizCalendarBoardInstance>()
const viewText = ref('（尚未读取）')

const allEvents: BizCalendarEvent[] = [
  { id: 1, title: '月度安全巡检', date: '2026-10-09', allDay: true, type: 'warning' },
  { id: 2, title: '新品评审会', date: '2026-10-21', time: '14:00-15:30' },
  { id: 3, title: '预算编制启动', date: '2026-11-03', allDay: true, type: 'primary' },
  { id: 4, title: '年终盘点', date: '2026-12-20', end: '2026-12-31', type: 'danger' },
]

const readRange = (): void => {
  const range = calRef.value?.getViewRange()
  if (!range) return
  viewText.value = `${range.start.toLocaleDateString()} ~ ${range.end.toLocaleDateString()}`
}
</script>

<template>
  <div style="max-width: 720px">
    <BizCalendarBoard ref="calRef" :events="allEvents" @view-change="readRange" />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <el-button size="small" @click="readRange">读取当前视图范围</el-button>
      <span style="font-size: 12px; color: var(--el-text-color-placeholder)">{{ viewText }}</span>
    </div>
    <p style="margin: 8px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      exportIcs 按 events 全量导出；如需「仅当前视图」，用 getViewRange() 区间过滤 events 后再触发导出（事件源由业务侧控制）。
    </p>
  </div>
</template>

导出口径预览（事件粒度）

一

二

三

四

五

六

日

26今

09:00-09:30晨会15:00-16:30客户到访

（点击日历中的事件条查看导出口径）

点击事件条预览其 .ics VEVENT 换算口径；配合导出按钮即可「先看再导」。

event-click 展示该事件将写入 VEVENT 的起止换算口径，先看再导。

<script setup lang="ts">
/** 事件粒度交互：event-click 展示将导出的 VEVENT 口径（起止换算预览） */
import { ref } from 'vue'
import { BizCalendarBoard } from 'vue3-ep-biz-lib'
import type { BizCalendarEvent } from 'vue3-ep-biz-lib'

const picked = ref('（点击日历中的事件条查看导出口径）')

const events: BizCalendarEvent[] = [
  { id: 1, title: '晨会', date: '2026-10-27', time: '09:00-09:30' },
  { id: 2, title: '客户到访', date: '2026-10-27', time: '15:00-16:30', type: 'success' },
  { id: 3, title: '封闭开发', date: '2026-11-16', end: '2026-11-18', type: 'primary' },
]

const describe = (ev: BizCalendarEvent): string => {
  const day = String(ev.date)
  if (ev.end !== undefined) return `${ev.title}：${day} 00:00 ~ ${String(ev.end)} 次日 0 点（跨天全天）`
  if (ev.time !== undefined) return `${ev.title}：${day} ${ev.time}（当日时段）`
  return `${ev.title}：${day} 全天`
}
</script>

<template>
  <div style="max-width: 720px">
    <BizCalendarBoard :events="events" @event-click="(ev: BizCalendarEvent) => (picked = describe(ev))" />
    <p style="margin: 10px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      {{ picked }}
    </p>
    <p style="margin: 6px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击事件条预览其 .ics VEVENT 换算口径；配合导出按钮即可「先看再导」。
    </p>
  </div>
</template>

Props

属性名	类型	默认值	说明
model-value / v-model	`string \| Date`	—	选中日期；update 始终返回当日 0 点的 Date
mode / v-model:mode	`'month' \| 'week'`	`'month'`	展示模式（月网格 / 周横排）
first-day-of-week	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	周起始日（0 周日）
disable-past	`boolean`	`true`	当天之前不允许修改（禁用且不触发事件）
min-date	`string \| Date`	—	可交互最早日期（含当天）
max-date	`string \| Date`	—	可交互最晚日期（含当天）
disabled-date	`(date: Date) => boolean`	—	自定义禁用函数，返回 true 禁用
marks	`BizCalendarBoardMark[]`	`[]`	单元格标记（默认内容渲染色点 + 文案，可被 #cell 接管）
events	`BizCalendarEvent[]`	`[]`	日程事件列表：传入后单元格默认渲染事件条（时间 + 标题 + 语义色，allDay 描边形态），跨天事件按 `date ~ end` 区间每日铺满；`#cell` 插槽仍可完全接管
event-limit	`number`	`3`	每格最多渲染的事件条数，超出折叠为「+N 项」（点击外抛 event-more）
selectable	`boolean`	`true`	点击单元格是否更新 v-model 选中态；纯展示置 false
highlight-weekend	`boolean`	`false`	高亮周末（表头与单元格日期）
show-mode-switch	`boolean`	`true`	展示月/周切换按钮组
show-today	`boolean`	`true`	展示「今天」回跳按钮（已在当前面板时置灰）
month-cell-height	`number`	`96`	月模式单元格高度 px
week-cell-height	`number`	`220`	周模式单元格高度 px

BizCalendarBoardMark：{ date: string \| Date, type?: 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info', text?: string }。 BizCalendarEvent：{ id, title, date, end?, type?, time?, allDay?, meta? }——end 晚于 date 即跨天事件（区间每日渲染）；time 为 '09:00-10:30' 类展示文案；meta 随事件点击原样带出。禁用判定：disable-past（今天 0 点前）、min-date、max-date、disabled-date 任一命中即禁用；禁用单元格不响应点击（无 hover、无事件）。

Events

事件名	参数	说明
update:model-value	`(value: Date)`	选中日期变化（当日 0 点）
update:mode	`(mode: 'month' \| 'week')`	月/周模式切换
cell-click	`(cell: BizCalendarBoardCell)`	启用单元格点击（禁用单元格不触发）
event-click	`(event: BizCalendarEvent)`	日程事件条点击（已阻止冒泡，不触发单元格选中）
event-more	`({ date, key, events })`	某日事件超出 event-limit，点击「+N 项」查看当日全部事件
view-change	`(payload: BizCalendarBoardViewChange)`	视图切换：`{ viewDate, mode, source }`；source 为 prev / next / today / go-to / mode / select / prop

BizCalendarBoardCell：{ date, key, year, month, day, weekDay, weekDayText, inPanel, isToday, isSelected, disabled, past, weekend, mark, events }——key 为 'YYYY-MM-DD'，可直接作业务数据 Map 的 key；events 为当日事件列表（含跨天铺满条目）。

Slots

插槽名	说明
header	`{ title, mode, viewDate }` 标题区整体替换（默认渲染「YYYY年M月 / YYYY年第N周」）
header-extra	操作区追加内容（位于模式切换与翻页按钮之前）
cell	`{ ...BizCalendarBoardCell }` 单元格内容，完全自定义；缺省渲染 mark 色点 + 文案

Expose

属性/方法	说明
switchPrev	切换到上一月 / 上一周
switchNext	切换到下一月 / 下一周
switchToday	回跳到今天所在月 / 周
goTo	`(date: string \| Date) => boolean` 跳转到指定日期所在面板
setMode	`(mode: 'month' \| 'week') => void` 切换展示模式
getViewRange	`() => { start: Date; end: Date }` 当前面板起止日期（当日 0 点）
exportIcs	`(options?: { filename?: string }) => number` 导出标准 .ics 日历文件（跨天 / 全天 / time 时段及跨零点口径换算，UID 稳定去重），返回导出条数；Outlook / 系统日历 / 企业微信可直接导入

BizCalendarBoard 日期排版 ​

基础用法 ​

周模式排班 ​

考勤月历（只读 + 周末高亮） ​

场地预约（范围与自定义禁用） ​

外部控制与实例方法 ​

营销日历（完全自定义单元格） ​

日程事件（基础） ​

日程事件（溢出折叠） ​

日程事件（跨天 / 全天排期） ​

日程事件（新建与查看联动） ​

日程导出 .ics ​

按视图范围导出 ​

导出口径预览（事件粒度） ​

Props ​

Events ​

Slots ​

Expose ​