一、需求
想做一个类似outlook的展示日程的小组件如下图。
二、大致需要做的东西
1、横行展示的一周的星期数;
2、底部展示的事件内容(outlook这里最多可以展示出5条然后右侧出小翻页按钮,我做成滚动条形式)
3、下拉小三角可选择的小日历
4、“创建事件”的弹窗或者其他形式的加事件方式
三、开做!
1、日历外框
这里放个样式就好,颜色取色outlook,主打的就是一个仿制,用的TailwindCSS样式
.schedule {
@apply bg-[#F1FBFF] m-3 border-solid border-[1px] border-[#d8d8d8] rounded-2xl;
}
2、弹出小日历
整个样式应该都差不多,从网上找了手撸弹出小日历的,直接就可以用的那种,改的地方不太多,谢谢提供这个代码的老师!
参考: 【精选】手把手撸一个小而美的日历组件_前端日历组件_本仙女暂时不想取名的博客-CSDN博客
小日历弹出判断我改为了点击按钮后某个值的true/false来判断。
3、点击小日历后获取点击那一周的日期
这里我做的从周日到周六为一周,所以和参考的不大一样,改了一下。
思路:
let aweek = []
function clickDay(clickDay) {
console.log('点击小日历日期:', clickDay)
showCalendar = !showCalendar //关闭选择日期
getUniqueWeek(clickDay)
}
/**
* 获取点击日期的一周日期
* @param clickDay 格式为{year:2023,month:11,day:22,active:false}
*/
function getUniqueWeek(clickDay) {
let weekArr = []
for (var i = 0; i < 7; i++) {
let weekObj = {
name: weeks[i],
date: '',
timeStamp: '',
year: '',
month: '',
day: '',
active: false,//这里是因为要做点击变色判断,所以加了active这个属性,为true时背景展示蓝色,否则无色
}
weekArr.push(weekObj)
}
let clickDate = clickDay.year + '-' + clickDay.month + '-' + clickDay.day //'2023-11-22'
let myDate = new Date(Date.parse(clickDate))
let clickTimestamp = getStartTime(Number(myDate)) //时间戳 Timestamp
let weekend = myDate.getDay() //获取点击日期的星期,为0是星期日,1是星期一,以此类推...6是星期六
let leftNum = weekend
let rightNum = 7 - weekend
for (let left = 0; left < leftNum; left++) {
weekArr[left].timeStamp =
clickTimestamp - (weekend - left) * 1000 * 60 * 60 * 24
}
for (let right = 0; right < rightNum; right++) {
weekArr[right + weekend].timeStamp =
clickTimestamp + right * 1000 * 60 * 60 * 24
}
weekArr.map((el) => {
let formatTime = timestampToTime(el.timeStamp) //因为日程中是直接用的日期进行展示,所以这里方法的返回值特意分开了year、month、day
el.date = formatTime.y + '-' + formatTime.m + '-' + formatTime.d
el.year = formatTime.y
el.month = formatTime.m
el.day = formatTime.d
})
aweek = JSON.parse(JSON.stringify(weekArr))
}
// 获取当天0点的时间戳
function getStartTime(time) {
const nowTimeDate = new Date(time)
return nowTimeDate.setHours(0, 0, 0, 0)
}
// 时间戳转日期格式
function timestampToTime(timestamp) {
const dDate = new Date(timestamp)
const Y = dDate.getFullYear()
const M =
dDate.getMonth() + 1 < 10
? '0' + (dDate.getMonth() + 1)
: dDate.getMonth() + 1
const D = dDate.getDate()
return { y: Y, m: M, d: D }
}
5、添加日程底部和弹窗
底部有数据的时候大致样子如下图,这个就不用细说了不是很难,颜色直接取色outlook就可以;
点击“添加事件”:偷懒了一步,直接写成页面跳转,在跳转后的网址中进行添加,这边就只进行数据的查看了。
四、完成的粗糙样子
五、待完善
算是两天写出来的,还有超多细节地方需要改;
1、弹出小日历点击上个月30号这种的,不会自己切成上个月的,依旧还是这个月的。
2、很多样式小细节,比如选中日期后,背景的圆不够圆;日程内容的展示没有上下居中,并且鼠标放上去没有tooltip浮框。
3、待补充功能方面:这个日程只是简单的按天计算的。但是outlook上可以配置按具体小时时间展示;并且还有个距离你设置时间的倒计时;还会把距离你目前最近的倒计时的时间的那条内容变宽。不是现在这种一样的每条一样的高度......如果以后有时间可以再尝试加一下这些。
等等等等。
【2023-12-04】修改后的样子~
无日程:
有日程: