app端custom-item插槽需用单根元素包裹、禁用v-for、通过item.date逐日判断，事项图标动态叠加需预存eventmap映射表，系统日历写入须调用原生插件并处理跨端权限。
uni-calendar 的 custom-item 插槽怎么用才不白屏
小程序和 H5 能正常渲染 custom-item，但 App 端（尤其 iOS）容易因插槽内容结构不规范直接不显示——不是逻辑错，是渲染层拦截。关键点在于：插槽内不能用 v-for 直接遍历日期数组，必须靠 item 参数逐个判断；且所有子节点需包裹在单个根元素里（比如 <view></view>），不能写成多个并列 <text></text><view></view>。
常见错误写法：
<template v-slot:custom-item="{ item }"><text>{{ item.date }}</text><view class="dot" v-if="isSigned(item.date)"></view></template>
正确写法（加一层包裹 + 用 computed 格式化）：
<template v-slot:custom-item="{ item }"><view class="day-cell"><view class="date-text">{{ item.date.getDate() }}</view><view v-if="isSigned(item.date)" class="sign-dot"></view></view></template>
-
item.date是Date对象，别直接toString()，用item.date.toISOString().split('T')[0]转成YYYY-MM-DD再比对后端返回的签到数组 - App 端点击失效？统一用
@click，别信@tap，并在外层加catchtouchmove防穿透 - 插槽里禁止访问
this.$refs或调用uni.createSelectorQuery，这些在 App 端不可用
事项提醒图标和状态怎么动态叠加到日格上
uni-calendar 不提供「事项气泡」能力，得自己拼：把后端返回的事项列表（如 [{ date: '2026-06-18', type: 'meeting' }, { date: '2026-06-20', type: 'reminder' }]）映射到每个 item 上，再决定渲染什么。
核心逻辑在 isSigned() 和 getEventBadge() 这两个方法里：
- 先过滤出当前月的事项：
const monthEvents = events.filter(e => e.date.startsWith(`${year}-${String(month).padStart(2,'0')}`)) - 再查
item.date是否匹配：const todayStr = item.date.toISOString().split('T')[0]，然后monthEvents.some(e => e.date === todayStr) - 类型不同，图标不同：type 为
meeting渲染蓝色小圆点，reminder渲染橙色铃铛 SVG（建议用 base64 内联，避免 App 端资源路径解析失败）
注意：不要在插槽里发请求，事项数据必须提前拉好、缓存到页面 data 或 pinia store 中；否则滚动时反复触发，卡顿明显。
怎么让提醒事项可点击并跳转详情页
日格本身没绑定事件参数，custom-item 插槽里的 @click 只能拿到 item，但 item 不带事项 ID。解决方案是：在页面 data 里预存一个映射表 eventMap，key 是 YYYY-MM-DD，value 是该日所有事项数组。
示例：
data() {
return {
eventMap: {}
}
},
mounted() {
// 假设 this.rawEvents 是后端返回的原始事项列表
this.eventMap = this.rawEvents.reduce((map, evt) => {
const dateKey = evt.date.split('T')[0]
map[dateKey] = map[dateKey] || []
map[dateKey].push(evt)
return map
}, {})
}
插槽内点击处理：
<view> ... </view>
methods: {
onDayClick(item) {
const key = item.date.toISOString().split('T')[0]
const events = this.eventMap[key] || []
if (events.length === 1) {
uni.navigateTo({ url: `/pages/event/detail?id=${events[0].id}` })
} else if (events.length > 1) {
uni.showActionSheet({ itemList: events.map(e => e.title) })
}
}
}
跨端兼容要点：H5 支持 uni.navigateTo，但 App 端若未配置对应页面路由会白屏，务必检查 pages.json 是否已注册目标页面；小程序则需确认路径是否带 pages/ 前缀。
iOS 和 Android 日历权限与提醒写入的坑
事项提醒 ≠ 日历 UI 显示，它是系统级操作，必须走原生权限和 API。uni-app 官方插件 uni-calendar 只负责展示，不处理系统日历写入。要真正在手机日历中插入事件并设置提醒，得用插件市场 ID 5203（iOS/Android 通用）或 540（仅展示）。
- 调用前必须先检测权限：
uni.getSystemInfoSync().platform === 'ios' ? 'calendar' : 'android.permission.READ_CALENDAR'，iOS 还要额外申请calendar，Android 需READ_CALENDAR和WRITE_CALENDAR - 用户拒绝后，下次再调
uni.authorize无效，得跳系统设置页：uni.openSetting()，且 iOS 必须在info.plist里声明NSCalendarsUsageDescription - 插入事件时，iOS 要求
startDate和endDate都是Date实例，Android 接受字符串但推荐统一转成时间戳，避免时区错乱
真正容易被忽略的是：提醒触发时间（alarm）在 iOS 上最多支持 1 个，Android 支持多个，但插件封装层通常只暴露第一个 —— 如果业务需要「提前 1 天 + 提前 1 小时」双提醒，得自己拆成两次调用或换原生模块。
