【仅记录】纯前端-手撸一个日程组件--基于svelte

一、需求

想做一个类似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、点击小日历后获取点击那一周的日期

参考1：【js】获取当前一周的日期 - 掘金

 这里我做的从周日到周六为一周，所以和参考的不大一样，改了一下。

思路：

  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】修改后的样子~

无日程：

有日程：