插件介绍

这是一个功能完整的日历管理模块，专为后台管理系统设计。组件采用 Vue-Cal 作为核心日历引擎，在其基础上扩展了主题系统、事件管理、响应式布局等功能。

设计目标

• 提供直观的日历视图和事件管理界面
• 支持多种主题风格，适应不同的设计需求
• 响应式设计，兼容桌面端和移动端
• 完整的 CRUD 操作，支持拖拽和调整大小
• 国际化支持，多语言切换

计划功能

• 全天事件
• 数据统计
• 多日事件

功能特性

📅 多视图支持

• 月视图：概览模式，显示整月事件分布
• 周视图：详细周计划，支持拖拽操作
• 日视图：单日详情，精确时间管理
• 多日视图：自定义天数范围显示

🎨 主题系统

• 8个预设主题：

  • 默认主题（蓝色）
  • 清新绿色
  • 优雅紫色
  • 活力橙色
  • 简约灰色
  • 温暖暖色
  • 青蓝海洋
  • 玫瑰粉色

• 自定义主题：

  • 支持亮色/暗色模式切换
  • 10+ 颜色配置项
  • 实时预览效果
  • 本地存储配置

📝 事件管理

• 创建事件：点击空白单元格或拖拽创建
• 编辑事件：点击事件弹出编辑对话框
• 删除事件：长按事件显示删除确认
• 拖拽移动：支持跨日期拖拽（月视图除外）
• 调整大小：拖拽事件边缘调整时长
• 颜色标记：自定义事件背景色和文字色

🔧 交互特性

• 智能拖拽：月视图禁用拖拽，其他视图完全支持
• 时间修正：月视图拖拽自动保持原始时分
• 事件快照：拖拽过程中保护原始数据
• 防重复提交：避免并发操作导致的数据异常
• 实时刷新：操作完成后自动更新视图

📱 响应式设计

• 桌面端：侧边栏布局，主题设置面板
• 移动端：抽屉模式，全屏主题选择
• 自适应高度：根据屏幕尺寸动态调整
• 触摸优化：移动设备手势支持

注意事项

使用限制

• 月视图拖拽：月视图不支持拖拽操作，仅支持点击创建
• 时间格式：事件时间必须为标准日期时间格式
• 事件ID：每个事件必须有唯一的ID标识
• 颜色格式：颜色值必须为有效的十六进制格式

兼容性要求

• Vue版本：需要 Vue 3.5+
• 浏览器支持：现代浏览器，IE不支持
• 移动端：iOS 12+, Android 8+
• 屏幕分辨率：最小宽度 320px