基于vue的自定义日历组件

如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。
希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。

项目github地址

线上demo地址

使用步骤:

1、安装包

cnpm i

2、运行dev

npm run dev

项目目录:

自定义农历节日:

yinli_festival.json

{
  "01-06":"阴历节1",
  "01-10":"阴历节2",
  "01-15":"阴历节3",
  "02-07":"阴历节7",
  "03-03":"阴历节8",
  "04-07":"阴历节12",
  "04-12":"阴历节16",
  "04-08":"阴历节17",
  "05-07":"阴历节18",
  "05-17":"阴历节21",
  "05-28":"阴历节22",
  "06-09":"阴历节24"
}

自定义阳历节日:

yangli_festival.json

{
  "01-05":"阳历节1",
  "01-09":"阳历节2",
  "01-12":"阳历节3",
  "01-17":"阳历节4",
  "01-22":"阳历节5",
  "02-01":"阳历节6",
  "02-05":"阳历节7",
  "03-03":"阳历节8",
  "03-16":"阳历节9",
  "03-18":"阳历节10",
  "03-28":"阳历节11",
  "04-04":"阳历节12",
  "04-08":"阳历节13",
  "04-14":"阳历节14",
  "04-15":"阳历节15"
}

默认节日显示优先级:

calendar.vue

<!-- 先展示阴历节日 -->
<div class="text" v-if="child.eventName!=undefined" :class="{‘isGregorianFestival‘:child.eventName!=undefined}">{{child.eventName}}</div>
<!-- 再展示阳历节日 -->
<div class="text" v-else-if="child.yangeventName!=undefined" :class="{‘isLunarFestival‘:child.yangeventName,‘isGregorianFestival‘:child.isGregorianFestival}">{{child.yangeventName}}</div>
<!-- 再展示默认节日 -->
<div class="text" v-else-if="child.lunar!=undefined" :class="{‘isLunarFestival‘:child.isLunarFestival,‘isGregorianFestival‘:child.isGregorianFestival}">{{child.lunar}}</div>
<!-- 再展示阴历日期 -->
<div class="text" v-else-if="child.lunarValue!=undefined">{{child.lunarValue}}</div>

效果图:

原文地址:https://www.cnblogs.com/linfblog/p/12147451.html

时间: 2024-10-29 03:47:34

基于vue的自定义日历组件的相关文章

基于JQ的自定义弹窗组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于JQ的自定义弹窗组件</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" h

Vue自定义日历组件

今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart="true" :calendarType="1" :markDate="markDate" :markDateClass="markDateClass" :agoDayPrevent="agoDayPrevent&qu

一款基于Vue的扩展性组件库 VV-UI

github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar 当我们访问知乎或者Github的时候,会经常看到这样的加载进度条: 这种交互对于单页面应用来说,也是可以极大地增强用户体验,那么我们基于Vue 该如何实现这样的加载进度条呢?其实很简单,目前我做了一套基于Vue的开源组件库,里面完善和补充了其他组件库不存在的一些组件.比如我们的LoadingBar

基于Vue2-Calendar改进的日历组件(含中文使用说明)

一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅…… 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 日历面板增加一个位置

3.ASP.NET全栈开发之前端校验(基于Vue的自定义校验)自实现小型验证框架

前面分享了两篇关于.NET的服务端校验的文章,在系统里光有服务端校验虽然能够勉强使用,但会出现许多不愉快的体验,如上一章我在最后提交的时候填写了3个表单,在仅有最后一个表单出现了错误的时候,虽然达到了校验功能,表明了错误,但我前面三个表单的数据都被干掉了啊.再则比如注册的时候我填了那么多东西,我提交后你却告诉我已经被注册了,如果不是真爱,大概会毫不留情的Alt+F4 再也不见啦. 为了解决这个问题,我们必须在系统中采用双校验,前端校验那么多,咱们ASP.NET MVC创建时默认会引入jquery

vue-waterfall2 基于Vue.js 瀑布流组件

vue-waterfall2 1.宽度自适应,数据绑定特效(适用于上拉加载更多) 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局-适用于下拉刷新)/mix(扰乱布局) API,一般情况下不需要用到 5.后期将持续更新,提供animation(过渡动画) Demo DEMOGITHUB Installation npm install --save vue-waterfall2 Usage 注意: 1.itemWidth需要与gutterWidth一起使

Vue可自定义tab组件

在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间. 如何使用? 1. 首先先安装: npm i vue-cus-tabs -S 2. 在new vue之前引入样式并use一下VueCusTab: import 'vue-cus-tabs/style/index.css' import { installCusTabs } from 'vue-cus-tabs';

js自定义日历组件

js日历插件 实现思路:获取每个月的第一天是星期几,然后把前面的天数填充为空,在获取每个月有多少天,循环填充,判断并给给当前时间添加单独样式,点击上一月,和下一月时改变月份. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

一次基于Vue.Js的用户体验优化

.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑体", Arial; font-size: 18px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; width: 97% } .arti