背景：

同事做移动端项目时希望用到可平铺选择的日历插件，然度娘无过最后问题到我这边，虽然咱不是前端但是秉着技术问题不是问题且问题到我为止的原则，自己研究了2天完成了vue3-small-calendar插件，此插件目前已发布npm，大家觉得可用可以自行安装

介绍

先看下移动端效果：

此控件主要显示星期及日期，可左右滑动查看历史和未来日期

安装

npm i vue3-small-calendar

使用

main.js中注册组件

import vue3SmallCalendar from 'vue3-small-calendar'
const app = createApp(App);
app.use(vue3SmallCalendar).mount('#app')

在实际业务中引用组件

<vue3-small-calendar @change="setDate" @icon="getIcon"></vue3-small-calendar>

事件说明：

@change：为日期点击事件，会传递yyyy-MM-dd格式的日期到指定方法，如：

const setDate = (date) => {console.log(date)
}

@icon:为反向获取每日图标事件。如果不设置则只显示星期和日期，设置方法如下：

const getIcon = ({start, end}, callback) => {console.log(1, start)console.log(2, end)callback(['#icon-emoji-1', '#icon-emoji-2', 'icon-emoji-', '#icon-emoji-3', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-2', 'icon-emoji-', '#icon-emoji-3', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1', '#icon-emoji-1'])}

其中start、end表示开始和结束时间，我们可以根据开始和结束时间获取自己所需的每日图标，callback 表示在开始结束时间范围内显示的图标，这里图标引用的是阿里的icon表情

最后

如果觉得有用请点赞加关注！

移动端日历插件（vue3-small-calendar）相关推荐

移动端日历插件_小程序日历组件开发教程！
微信小程序是我们生活中很常用的工具,在一些生活服务方面尤其有用,比如购物.点餐.预定,甚至是查看天气.日历等.小程序日历是很方便也很容易制作的,那么具体怎么做一个微信小程序日历呢?你可以下载安装微信官 ...
vue移动端日历插件
https://www.npmjs.com/package/vue-mobile-calendar npm安装 npm install vue-mobile-calendar import Calen ...
可编辑的日历控件_选择正确的WordPress编辑日历插件
可编辑的日历控件什么是编辑日历? (What is an Editorial Calendar?) An editorial calendar is the foundation of strate ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
jQuery实现移动端手机选择日期日历插件
效果图 calendar.css html, body {color: #333;margin: 0;height: 100%;font-family: "Microsoft YaHei&q ...
JS PC端时间日历插件功能齐全无依赖
时间日历插件,网上有很多版本,功能强大的,功能简单的数不尽数,那为什么我还要写一个日历插件呢? 很认真的告诉你: 我手痒了,就是闲下来随便敲敲. 开发一个功能齐全的日期选择插件根据自己的业务需求不断 ...
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
fullcalendar官网:https://fullcalendar.io/ 插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalenda ...

移动端日历插件（vue3-small-calendar）

背景：

介绍

安装

使用

最后

移动端日历插件（vue3-small-calendar）相关推荐

最新文章

热门文章