基于vue3+TypeScript实现一个简易的Calendar组件

来自：网络

时间：2024-06-10

阅读：

功能分析

目前学到功能有以下几点

日历的日期展示（核心组件，计算当月天数，第一天是星期几，以及上下月日期的连接）
切换月份联动日期修改
定位当前日期

功能实现

初始化

使用 vue 官网提供的命令即可 npm create vue@latest ,要把使用 ts 的选项勾选上，因为这里我们用到了 ts

组件分析

划分了两个组件 HeaderCom 和 CalendarMonth

HeaderCom 用于按钮切换日期展示，以及定位当前日期
CalendarMonth 用于日期的展示

两者的父组件为 CalendarCom组件

具体操作

安装 dayjs 日期库，这里使用 dayjs 提供的 api 来获取时间 npm i dayjs , 安装 sass 预处理器 npm i sass -D

我这里选择直接在 views 中新建了 Calendar 文件夹，所以后面说的 Calendar 文件夹都是对应 src/views/Calendar

Calendar / CalendarCom.vue

新建CalendarCom.vue，日历组件的整体，包含了上面所说的两个子组件，具体代码如下

<template>
  <div class="calendar">
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
@import './index.scss';
</style>

新建 Calendar / index.scss 样式文件引入样式

.calendar {
  width: 100%;
}

Calendar / CalendarMonth.vue

我们首先来实现在展示日期组件的功能吧，借个图来分析一下，这个组件分为星期、日期两个部分，首先来实现下星期的渲染

<template>
  <div class="calendar-month">
    <div class="calendar-month-week-list">
      <div v-for="(item, index) in weekList" :key="index" class="calendar-month-week-list-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
</script>

<style scoped>
@import './index.scss';
</style>

.calendar-month {
  &-week-list {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    &-item {
      padding: 20px 16px;
      text-align: left;
      color: #7d7d7d;
      flex: 1;
    }
  }
}

父组件引入该组件

<template>
  <div>
    <CalendarCom />
  </div>
</template>

<script setup lang="ts">
import CalendarCom from './Calendar/CalendarCom.vue'
</script>

<style scoped></style>

此时日期组件的顶部就渲染好了

接下来就是日期渲染了，日期渲染就是拿到第一天的日期，计算是星期几，然后把前面空余的数据填补成上个月的末尾日期，后面超出的数据填补成下个月月初日期

这个时候有小伙伴就会问，怎么获取第一天，又怎么获取前一个月的时间和后一个月的时间呢？别着急呀，这些功能 dayjs 都给我们提供好了方法了，当然用 Date 对象也可以获取这些

// test.js
import dayjs from 'dayjs'

console.log(dayjs('2024-04-29').daysInMonth()) // 30
console.log(dayjs('2024-04-29').startOf('month').format('YYYY-MM-DD')) // 2024-04-01
console.log(dayjs('2024-04-29').endOf('month').format('YYYY-MM-DD')) // 2024-04-30
console.log(dayjs('2024-04-29').startOf('month').day()) // 1  星期一

测试这些方法，我们知道2024年4月的天数，第一天是星期几，起始日期，结束日期
我们在CalendarMonth 组件中实现一个 getAllDay 的方法，返回一个日期数组，并且给 Calendar 组件添加一个 value 属性，传入一个初始时间，获取到要展示的日期后渲染到页面即可

<!-- HomeView -->
<template>
  <div>
    <CalendarCom :value="dayjs('2024-05-01')" />
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import CalendarCom from './Calendar/CalendarCom.vue'
</script>

<style scoped></style>

<!-- CalendarCom -->

<template>
  <div class="calendar">
    <CalendarMonth :value="props.value" />
  </div>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import CalendarMonth from './CalendarMonth.vue'

export interface CalendarProps {
  value: Dayjs
}

const props = defineProps<CalendarProps>()
</script>

<style scoped>
@import './index.scss';
</style>

<!-- CalendarMonth -->
<template>
  <div class="calendar-month">
    <!-- 星期列表 -->
    <div class="calendar-month-week-list">
      <div v-for="(item, index) in weekList" :key="index" class="calendar-month-week-list-item">
        {{ item }}
      </div>
    </div>

    <!-- 日期展示 -->
    <div class="calendar-month-body">
      <div class="calendar-month-body-row">
        <div
          :class="[
            'calendar-month-body-cell',
            item.currentMonth ? 'calendar-month-body-cell-current' : ''
          ]"
          v-for="(item, index) in alldays"
          :key="index"
        >
          {{ item.date.date() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import type { CalendarProps } from './CalendarCom.vue'
import { ref } from 'vue'

const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

interface CalendarMonthProps extends CalendarProps {}

const props = defineProps<CalendarMonthProps>()

const { value } = props

/**
 * 获取日期数据方法
 * @param date 传入日期
 */
const getAllDay = (date: Dayjs) => {
  const startDate = date.startOf('month')
  const day = startDate.day() // 当月第一天是星期几

  const daysInfo = new Array<{ date: Dayjs; currentMonth: boolean }>(6 * 7)

  for (let i = 0; i < day; i++) {
    daysInfo[i] = {
      date: startDate.subtract(day - i, 'day'), // 上个月末尾几天日期
      currentMonth: false // 是否为当月日期
    }
  }

  for (let i = day; i < daysInfo.length; i++) {
    const calcDate = startDate.add(i - day, 'day')

    daysInfo[i] = {
      date: calcDate,
      currentMonth: calcDate.month() === date.month()
    }
  }

  return daysInfo
}
const alldays = ref(getAllDay(value))
</script>

<style scoped>
@import './index.scss';
</style>

.calendar {
  width: 100%;
}

.calendar-month {
  &-week-list {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    &-item {
      padding: 20px 16px;
      text-align: left;
      color: #7d7d7d;
      flex: 1;
    }
  }
  &-body {
    &-row {
      display: flex;
      flex-wrap: wrap;
    }
    &-cell {
      width: calc(100% / 7);
      padding: 10px;
      height: 100px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      color: #ccc;
      &-current {
        color: #000;
      }
    }
  }
}

可以看到日期已经渲染出来了

Calendar / HeaderCom.vue

日期渲染出来后，需要有操作按钮切换月份，那这一部分放在了 HeaderCom 的组件中，让我们来实现一下

<template>
  <div class="calendar-header">
    <div class="calendar-header-left">
      <div class="calendar-header-icon"><</div>
      <div class="calendar-header-value">2024年4月</div>
      <div class="calendar-header-icon">></div>
      <button class="calendar-header-btn">今天</button>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
@import './index.scss';
</style>

.calendar-header {
  &-left {
    display: flex;
    align-items: center;
    height: 40px;
  }

  &-value {
    font-size: 16px;
  }

  &-icon {
    width: 28px;
    height: 28px;

    line-height: 28px;

    border-radius: 50%;
    text-align: center;
    font-size: 12px;

    user-select: none;
    cursor: pointer;

    margin-right: 12px;
    &:not(:first-child) {
      margin: 0 12px;
    }

    &:hover {
      background: #ccc;
    }
  }

  &-btn {
    background: #eee;
    cursor: pointer;
    border: 0;
    padding: 0 15px;
    line-height: 28px;

    &:hover {
      background: #ccc;
    }
  }
}

那么到这一步，我们接下来要做的就是点击按钮后通知 Calendar 组件切换对应月份并且在切换月份的同时让相应的日期对应上，那么具体实现是这样

<!-- HeaderCom -->
<!-- HeaderCom -->
<template>
  <div class="calendar-header">
    <div class="calendar-header-left">
      <div class="calendar-header-icon" @click="preMonthHandler">&lt;</div>
      <div class="calendar-header-value">{{ curMonth.format('YYYY 年 MM 月') }}</div>
      <div class="calendar-header-icon" @click="nextMonthHandler">&gt;</div>
      <button class="calendar-header-btn" @click="todayHandler">今天</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'

interface HeaderProps {
  curMonth: Dayjs
}

const props = defineProps<HeaderProps>()

const emit = defineEmits(['preMonth', 'nextMonth', 'today'])

// 切换上一个月
const preMonthHandler = () => {
  emit('preMonth')
}

// 切换下一个月
const nextMonthHandler = () => {
  emit('nextMonth')
}

// 点击按钮获取今天日期
const todayHandler = () => {
  emit('today')
}
</script>

<style scoped>
@import './index.scss';
</style>

<!-- CalendarCom -->

<template>
  <div class="calendar">
    <HeaderCom
      @preMonth="preMonthHandler"
      @nextMonth="nextMonthHandler"
      :curMonth="curMonth"
      @today="todayHandler"
    />
    <CalendarMonth :value="curValue" :curMonth="curMonth" @ClickCell="handleClickCell" />
  </div>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import CalendarMonth from './CalendarMonth.vue'
import HeaderCom from './HeaderCom.vue'
import { ref } from 'vue'
import dayjs from 'dayjs'

export interface CalendarProps {
  value: Dayjs
}

const props = defineProps<CalendarProps>()

let curValue = ref(props.value)
let curMonth = ref(props.value)

const preMonthHandler = () => {
  curMonth.value = curMonth.value.subtract(1, 'month')
}

const nextMonthHandler = () => {
  curMonth.value = curMonth.value.add(1, 'month')
}

const todayHandler = () => {
  const date = dayjs(Date.now())
  curMonth.value = date
  curValue.value = date
}

const handleClickCell = (date: Dayjs) => {
  curValue.value = date
}
</script>

<style scoped>
@import './index.scss';
</style>

<!-- CalendarMonth -->
<template>
  <div class="calendar-month">
    <!-- 星期列表 -->
    <div class="calendar-month-week-list">
      <div v-for="(item, index) in weekList" :key="index" class="calendar-month-week-list-item">
        {{ item }}
      </div>
    </div>

    <!-- 日期展示 -->
    <div class="calendar-month-body">
      <div class="calendar-month-body-row">
        <div
          :class="[
            'calendar-month-body-cell',
            item.currentMonth ? 'calendar-month-body-cell-current' : ''
          ]"
          v-for="(item, index) in alldays"
          :key="index"
          @click="handleClickCell(item.date)"
        >
          <div
            :class="
              value.format('YYYY-MM-DD') === item.date.format('YYYY-MM-DD')
                ? 'calendar-month-body-cell-selected'
                : ''
            "
          >
            {{ item.date.date() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import type { CalendarProps } from './CalendarCom.vue'
import { ref, watch } from 'vue'

const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

interface CalendarMonthProps extends CalendarProps {
  curMonth: Dayjs
}

const props = defineProps<CalendarMonthProps>()

/**
 * 获取日期数据方法
 * @param date 传入日期
 */
const getAllDay = (date: Dayjs) => {
  const startDate = date.startOf('month')
  const day = startDate.day() // 当月第一天是星期几

  const daysInfo = new Array<{ date: Dayjs; currentMonth: boolean }>(6 * 7)

  for (let i = 0; i < day; i++) {
    daysInfo[i] = {
      date: startDate.subtract(day - i, 'day'), // 上个月末尾几天日期
      currentMonth: false // 是否为当月日期
    }
  }

  for (let i = day; i < daysInfo.length; i++) {
    const calcDate = startDate.add(i - day, 'day')

    daysInfo[i] = {
      date: calcDate,
      currentMonth: calcDate.month() === date.month()
    }
  }

  return daysInfo
}

const alldays = ref(getAllDay(props.curMonth))

watch(
  () => props.curMonth,
  (newV) => {
    alldays.value = getAllDay(newV)
  }
)

const emit = defineEmits(['clickCell'])

const handleClickCell = (date: Dayjs) => {
  emit('clickCell', date)
}
</script>

<style scoped>
@import './index.scss';
</style>

.calendar {
  width: 100%;
}

.calendar-month {
  &-week-list {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    &-item {
      padding: 20px 16px;
      text-align: left;
      color: #7d7d7d;
      flex: 1;
    }
  }
  &-body {
    &-row {
      display: flex;
      flex-wrap: wrap;
    }
    &-cell {
      width: calc(100% / 7);
      padding: 10px;
      height: 100px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      color: #ccc;
      &-current {
        color: #000;
      }
      &-selected {
        background: blue;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
}

.calendar-header {
  &-left {
    display: flex;
    align-items: center;
    height: 40px;
  }

  &-value {
    font-size: 16px;
  }

  &-icon {
    width: 28px;
    height: 28px;

    line-height: 28px;

    border-radius: 50%;
    text-align: center;
    font-size: 12px;

    user-select: none;
    cursor: pointer;

    margin-right: 12px;
    &:not(:first-child) {
      margin: 0 12px;
    }

    &:hover {
      background: #ccc;
    }
  }

  &-btn {
    background: #eee;
    cursor: pointer;
    border: 0;
    padding: 0 15px;
    line-height: 28px;

    &:hover {
      background: #ccc;
    }
  }
}

最后实现的效果是这样

到这里，这个日历的主要核心功能差不多就实现了

小结

那么我们来回顾一下日历组件的一些核心的地方吧：

首先是日期的获取，这个要熟练使用dayjs库或者Date的api使用
其次就是对日期的计算，当月时间的判断，获取当月上下月时间的方法
切换月份重新渲染日期组件数据

总结

以上就是基于vue3+TypeScript实现一个简易的Calendar组件的详细内容，更多关于vue3 TypeScript实现Calendar组件的资料请关注其它相关文章！

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：佳岚可编辑表格在数栈产品中是一种

2024-08-08 21:54:40

JavaScript语言特性 - 类型转换JavaScript这门语言的类型系统从来没有它表面看起来的那样和善，虽然比起Java、C#等一众强类型语言，它的弱类型使用起来似乎是如此便利，但正因为

2024-06-12 11:51:29

目录前言一、为什么要自定义表列模版？二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用element-ui表格封装一个组件，有自定义表列格式的需求，做完后顺手总结一

2024-06-10 00:14:50

在前端开发中，src 属性指定的相对路径是相对于当前 HTML 文件的路径，而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。当浏览器解析 HTML 文件中的 <script

2024-06-10 00:14:48

目录介绍一、实现原理二、代码(vue3 setup)三、演示：四、结束介绍本前端仔在做页面跳转的时候，被要求跳转到页面时候，把对应部分的内容自动滚动到顶部~我一开始想到的就是根据

2024-06-10 00:14:46

目录功能分析功能实现初始化组件分析具体操作Calendar / CalendarCom.vueCalendar / CalendarMonth.vueCalendar / HeaderCom.vue小结总结功能分析目前学到功能有以下几点日

2024-06-10 00:14:43

目录一、打包vue3项目1、打包2、解决打包后的文件的白屏问题。二、打包成apk1、创建“5+App”项目2、打包文件移动3、生成apk文件三、生成apk附：vue项目打包时报错

2024-06-10 00:14:40

Vue路由懒加载是一种优化技术，旨在减少应用程序的初始加载时间并提高性能。具体来说，它允许我们在用户实际需要访问某个路由时，才加载对应的组件代码，而不是在应用程序启动时一

2024-06-10 00:14:37

目录前言一、插件安装二、数据准备三、插件引入四、导出前数据处理1、按exceljs格式创建导出函数2、表头及列宽数据预处理2.1 处理逻辑3、单元格样式处理函数4、表头数据填

2024-06-10 00:14:35

目录背景1. 监听文件选择2. 捕获视频帧3. 绘制视频帧4. 实现效果结论背景在网页开发中，我们经常需要对媒体文件进行处理，其中包括视频文件。有时候，我们可能需要从视频中提取特

2024-06-10 00:14:33

一、在项目中安装mysql 和 expresscnpm install mysql express --save二、示例代码const express = require("express"); const app = express(); const mysql = require("m

2024-06-10 00:14:31

目录1.问题描述1.1使用npm install后报错2.解决问题过程2.1看网上大部分的解决方式是：2.2网上还有部分的解决方式是：2.2.1如果你不幸的按照网上使用npm uninstall -g npm升级

2024-06-10 00:14:29

目录一、什么是跨域？二、跨域解决方案方案一：jsonp （json with padding）方案二：CORS (CROSS-Origin Resource Sharing 跨域资源共享)和跨域CORS有关的几个请求头和响应头请求头

2024-06-10 00:14:25

目录一、什么叫懒加载二、懒加载的优点三、为什么使用懒加载懒加载原理是什么四、vue中如何实现懒加载五、js---懒加载的实现步骤？懒加载代码实现方式一：原生js方式二： getB

2024-06-10 00:14:22

目录引言解决方案一、使用整数进行计算二、使用库函数三、四舍五入优缺点分析1、整数计算方法2、使用库函数方法3、四舍五入方法结论引言在 JavaScript 中，处理浮点数时经常

2024-06-10 00:14:18

目录一、水印概括1. 添加水印的好处2. 添加水印的坏处二、技术方案1. watermark 第三方库2. JS 简单实现水印功能三、水印功能实现1. 水印功能需求2. 功能实现3. 步骤解析3.

2024-06-10 00:14:16

目录前言StatusBar高度TitleBar高度编写Navbar组件使用最终效果前言自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难，只需要了解其组成部分即可。从上面的图

2024-06-10 00:14:13

目录axios 的 2 种使用方式请求方法别名Axios 类Axios.prototype.request()axios.defaults/interceptors请求方法别名导出 axios如果直接导出 Axios总结本文我们将讨论 axio

2024-06-10 00:14:11

目录一.WebSocket 简单介绍1.HTTP和WebSocket的区别2.WebSocket应用场景二.js使用WebSocket1.创建WebSocket实例2.属性3.方法4.事件5.使用示例一.WebSocket 简单介绍1.HTTP

2024-06-10 00:14:10

目录精度问题控制台图样01.引入Decimal.js02.使用加减乘除全上附：Vue项目完整例子总结精度问题控制台图样如果银行的业务你这样做，不知道要损失多少钱，这样是不行的，计算的不准

2024-06-10 00:14:07

在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。我这里分享一个使用Vue3和JSZip库在浏览器端实现zip文件压

2024-06-10 00:14:04

目录axios 拦截器简介Axios 实例拦截器类拦截器实现原理收集拦截器拼接请求链由请求链结构看错误处理第一个请求拦截器出错最后一个请求拦截器出错axios 请求出错响应拦截器

2024-06-10 00:14:02

目录1. 什么是二值化2. 二值化的作用3. 二值化的实现4.代码实现1. 什么是二值化图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255]，即

2024-06-10 00:14:00

目录一、打印预览表格列不全（Element的el-table组件）1、打印设置“打印缩放”2、修改el——table的底层代码（如果页面上有多个表格慎用）二、如何解决vue p

2024-06-10 00:13:57

实现效果// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span

2024-06-10 00:13:55

vue3中element Plus插槽，实现代码如下所示： <el-table-column property="" label="操作" width="200" show-overflow-tooltip> <template

2024-06-10 00:13:52

目录一、下载二、请求三、示例总结一、下载在 JavaScript 中，可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。下面是一个示例代码，可以帮助

2024-06-10 00:13:50

目录封装成方法Javascript封装成一个classTypeScript封装成一个classTypeScript基于泛型FileReader的使用机会很多，但是它是异步的，因此很容易出现回调地狱。我们可以使用asyn

2024-06-10 00:13:48

在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的，但是当代码复杂度比较高的时候这个方法就比较鸡肋了。这里我来教大家在Webstorm中如何来调试自己的

2024-06-10 00:13:47

目录上传功能介绍一下 POI OOXML 的使用下载模板功能实现上传导入上传功能代码一<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>

2024-06-10 00:13:43

2019-07-09

2020-05-22

2021-01-11

2021-02-01

2020-11-04

2020-05-27

2020-02-20

基于vue3+TypeScript实现一个简易的Calendar组件

目录

功能分析

功能实现

初始化

组件分析

具体操作

Calendar / CalendarCom.vue

Calendar / CalendarMonth.vue

Calendar / HeaderCom.vue

小结

总结

热点内容

免费资源网

在线工具

扫一扫随时看

本站下载频道