vue自定义小
日历组件一、前言自己开发的项目需要用到类似博客侧边栏小
日历组件，觉得自己造一个比较随心所欲，更能满足自己的需求，所以决定自己开发一个。最终效果如图所示。二、
日历样式我的这个
日历组件主要分为导航栏区和主要内容区，导航栏按钮样式什么的都是自定义的，很简单，源码有就不罗嗦。主要讲一下
日历内容的样式设计。
日历内容都是用<ul>和<li>标签实现的，星期栏和日期栏分别为
转载
2024-03-22 16:02:35
521阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周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阅读
相信有不少小伙伴和我一样一提到日历就脑壳疼，然后去网上搜索好用的日历组件，如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-calendar-component基于 vue 2.0 开发的轻量，高性能日历组件占用内存小，性能好，样式好看，可扩展性强原生 js 开发，没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件，却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大，对于日历这样简单的功能来说显然不够合理Demo 或者请用浏览器的手机模式查看 效果? 觉得好用给
转载
2024-08-23 17:49:03
882阅读
vue集成tui.calendar日历组件前言一、简介、效果图二、vue简单集成(集成js版本,没有使用官方的vue2版本)1.引包2.简单示例三、自定义功能1.需求分析、效果展示2.实现思路 前言vue2的集成在git上官方已经给出了demo这里就不贴代码了。本次主要是vue3集成 最近有个功能需要一个日历视图显示出什么时间段上什么课、点击可以查看详情、点击日历空白出可以创建课程或者日程。并且
转载
2024-03-07 15:51:30
4244阅读
上一篇我们已经实现了基本的
日历显示功能，这一次我们要加上预定的功能废话不多说，上代码 <div id="calendar">
<!-- 年份 月份 -->
<div class="month">
<ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(
vue v-
转载
2024-07-22 12:46:34
493阅读
在前端开发中，使用 Vue.js 实现日历看板是一个常见的需求。在这个过程中，我选择了 Element UI 作为 UI 组件库，结合 Vue 2 实现了一个功能强大的日历组件。下面我将详细记录这个过程，包括版本对比、迁移指南、兼容性处理、实战案例、排错指南和生态扩展。
### 版本对比
在使用 Element UI 的不同版本时，存在一些显著的特性差异。这些差异直接影响到我们的组件实现和使用
不用任何第三方库，只基于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阅读
基于ant Design
Vue日历组件a-calendar封装的
日历组件示例 结构<month-calendar :date="dateStr" :data="workData" @panelChange="onPanelChange">
<template v-slot:header="{ date }">
<div class="calen
转载
2024-09-12 23:39:07
188阅读
之前写了一个简单的vue日历控件:具体用法:(基本用法请参考:) <zm-datepicker type="week" v-model="option.sDate" @select-time="selectSDate" placeholder="开始日期"></zm-datepicker> 然后简单的日历控件并不能很好的满足我现有的工作，故封装了一个稍微复杂点
转载
2024-07-25 09:52:46
829阅读
前言因项目的需要，而且当前组件库并不支持业务，所以，重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档，方便以后的查阅。先上图：UI小哥哥的原型图。接下来的思路都是根据该图进行解说逻辑1.组件的拆分，分出哪些是业务，哪些是基础组件。
整体来说，这就是在日历的基础上添加业务，所以日历组件应该是基础组件，而业务应该是通过插槽插入进去的。那么，右上方的分入分出合计以及每个日历中的分入，分出都是需
转载
2024-03-05 21:06:16
289阅读
一、效果图
日历显示内容变为01，02的形式，点击相应的日期后，有一个弹出框显示当天完成的一些内容。二、前端代码设置<el-calendar v-model="value">
<div
slot="dateCell"
slot-scope="{ data }"
@click="viewDay
转载
2024-05-30 21:36:35
2886阅读
项目：公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图： 假设今天为2018-09-02 90天前： 90天后; 产品需求：展示当前日期（服务器时间）前后90天，一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的，需要置灰并且不可点击。点击日历绑定的节点的外部，关闭弹窗。涉及内容：获取服务器时间
转载
2024-08-01 08:22:04
497阅读
前言最近开始整理我们的单页应用框架了，虽然可能比不上MVVM模式的开发效率，也可能没有Backbone框架模块清晰，但是好歹也是自己开发出来而且也用于了这么多频道的东西，如果没有总结，没有整理，没有开源就太可惜了......所以最近开始整理框架相关的东西，争取抽象一点东西出来框架出来还需要一点时间，但是框架会需要相关的UI库，这个东西可以先有思路，最后再根据框架做一点调整吧日历对于UI插件而言还是
转载
2024-07-10 20:24:31
101阅读
//根
组件<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阅读
有这样一种需求，选择[开始时间]和[结束时间]，接待时间自动设置起始时间和终止时间。 使用的
日历控件是WeUI官方的Calendar。<!--出差时间-->
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">出差时间</la
相信有不少小伙伴和我一样一提到日历就脑壳疼，然后去网上搜索好用的日历组件，如element-ui什么的，但是日历毕竟是别人开发出来的， 和自己家ui设计出来的功能样式毕竟不能100%相似，所以这个时候要么就去git上找一个相似的然后去修改代码，要么就只能自己开发一个了，所以我也是把我自己学到的日历组件封装思路分享给大家；虽然我知道日历组件肯定已经有很多人发过文章，写过思路了，但是我还是想写一下。准
