如何向日历中添加日程

1.获取所有日程

const getAllSchedules = async () => {let res = await axios.get("calendar/get");state.schedules = res.data;
};

2.计算属性同步更新日程

const getSchedules = computed(() => {return function (data) {let theDay = [];state.schedules.find((item) => {if (item.date === data.day) {theDay.push(item);}});return theDay;};
});

3.通过popover插入日历

<el-calendar v-model="state.value"><template #dateCell="{ data }"><el-popoverplacement="top-start"trigger="hover"v-if="getOneSchedule(data).length"width="auto"><li v-for="item in getOneSchedule(data)"><span>{{ item.event }}</span><span v-if="item.completed" style="margin-left: 8px">—{{ item.completed }}%</span></li><template #reference><div class="hasSchedule">{{ data.day.split("-").slice(2).join("") }}</div></template></el-popover><div v-else>{{ data.day.split("-").slice(2).join("") }}</div></template></el-calendar>

4.伪元素显示有日程的日期

.hasSchedule::before {content: "";position: absolute;width: 18px;height: 2px;background: #409eff;margin-top: 36px;margin-left: 0;
}

5.最终效果及完整代码如下

<script setup>
import axios from "axios";
import { computed, onMounted, reactive } from "vue";const state = reactive({schedules: [],
});onMounted(async () => {getAllSchedules();
});const getAllSchedules = async () => {let res = await axios.get("calendar/get");state.schedules = res.data;
};const getOneSchedule = computed(() => {return function (data) {let theDay = [];state.schedules.find((item) => {if (item.date === data.day) {theDay.push(item);}});return theDay;};
});
</script><template><el-calendar v-model="state.value"><template #dateCell="{ data }"><el-popoverplacement="top-start"trigger="hover"v-if="getOneSchedule(data).length"width="auto"><li v-for="item in getOneSchedule(data)"><span>{{ item.event }}</span><span v-if="item.completed" style="margin-left: 8px">—{{ item.completed }}%</span></li><template #reference><div class="hasSchedule">{{ data.day.split("-").slice(2).join("") }}</div></template></el-popover><div v-else>{{ data.day.split("-").slice(2).join("") }}</div></template></el-calendar>
</template><style scoped lang="scss">
.el-calendar {--el-calendar-header-border-bottom: transparent;:deep(.el-calendar__header) {flex-direction: column;height: 56px;padding: 0;}:deep(.el-calendar__body) {padding: 0;.el-calendar-day {height: 56px;div {height: 100%;width: 100%;line-height: 40px;}.hasSchedule::before {content: "";position: absolute;width: 18px;height: 2px;background: #409eff;margin-top: 36px;margin-left: 0;}}}
}
</style>

如何向日历中添加日程相关推荐

为什么苹果日历不能设置日程_iPhone 小技巧：在“日历”中添加日程和设置提醒_iPhone技巧...
详细介绍不须要借助其它第三方软件,您可以在 iPhone 自带的"日历"App 中创立和编纂日程.添加出行事项或工作会议等,并设置提示以避免自己忘却. 添加日程: 打开" ...
android 添加日程失败,Android向系统日历中添加日程事件
总结在项目开发中,我们有预约提醒.定时提醒需求时,可以使用系统日历来辅助提醒: 通过向系统日历中写入事件.设置提醒方式(闹钟),实现到时间自动提醒的功能: 好处:由于提醒功能是交付给系统日历来做,不 ...
Android向系统日历中添加日程事件
总结在项目开发中,我们有预约提醒.定时提醒需求时,可以使用系统日历来辅助提醒: 通过向系统日历中写入事件.设置提醒方式(闹钟),实现到时间自动提醒的功能: 好处:由于提醒功能是交付给系统日历来做,不 ...
Android 在系统日历中添加日程
在项目开发过程中,有时会有预约提醒.定时提醒等需求,这时我们可以使用系统日历来辅助提醒.通过向系统日历中写入事件.设置提醒方式(闹钟),实现到达某个特定的时间自动提醒的功能.这样做的好处是由于提醒功能 ...
无法同步谷歌日历_苹果日历不能添加日程提醒怎么办？云提醒软件为你罗列待办事项...
苹果手机上可用来记录日程提醒的软件有提醒事项.备忘录和日历提醒,使用苹果手机的群体会根据个人的喜好选择桌面工具提醒,但是从相关的手机论坛中,网友提出的问题来看,不少人的日历添加日程提醒的按钮呈灰色显示 ...
android 日历事件添加日程
android 日历事件添加日程最近公司项目测出bug-----问题是小米和华为手机如果锁屏或者杀死APP 闹钟服务不会有反应...就是恩死了-这就很尴尬了-问了下好几个群的群友..都说小 ...
如何发布日历提醒推送消息服务器,iOS开发 -- 通过app向手机自带的日历中添加事件提醒...
在如今实际开发中,我们会有一种需求---通过自己的app往系统自带的日历中添加提醒事件. 一: 首先上最后效果图: WechatIMG7.jpeg 下图是关于添加事件的详情 WechatIMG8.jp ...
【安卓开发】Android初级开发(十二)Android向系统日历中添加事件
1.首先需要获取权限 <uses-permission android:name="android.permission.READ_CALENDAR" /><us ...
html的日历中添加行程,HTML/CSS元素定位（html日程表/日历）
我创建了一个基于html和css的时间表/日历,但我遇到了一些问题.HTML/CSS元素定位(html日程表/日历) 什么,我想是能够有任何的"块",如"块A" ...

如何向日历中添加日程

1.获取所有日程

2.计算属性同步更新日程

3.通过popover插入日历

4.伪元素显示有日程的日期

5.最终效果及完整代码如下

如何向日历中添加日程相关推荐

最新文章

热门文章