不用任何第三方库，只基于vue2实现一个日历组件，末尾附上我的代码，单文件，代码没有抽取，有点长。哪位大佬批评指正一下样式是类似于window10日历支持控制周一还是周日在第一列支持鼠标滑动切换支持单选，拖动鼠标多选，范围选择支持年月日选择切换支持传入选中数据支持隐藏非本月日期QCalendar.scss.Q-calendar-change-enter-active,.Q-calendar-cha
原创
2022-10-24 09:43:49
1082阅读
<template> <div class="Calendar"> <Header /> <DateList /> <div style="overflow: hidden;"> nd="touchend" @touchmove="touchmove" ref="w.
原创
2023-02-14 09:09:55
1278阅读
vue自定义小
日历组件一、前言自己开发的项目需要用到类似博客侧边栏小
日历组件，觉得自己造一个比较随心所欲，更能满足自己的需求，所以决定自己开发一个。最终效果如图所示。二、
日历样式我的这个
日历组件主要分为导航栏区和主要内容区，导航栏按钮样式什么的都是自定义的，很简单，源码有就不罗嗦。主要讲一下
日历内容的样式设计。
日历内容都是用<ul>和<li>标签实现的，星期栏和日期栏分别为
转载
2024-03-22 16:02:35
521阅读
前言因项目的需要，而且当前组件库并不支持业务，所以，重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档，方便以后的查阅。先上图：UI小哥哥的原型图。接下来的思路都是根据该图进行解说逻辑1.组件的拆分，分出哪些是业务，哪些是基础组件。
整体来说，这就是在日历的基础上添加业务，所以日历组件应该是基础组件，而业务应该是通过插槽插入进去的。那么，右上方的分入分出合计以及每个日历中的分入，分出都是需
转载
2024-03-05 21:06:16
289阅读
项目：公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图： 假设今天为2018-09-02 90天前： 90天后; 产品需求：展示当前日期（服务器时间）前后90天，一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的，需要置灰并且不可点击。点击日历绑定的节点的外部，关闭弹窗。涉及内容：获取服务器时间
转载
2024-08-01 08:22:04
497阅读
//根
组件<template> <div class="hello"> <Time v-model="value"></Time> </div></template><script>import formate from '../utils/formate'import Time ...
原创
2021-09-03 13:42:00
1300阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
(1) 简介该
日历组件是一个应用于移动端的
日历组件采用了rem(文末附有rem.js)(2) template<template>
<div class="calendar">
<div class="calendar-year">
<span @click="chooseYear">{{showDate.year}}</span&
转载
2024-03-07 12:38:38
372阅读
有这样一种需求，选择[开始时间]和[结束时间]，接待时间自动设置起始时间和终止时间。 使用的
日历控件是WeUI官方的Calendar。<!--出差时间-->
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">出差时间</la
vue-calendar-component基于 vue 2.0 开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生 js 开发，没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件，却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大，对于日历这样简单的功能来说显然不够合理Demo 或者请用浏览器的手机模式查看 效果? 觉得好用给
转载
2024-08-23 17:49:03
882阅读
本来呢,开开心心的写完了这个功能,然后发现elemeng更新了,增加了日历组件这个功能 我的内心机器奔溃,但是,element的日历组件太简单了,我感觉还是手撸一个吧,毕竟也不是很难 实现了显示农历,备注功能,点击某一天为某一天添加备注的功能... 引用的是他人写好的组件: https://gith
原创
2022-01-13 16:26:28
1031阅读
基于vue-cli3构建的npm包,日历组件 包链接:
转载
2021-07-22 17:25:00
1422阅读
2评论
1.什么是组件？ 组件就是一个特殊的Vue实例，所以大部分Vue实例选项在组件中都可以使用 组件也拥有自己data，methods，computed，watch， 组件不需要el,组件的模板就是template属性2.定义组件的方式？ 全局定义，全局定义的组件在任何其他组件中都可以使用，我们把通用公共的组件定义为全局组件 局部定义，定义在局部组件 组件定义需要在创建3.定义组件注意
相信有不少小伙伴和我一样一提到日历就脑壳疼，然后去网上搜索好用的日历组件，如element-ui什么的，但是日历毕竟是别人开发出来的， 和自己家ui设计出来的功能样式毕竟不能100%相似，所以这个时候要么就去git上找一个相似的然后去修改代码，要么就只能自己开发一个了，所以我也是把我自己学到的日历组件封装思路分享给大家；虽然我知道日历组件肯定已经有很多人发过文章，写过思路了，但是我还是想写一下。准
转载
2024-05-01 15:48:05
79阅读
最近项目需求需要一个vue日历插件，可以分周和月显示，但是在网上找了半天也没找到合适的，只好自己动手写一个了（不过自己动手，丰衣足食哦！）废话不多说，直接上代码吧！最近重新写了一下日历插件,像了解的可以到这里看呢注意：vue里要引进jquery，vux。还有一个carlendar.js依赖，因为判断农历是在是太难了 <template>
&l
转载
2024-08-01 21:44:38
699阅读
vue集成tui.calendar日历组件前言一、简介、效果图二、vue简单集成(集成js版本,没有使用官方的vue2版本)1.引包2.简单示例三、自定义功能1.需求分析、效果展示2.实现思路 前言vue2的集成在git上官方已经给出了demo这里就不贴代码了。本次主要是vue3集成 最近有个功能需要一个日历视图显示出什么时间段上什么课、点击可以查看详情、点击日历空白出可以创建课程或者日程。并且
转载
2024-03-07 15:51:30
4244阅读
<! > <template> <ul> <li v-for="item in calendarArray" :key="item.time" > <div :style="'color:' + (item.isCurrentMonth ? '#000' : '#bbb')" > {{ item.d ...
转载
2021-07-16 13:40:00
602阅读
2评论
今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示：可以在每天的日期中添加相应的内容，内容可以是自己定义的，样式也可以是自己定义的，还有就是添加了复选框的功能。
原创
2021-07-16 16:57:30
2370阅读
今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示：可以在每天的日期中添加相应的内容，内容可以是自己定义的，样式也可以是自己定义的，还有就是添加了复选框的功能。例如我用日历来体现每天价格，如下图所示：下面来具体介绍一下是怎么实现这个过程的，这次重点讲这个组件的实现过程，涉及其它的先暂时不讲，有疑问的可以找
原创
2022-04-02 18:03:09
8334阅读
1评论
上一篇我们已经实现了基本的
日历显示功能，这一次我们要加上预定的功能废话不多说，上代码 <div id="calendar">
<!-- 年份 月份 -->
<div class="month">
<ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(
vue v-
转载
2024-07-22 12:46:34
493阅读
