日程事件管理日历应用（纯前端实现 可直接使用）

日程管理、事件进度把控，支持导出为Excel的实用工具应用。

可用于项目进度管理，个人日程和事件管理，也可以作为代码逻辑的参考哈。

核心技术栈为JS和Html，基于豆包“应用生成”功能生成。

可直接在浏览器中使用应用或复制应用代码，也可参考下附的提示词按需生成自己想要的代码。

先来看看实现效果

是不是美美哒~

日历应用功能

1. 日程事件的添加、编辑、删除、查看、搜索。
2. 展示日程事件的截止倒计时，方便进度把控。
3. 日程事件可跨天、跨月添加，短周期或长周期事件均可管理。
4. 支持将日程事件导出为Excel文档，方便分享和留存。
5. 多种主题风格切换，适配不同的场合和心情。
6. 轻量化数据管理，浏览器中可直接使用，支持历史日程事件的自动清空。

使用方式

下面两种方法，都可以直接获取到日历应用并在浏览器中使用，全部代码也可以在窗口里面看到。

方法一：  可直接访问应用地址，直达豆包平台内日历应用，点击“创作同款”。
https://www.doubao.com/code/launch/detail/131006186242

方法二：也可以先访问豆包的应用生成门户页面 https://www.doubao.com/code/chat
             点击左侧导航中的“创作广场”
             在创作广场右上角搜索框中搜索：日程事件管理——炫彩多主题日历（含倒计时功能）

             点击“创作同款”

想了解生成提示词的小伙伴

应用内没有对提示词的展示，我这边直接附上核心提示词，方便大家了解设计思路和提示词技巧，拿去用！

# 生成一个可添加任务的日历(html网页)。
## 日历核心功能
1. 可以添加事件并填写事件的相关信息，用户通过日历查看、搜索自己的事件，方便用户日程管理和进度管控。
2. 每个事件都有四个状态，每个状态对应不同的颜色，用户可以自行修改状态。未开始（灰色），进行中（蓝色），已完成（绿色），已逾期（红色）。

## 视觉设计
- 使用圆角风格，偏可爱，现代。
- 按钮在圆角的基础上加入内阴影显得更立体有光泽度，像是晶莹剔透的“果冻按钮”。
- 页面内的文字和主要颜色的配色方案有六种，需要自动根据用户当前选择的背景图的主色调自动选取合适的主要颜色的配色方案。六种配色方案如下：
1. 当背景图的主色调为蓝色
文字颜色：白色（#ffffff）
按钮颜色：橙色（#e67e22） 
辅助颜色：浅蓝色（#aed6f1）用于悬停效果、高亮、边框等。
2. 当背景图的主色调为橘色或咖色
文字颜色：白色（#ffffff）
按钮颜色：蓝色（#2980b9） 
辅助颜色：深橘色（#e67e22）用于悬停效果、高亮、边框等。
3. 当背景图的主色调为粉色
文字颜色：白色（#ffffff） 
按钮颜色：深粉色（#c44569） 
辅助颜色：浅粉色（#fd79a8）用于悬停效果、高亮、边框等。
4. 当背景图的主色调为绿色
文字颜色：白色（#ffffff） 
按钮颜色：红色或粉色（#e74c3c） 
辅助颜色：浅绿色（#58d68d）用于悬停效果、高亮、边框等。
5. 当背景图的主色调为黑色
文字颜色：白色（#ffffff） 
按钮颜色：金色（#f1c40f） 
辅助颜色：灰色（#7f8c8d）用于悬停效果、高亮、边框等。
6. 当背景图的主色调为紫色
文字颜色：白色（#ffffff）
按钮颜色：琥珀色（#e67e22）-
辅助颜色：浅紫色（#a29bfe）用于悬停效果、高亮、边框等。
- 页面最底部整体的背景图有10种，就是附件中上传的10张参考图，用户可以在日历的“基本设置”中切换背景图（该功能叫“主题”）。背景图切换后，页面中的文字和主要颜色的配色方案随之切换为当前背景图适配的配色方案。

## 页面整体布局与主要样式
- 页面的最底层展示的是用户当前选择的主题对应的背景图，整张背景图上有一层遮罩，将整个页面内的背景效果做成半透明的毛玻璃效果。
- 页面的左上角有一个icon，点击这个icon，会展开或关闭页面左侧的抽屉。当左侧抽屉展开时，这个icon出现在左侧抽屉的右上角作为左侧抽屉的关闭按钮。当左侧抽屉关闭时，这个icon就在页面左上角。这个左侧抽屉里面的内容就是日历的“基本设置”区域。
- 页面的中心区域是日历，每次展示一个月，每一天在日历中是一个小方框，小方框的边框为3px。小方框的左上角显示日期，当鼠标移入小方框时，小方框的右上角会出现一个“+”号（+号底色为当前配色方案中最醒目的颜色），点击“+”号会打开“添加事件”弹窗。
- 页面中心区域的底部有一个“事件搜索”按钮，点击“事件搜索”按钮会展开“事件搜索弹窗”。
- 页面右侧也有一个抽屉，右侧抽屉初始时默认展开，可以通过点击叉号关闭。当点击中心区域的日历中的某一天的小方框时，右侧抽屉内会展示当天的事件，初始时默认展示今天的事件。

## 具体每个模块的内容和功能
**左侧抽屉内展示的基本设置区：**
1. 标题展示为“时间都去哪了”，鼠标悬停在标题文字上时，标题文字的右侧10px处会出现一个“笔”的图标，点击“笔”可以将原本展示标题文本的地方变为输入框，用户可以在输入框中修改标题，修改完毕后敲击回车键新标题就会保存。（输入框不用太长，能展示下8个字就可以了，因为标题最多8个字）
2. 主题：执行主题切换功能（切换主题时，会切换背景图以及和背景图搭配的配色方案）。
3. 按钮-导出当前月份事件：将当前展示的当前月份的日历导出为Excel。
4. 按钮-清空当前月份事件。点击后会有2次确认弹窗，“您确定要清空x年x月的所有事件吗？”
5. 按钮-清空所有事件。点击后会有2次确认弹窗，“您确定要清空应用内所有事件吗？”
6. 开关-历史事件自动清理，默认开启，也可以关闭，鼠标移入展示手型。开关旁边有一个问号，鼠标移入问号后会展示tooltip，内容是“本应用使用当前浏览器关联的存储区存储事件，为了优化存储并提高性能，建议开启自动清理，清理已逾期或已完成52天以上的事件。（换行）您可以提前导出想要长期留档的事件。”底部还有一行提示文字“请注意，不论是否开启自动清理，若您在浏览器设置中操作选择“清除cookie及其他网站数据”，浏览器会一并清理存储的所有事件数据。”

**中心区域展示区-日历：**
1. 顶部展示当前月份，支持月份切换。
2. 中央区域是日历（纵向居中），每次展示一个月，每一天在日历中是一个小方框。在小方框中，每个事件对应一个小圆圈，小圆圈的颜色根据当天事件的状态添加，小圆圈的半径根据单一状态的事件数量设置。（比如今天有6件事，1件未开始，2件进行中，1件已逾期，2件已完成，那么今天的格子中就有四个圆圈，颜色分别对应四种状态，其中代表进行中和已完成的圆圈半径要比已逾期和未开始的圆圈半径大）鼠标移入圆圈，会展示事件类型和数量的标签提示。（比如进行中：2）
3. 用户在添加了事件后，需要根据事件的开始时间和结束时间自动计算每天有哪些事件，并展示在日历内的对应日期的小方框中。（比如用户设置了一个事件A，开始时间是1日（不论是1日内的几点），结束时间是3日（不论是3日内的几点），那么在1日、2日、3日的小格子中每天的事件内都会有事件A）
4. 底部有一个“事件搜索”按钮，点击“事件搜索”按钮会展开“事件搜索弹窗”。

**事件搜索弹窗：**
1. 第1行展示搜索的输入框。（可以输入事件的名称进行模糊查询）
2. 第2行展示事件状态的多选项（弹窗打开的初始时默认全选）。其中每种事件状态都是一个带有圆角的长方形。在未被选择的时候，是一个镂空的长方形，灰色边框白色文字。当被选中时，长方形的背景换为每种状态对应的颜色，文字变为白色。
3. 第3行展示要搜索事件的日期范围，横向展示两个日期时间选框。（弹窗打开的初始时默认搜索范围就是当前日历所在的月份）
4. 第4行居中展示“搜索”按钮，点击按钮后，按钮下方出现搜索出来的事件列表。
5. 当变更任意一项搜索项时，弹窗内如果已经进行过搜素（即弹窗底部已经展示了搜索出来的事件列表或已经展示了提示“没有找到匹配的事件”），要将底部的事件列表或提示去除，直到用户再次点击“搜索”按钮时，才再次进行搜索并将新的搜索结果展示在弹窗底部。
6. 点击搜素出来的事件列表中的事件，会打开对应事件的“编辑事件”弹窗。

**添加事件或编辑事件弹窗：**
1. 名称： 输入框，填写事件名称，限制20字以内。
2. 状态： 单选，可以选择事件的几种状态。（添加事件弹窗中不能直接添加状态为已完成或已逾期的事件，编辑事件弹窗中，当事件的状态为已逾期时，不能修改事件状态）
3. 开始时间，日期时间选框，展示格式为年-月-日 时:分:秒。(添加事件时初始时间为当前日期的早上8:00)。日期时间的下拉面板中为24小时制。（编辑事件弹窗中，当事件的状态为已逾期时，不能修改开始时间）
4. 结束时间，日期时间选框，展示格式为年-月-日 时:分:秒。(添加事件时初始时间为当前日期20:00)。日期时间的下拉面板中为24小时制。（编辑事件弹窗中，当事件的状态为已逾期时，不能修改结束时间）
5. 描述： 输入框，事件的相关描述。
6. 距离截止还有x天X时X分: 纯展示文本，不可编辑。根据当前时间和事件的截止日期计算得出，每次事件的结束时间选中项更新后都要更新此处的文本展示。（已逾期事件展示红色文本“事件已逾期”，已完成事件展示绿色文本的当前时间作为完成时间：x年x月x日x时x分）
7. 最底部按钮，添加事件时为“保存”，编辑事件时为“更新”。

**右侧抽屉内展示的当天事件：**
1. 初始时默认展示今天的事件。
2. 标题：x年X月X日（就是当前点击的日历中的小方框对应的日期）如果日期是今天，就在x年x月x日后面增加一个带有动效的圆角的长方形小标识（底色为当前配色方案中最醒目的颜色），里面写上文本“今天”。
3. 当天的事件以卡片的形式展示，每个事件是一张卡片。卡片内的第1行，右对齐展示事件的状态标识（状态标识的背景色按照状态区分颜色，icon按照状态区分，文字为白色）。卡片内的第2行和第3行展示事件名称，至多展示2行，若文字移溢出显示...。
4. 若右侧抽屉内展示的是今天的事件，那么在距离当前时间48小时内要截止的事件，其卡片的外侧左上角要吸附一个水平标签，样式类似文件夹里面的分类（标签底色为当前配色方案中最醒目的颜色）。标签内展示当前事件距离截止还有多久，分别有“6小时内截止”，“12小时内截止”，“24小时内截止”，“48小时内截止”，4种文字展示。
5. 鼠标移入事件卡片时，卡片的左下角会出现一个删除的icon，点击icon会弹出删除的2次确认弹窗：“您确定要删除事件x吗？”
6. 事件卡片的排序是优先展示未开始和进行中的（按照截止日期倒序排列，最近截止的在最上面）。再下面展示已逾期的（最近逾期的在最上面），最下面展示已完成的（最近完成的在最上面）。