做网站帮外国人淘宝,网站搭建工具视频,网络营销方式使用情况数据,page和wordpress背景
有一些应用系统或应用功能#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件#xff0c;但功能比较简单#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示#xff0c;以及互动操作如通过点击添加事件#xff0…
背景
有一些应用系统或应用功能如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件但功能比较简单用来做数据展现勉强可用。但如果需要进行复杂的数据展示以及互动操作如通过点击添加事件则需要做大量的二次开发。FullCalendar是一款备受欢迎的开源日历组件以其强大的功能而著称。其基础功能不仅免费且开源为开发者提供了极大的便利仅有少量高级功能需要收费。然而尽管该组件功能卓越其文档却相对简洁导致在集成过程中需要开发者自行摸索与探索这无疑增加了不少学习和验证的时间成本。为此本专栏通过日程管理系统的真实案例手把手带你了解该组件的属性和功能通过需求导向的方式详细阐述FullCalendar组件的集成思路和实用解决方案。在介绍过程中我们将重点关注集成要点和注意事项力求帮助开发者在集成过程中少走弯路提供有效的避坑指南从而提升开发效率更好地利用这款优秀的日历组件。
官网https://fullcalendar.io/环境Vue3Element PlusFullCalendar 6.1.11。
使用 拖放日历组件外元素至日志组件内一 业务场景
先来说下需求。我们通过日历组件来安排日程主要是安排那些有相对明确的时间的事项。但实际还存在一些事项比如临时的刚想起或刚产生的不紧急甚至需要完成一些前置依赖。安排到哪个时间点尚不确定。这种场景下需要一个收集箱来暂存这些任务用于提醒防止遗忘而遗漏。如上所述将任务状态标记为“待安排”并将其起止时间值为空。安排计划时再根据实际情况把这些事项放到具体的计划中。
功能设计
对于上述需求我们在当前日历组件之外增加收集箱的功能用于存放和显示“待安排”的任务如下图所示这样用户不需要切换到别的菜单来新建待安排的事项并且在安排计划时候也可以将待安排的事项一并考虑。虽然用户可以在收集箱中的任务清单中点击某项任务设置起止时间通过刷新日历组件来显示但是操作较繁琐。为了便于操作我们来实现“拖放”操作即将左侧收集箱中的任务直接拖放到日历组件中根据放置的位置自动设置起止时间这样做更方便与直观。即我们需要将一个FullCalendar日历组件外的元素拖放到日历组件内部。
尝试方案
官网说明文档有相关描述但是过于简略需要摸索。首先需要配置属性将拖放功能开关打开
// 启用拖动外部元素放置到日历
droppable: true然后定义拖放结束的回调事件drop注意不是前面用过的eventDrop如下
//外部元素拖放到日历中
drop: this.drop,接下来最关键的操作就是外部元素拖拽到日历组件内部了。官网描述的使用draggable说的很含糊这个draggable到底指啥并不明确。一开始尝试使用自己熟悉的vuedraggable组件来实现拖拽功能然后测试失败drop回调事件触发不了怀疑被vuedraggable自己截获和处理了。然后使用html5自身的draggable同样发现无法触发回调事件。 应用系统
名称遇见地址https://meet.popsoft.tech说明基于一二三应用开发平台和FullCalendar日历组件实现的面向个人的时间管理、任务管理系统1分钟注册完整功能欢迎使用~
