基于Vue的简单日历组件

最新推荐文章于 2025-07-17 13:50:03 发布

weixin_34355559

最新推荐文章于 2025-07-17 13:50:03 发布

阅读量658

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000014916960

本文介绍了一款自研的移动端日历组件，该组件具备基本的日历功能，并支持设置初始日期及监听点击事件获取选中日期。适用于需要日历功能的移动端项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日历组件

由于移动端项目中需要用到日历组件，网上找了下，没看到几个合适的，就尝试着自己写一个。然后发现也不是很复杂，目前只做了最基本的功能，大家也可以拿去做做二次开发。

基础效果如下图：
图片描述

然后可以接受一个起始日期参数start-date，设置日历当前显示的年月。可以监听一个点击事件click-event，回调参数为当前点击的年月日。
图片描述

<calendar 
    @click-event="getDate"
    :start-date="new Date(2015,7)">
</calendar>

然后具体的代码地址在这里:
https://github.com/wsh8215921...

新手上路，大家多多指教

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34355559

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

简单的vue日历组件

金大光

11-28

5629

效果图根据公司设计图制作了一个简单的日历组件，主要包括切换上一年、上一月、下一年、下一月，锁定开始时间、结束时间等功能，以上就是效果图。用法 **html :child="date0"> :child="date1"> **js kim=new Vue({ el:"#app", data:{ date0:{ now:"2

基于vue的日历控件

11-05

参与评论您还未登录，请先登录后发表或查看评论

基于Vue3和TypeScript的日历日程组件设计源码

05-31

日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript源代码、JSON配置文件、Git忽略文件、NPM忽略文件、LICENSE文件、Markdown文档、HTML文档和SCSS样式表等。该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。

@fullcalendar/vue 日历组件

热门推荐

ae_pppppp的博客

12-13

1万+

手写日历组件

vue 简单日历组件

w18478272407的博客

04-03

633

首页  <template> <my-calendar :showToday='true' @on-click='showInfo'></my-calendar> <...

vuefullcalendar一个基于vuejs的全日历组件

08-10

vue-fullcalendar 一个基于vue.js的全日历组件，不需要Jquery或fullCalendar.js。目前，它只支持月视图。它的灵感来自fullCalendar.io

vuefullcalendar一个基于VUE的日历组件

08-11

Vue FullCalendar是一个基于Vue.js框架的日历组件，它专为JavaScript开发设计，尤其适用于需要进行事件调度和管理的Web应用程序。Vue.js是一个轻量级、高性能的前端框架，以其组件化开发模式和易于上手的特性深受...

Vue3+Typescript日历组件

07-29

首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...

vue-baidu-calendar:基于vue3实现的仿百度日历组件

05-23

基于vue3实现的百度日历组件。宜忌算法尚未实现，欢迎pr。 react版本安装 $ npm install vue-baidu-calendar --save 使用 mian.js import { createApp } from 'vue' import App from './App.vue' import ...

基于Vue2x开发的一款轻量的可滑动的日历组件

08-10

基于Vue2.x 开发的一款轻量的, 可滑动的日历组件

vue 简易的日历组件

weixin_38891273的博客

03-25

1441

<template> <div class="calender"> <div class="cal-header"> <span @click="month--"><</span> <span>{{year}}年{{month}}月</span> <span @click="month++">></span> &lt.

vue日历组件

weixin_43837268的博客

02-15

1513

1.WeekCalendar.vue <template> <div class="yh-week-calendar"> <div class="yh-calendar-item"> <div style="text-align:center;font-weight:bold">{{days[0].dateOb

vue 日历组件

zx894554911的博客

05-25

1530

【代码】vue 日历组件。

vue实现日历组件

jqh的博客

08-24

1438

MyCalender.vue <template> <div> <div class="calender_header"> <ul> <li v-for="(item,index) in weekDays" v-text="item" :key="index"></li> </ul> </div> <!--实现的基本思路：

基础日历-组件 vue

qq_42228073的博客

09-07

261

日历大概长这个样子, 两种颗粒度的。有上月-到下月的周内日期补充。平时要么就用插件要么扒网上的代码，也没存过每回都是现用现扒。所以想自己搞一个基础版的方便修改和调整，用vue写的，没用UI库. 代码如下。 Code Start <template> <div class="calendar"> <div class="calendar-header padding line-bottom flex justify-between"> <div c..

vue创建一个日历组件

weixin_59525879的博客

10-27

678

在template标签中，可以使用table和tr标签来创建一个简单的日历表格，使用v-for指令来循环渲染每一行日期。首先，在Vue项目中创建一个日历组件所需要的Vue单文件组件（.vue文件）。这样，就可以创建一个基本的Vue日历组件了。最后，在style标签中，可以设置样式来美化日历组件。然后在页面中引入Calendar组件即可。

轻量级日历组件vue-simple-calendar

xuweilin的博客

09-04

1768

项目名称开发者：Richard Tallent（部分资料提及）类型：Vue.js组件特性：轻量级、易于集成、可定制、功能全面。

基于vue的日历组件开发

09-07

基于Vue的日历组件开发是通过使用Vue框架来构建一个功能完善的日历组件。...综上所述，基于Vue的日历组件开发可以提供一个方便实用的日历功能，并通过使用Vue的特性和灵活性，使得开发过程更为简单和高效。