vue写的日历插件

最新推荐文章于 2024-04-24 16:19:24 发布
最新推荐文章于 2024-04-24 16:19:24 发布
阅读量5k 收藏 2
点赞数
分类专栏： js插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoshunshi/article/details/79638540
版权
<!DOCTYPE html>
< html >

     < head >
         < meta charset = " UTF-8 " >
         < title > 日历 </ title >
         < style type = " text/css " >
             * {
                 margin : 0 ;
                 padding : 0 ;
             }
            
             . canlender {
                 width : 1000 px ;
                 height : 530 px ;
                 margin : 0 auto ;
             }
            
             table {
                 border-collapse : collapse ;
                 width : 100 % ;
             }
            
             table . bgtable thead tr th {
                 height : 30 px ;
             }
            
             table . bgtable tbody tr td {
                 height : 100 px ;
                 box-sizing : border-box ;
                 border : 1 px solid # ccc ;
                 text-align : right ;
                 vertical-align : top ;
                 padding : 4 px ;
             }
             table . bgtable tbody tr td . gray {
                 color : gray ;
                 background : # DDDDDD ;
             }
         < / style >
     </ head >

     < body >
         < div class = " canlender " id = " canlender " >
             < div class = " tablebox1 " >
                 < table class = " bgtable " >
                     < thead >
                         < tr >
                             <!--汉字表头-->
                             < th v-for = " (item,index) in daynamearr " > {{item}} </ th >
                         </ tr >
                     </ thead >
                     < tbody >
                         < tr v-for = " week in theweek() " >
                             < td v-for = " item in week " : class = " {'gray': item.prevmonth || item.nextmonth} " > {{item.day}} </ td >
                         </ tr >
                     </ tbody >
                 </ table >
             </ div >

         </ div >
     </ body >
     < script src = " bower_components/vue/dist/vue.min.js " type = " text/javascript " charset = " utf-8 " > < / script >
     < script type = " text/javascript " >
         var app = new Vue ( {
            el : " #canlender " ,
            data : {
                daynamearr : [ " 周日 " , " 周一 " , " 周二 " , " 周三 " , " 周四 " , " 周五 " , " 周六 " ] ,
                 //本月的本期构成
                dayarr : [] ,
                year :new Date () . getFullYear () ,
                month :new Date () . getMonth () + 1 ,
             },
             mounted : function (){
                 //需要知道这个月的第一天是星期几
                 var themonth1stday = ( new Date ( this . year , this . month - 1 , 1 )) . getDay () ;
                 console . log ( themonth1stday )
//              alert(themonth1stday)
//本月有多少天，这个月的最后一天就是下个月的最后一天减去一毫秒
var y = this . month == 12 ? this . year + 1 : this . year ;
var m = this . month == 12 ? 1 : this . month ;
var themonthdaysamount = new Date ( new Date ( y , m , 1 ) - 1 ) . getDate () ;
console . log ( themonthdaysamount )
//上个月有多少天
var prevmonthlastday = new Date ( new Date ( this . year , this . month - 1 , 1 ) - 1 ) . getDate () ;
console . log ( prevmonthlastday )
// alert(prevmonthlastday)
                 while ( themonth1stday -- > 0 ) {
                     this . dayarr . unshift ( {
                         " day " : prevmonthlastday --,
                         " prevmonth " : true
                     } ) ;
                 };
                 //本月的日期
                 var count = 0 ;
                 while ( themonthdaysamount -- ) {
                     this . dayarr . push ( {
                         " day " :++ count
                     } ) ;
                 }
                 var c = 35 - this . dayarr . length ;
                 var count2 = 1
                 while ( c -- > 0 ) {
                     this . dayarr . push ( {
                         " day " : count2 ++,
                         " nextmonth " : true
                     } ) ;
                 }
             },
            methods : {
                 theweek : function (){
                     var _arr = [] ;
                     for ( var i = 0 ; i < 5 ; i ++ ) {
                         var _week = [] ;
                         for ( var j = 0 ; j < 7 ; j ++ ) {
                             _week . push ( this . dayarr [ i * 7 + j ]) ;
                         }
                         _arr . push ( _week )
                     }
                     return _arr
                 }
             }
         } )
     < / script >

</ html >
xiaoshunshi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue移动端日历插件
hellozhxyuan
11-01 1035
https://www.npmjs.com/package/vue-mobile-calendar npm安装 npm install vue-mobile-calendar import Calendar from 'vue-mobile-calendar' Vue.use(Calendar);
移动端Vant中的Calendar日历增加显示农历(节日、节气)功能
DLGDark的博客
12-11 1443
内部使用原生calendar.js， 中国农历（阴阳历）和西元阳历即公历互转JavaScript库，具体实现感兴趣的可自行查看其实现源码。使用 vue-jlunar-datepicker 依赖插件实现即可，具体样式可以自己根据需求进行修改处理。使用 js-calendar-converter 库实现。在main.js文件中引入。
vue中使用el-table实现动态排班功能
最新发布
weixin_59005889的博客
04-24 669
vue中实现动态el-table点选和整列选中功能，来实现排班功能
Vue3+Element-Plus || el-calendar考勤日历
weixin_45862553的博客
02-02 3353
日历放在#header插槽内，额外内容放在#date-cell插槽内
Vue中的日历组件 Calendar 实现 考勤打卡记录
强者惜字如金，弱者废话连篇！
01-18 2084
实现效果图1.由于Calendar没有右上角月份切换的API事件，可以给组件源码添加自定义添加一个事件2.也可以自带的input事件来获取日历3.vue页面完整代码注释：this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’)，是分装的标准时间转化年月日，使用者可通过多种方法自定义处理。-- 日历组件 -->:time-区间步长="30"
vue日历，可以按周、月切换
蔓菲Q
12-14 1万+
仿钉钉的日历，可以实现周、月切换，代码是在另一位大神那里参考修改的，感谢https://blog.csdn.net/x_xiaoqi/article/details/79142055#commentBox 废话不多说，上代码！ &lt;template&gt; &lt;div class="calendarBox" style="overflow: hidden"&gt; &l...
亲自动手实现vue日历控件
10-16
主要记录了亲自动手实现vue日历控件的详细过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现日历小插件
10-16
主要为大家详细介绍了Vue实现日历小插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue的日历控件
11-05
日历组件，相关的代码，可以自定义，可以添加事件，vue+javascript
Vue自已写的日历插件
04-24
本篇文章将聚焦于一个特定的话题——“Vue自已写的日历插件”，通过这个话题，我们将深入探讨如何在Vue中创建自定义日历组件，以及它背后的原理和实践。 首先，创建一个日历插件通常涉及到以下几个关键点： 1. **...
vue-price-calendar:vue移动端日历插件
05-18
vue价格日历 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 有关工作原理的详细说明，请参阅。
vue-calendar 日期插件分享
07-21
vue引入日期插件资源
vue实现日历备忘录功能
01-19
用vue写了个日历备忘录的功能，省略了备忘录的增删改查功能。    直接上代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>备忘录</title> <style type=text/css> #box{ width: 469px; } /*日历*/ *{ padding: 0; margin: 0; } li{ list-style: none; } #calendar{ width:380px;
基于Vue2-Calendar改进的日历组件（含中文使用说明）
aishu6901的博客
04-03 1543
一，前言 我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅…… 于是网上搜了好久找到了Vue2-Calendar，不用说，挺好用的，但是同时也发现这个组件有些问题，有些功能挺不符合我们的要求，于是着手改了一版 二，改进的功能 在Vue2-Calendar v2.2.4...
vue移动端日历显示查看每日详情列表
y13488733540的博客
03-27 1705
vue移动端日历显示查看日期详情列表 效果图 # 使用cmd命令 npm install v-calendar package.json和package-lock.json配置信息如下 在页面中引入并注册组件 import { setupCalendar, DatePicker } from "v-calendar"; import { mapGetters, mapActions } fro...
vue移动端实现日历
qq_39933787的博客
08-22 2006
实现功能：左滑返回上一个月，右滑下一个月，支持农历，下拉展示记录日志，持续更新 思路： 获取本月日历中的上个月显示日期以及下个月显示日期，通过数组展现 核心代码; getCurrentMonVal(year,month){ month = month - 1 let getWeekday = calendar.getWeekday(year,month) let getPreMonthCount = calendar.getPreMon..
vue日历插件vue-calendar
memory_zzz的博客
09-09 3万+
原始效果： 修改后的效果： 接下来，我们使用它～ 1.安装 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 2.在使用到日历插件的文件中引入 import Calendar from 'vue-calendar-component'; 3.原始效果代码 <template> <div class="con"> <Calen.
使用vue书写一个简单的日历的demo
不忘初心，方得始终！
05-28 1万+
最近在项目中遇到了一个需求，在vue中创建一个组件，这个组件显示的是当前的日期，以及在当前的日需要处理的事项，处理的事项的信息会以后端的接口的形式返回。需求确认后，搭建了一下，在这里记录了一下，现在是简单的实现了这个需求，但是肯定的是后期需要进行修改。vue就不多说了，在vue中使用的是原生JS效果图（~~基本没有样式，很low）现在实现的都是最初级的版本，代码里面的容错，还有一些性能上的处理，并...
vue 插件集合
热门推荐
hjh15827475896的博客
10-11 9万+
Vue2.0+组件库总结   鲁大师666 关注 2017.05.05 10:46 字数 3121 阅读 5583评论 1喜欢 28 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI
vue3 手撕日历控件
05-01
vue3 手撕日历控件是一种基于 Vue 3.x 版本实现的可定制化的日历控件，它可以方便地作为独立组件在 Vue 3.x 项目中使用。在实现这个控件时，需要遵循 Vue 3.x 的组件通信及生命周期相关规则，并基于 JavaScript 和 HTML/CSS 开发。 首先，需要设计日历的外观以及功能，例如显示当前月份、选择日期、展示日程等。然后，可以通过 Vue 3.x 的响应式数据来实现控件数据的绑定和更新，例如动态更新当前月份、将已选择的日期加入到日程列表等。 接着，需要为日历控件编写适当的方法和事件处理逻辑，例如处理日期选择事件、翻页事件、切换展示日程等。在实现这些方法和事件处理逻辑时，可以充分利用 Vue 3.x 提供的组合 API、自定义指令等功能。 最后，可以将整个日历控件打包成独立的组件，方便在 Vue 3.x 项目中通过 import 实现模块化引入和使用。 总之，vue3 手撕日历控件的实现需要遵循 Vue 3.x 的相关规则和规范，同时需要充分利用 Vue 3.x 提供的组件通信、生命周期、响应式数据等功能，使得日历控件具有稳定、高效、可定制化的特性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值