Vue自定义日历小控件使用方法详解

2024-10-20 02:27:18

本文实例为大家分享了Vue自定义日历小控件的具体代码，供大家参考，具体内容如下

废话少说，先上效果图：

可以在效果图中看到，选择不同的月份的时候当月天数与星期几都是一一对应，非当月天数则是灰色显示，一目了然。

并且此日历控件支持自动确定当前时间，每次打开默认显示的就是最新的月份，用来做签到打卡的功能比较合适。

由于使用的是原生div进行制作，自定义功能非常强，可以自由的更换样式、背景、颜色、大小等等。

在与数据库的时候可以从数据库获得时间信息并填充到控件中，图中的色块就可以看出。

该控件使用了Vue、CSS、以及最原生的div实现了自定义的样式，不得不说，div在自定义这一块是真的太给力了。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历控件</title>
    <script src="./vue.js"></script>
</head>
<style>
    .writer-upper-right {
    float: left;
    width: 333px;
    height: 300px;
    border: 2px orange solid;
    border-radius: 7px;
}
.calendar-head {
    width: 100%;
    height: 15%;
    border-radius: 7px;
}
.calendar-body {
    width: 99.9%;
    height: 84.9%;
    border-radius: 7px;
    border-top: 1px orange solid;
}
.calendar-head-title {
    float: left;
    width: 100px;
    height: 79%;
    line-height: 33px;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    margin-left: 1px;
    text-align: center;
    color: orange;
    font-size: 21px;
}
.calendar-head-year {
    float: left;
    margin-left: 9px;
    width: 100px;
    height: 79%;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    color: orange;
    text-align: center;
}
.select-calendar-year {
    float: left;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    color: orange;
    text-indent: 0.7em;
    font-size: 20px;
}
.select-calendar-year:focus {
    outline: none;
}
.select-calendar-year:hover {
    cursor: pointer;
}
.calendar-body-week {
    width: 99.8%;
    height: 32px;
    margin: 0 auto;
    border-bottom: 1px orange solid;
}
.calendar-body-days {
    width: 99.8%;
    height: 199px;
    border-bottom: 1px orange solid;
    border-top: none;
    border-radius: 7px;
}
.calendar-body-info {
    width: 99.8%;
    height: 18px;
    border-radius: 7px;
}
.weekEveryDay {
    float: left;
    width: 40px;
    height: 23px;
    margin-left: 5px;
    margin-top: 4px;
    border: 1px orange solid;
    border-radius: 5px;
    line-height: 23px;
    text-align: center;
    font-size: 15px;
    color: orange;
}
.monthEveryDay {
    margin-top: 7px;
}
.not-now-month {
    border-color: gray;
    color: gray;
}
.now-day-writer {
    background-color: orange;
    color: black;
}
.now-day-not-writer {
    border-color: gray;
    background-color: gray;
    color: black;
}
.info-if-writer {
    float: left;
    width: 60px;
    height: 16px;
    margin-left: 5px;
    margin-top: 1px;
}
.color-span {
    float: left;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    background-color: gray;
}
.color-info {
    float: left;
    width: 40px;
    height: 15px;
    margin-top: 1px;
    margin-left: 5px;
    line-height: 15px;
    text-align: left;
    font-size: 12px;
    color: gray;
}
.color-span2 {
    background-color: orange;
}
.color-info2 {
    color: orange;
}
</style>
<body style="background: url('./bg-xk.gif');margin: 100px 100px;">
    <div id="app">
        <div class="writer-upper-right">
            <div class="calendar-head">
                <div class="calendar-head-title">日历控件</div>
                <div class="calendar-head-year">
                    <label>
                        <select class="select-calendar-year" v-model="calendarYear" @change="SelectCalendarYear">
                            <option v-for="year in calendarAllYear" :value="year" :key="year">{{year}}年</option>
                        </select>
                    </label>
                </div>
                <div class="calendar-head-year">
                    <label>
                        <select class="select-calendar-year" v-model="calendarMonth" @change="SelectCalendarMonth">
                            <option v-for="month in calendarAllMonth" :value="month" :key="month">{{month}}月</option>
                        </select>
                    </label>
                </div>
            </div>
            <div class="calendar-body">
                <div class="calendar-body-week">
                    <div class="weekEveryDay">SUN</div>
                    <div class="weekEveryDay">MON</div>
                    <div class="weekEveryDay">TUE</div>
                    <div class="weekEveryDay">WED</div>
                    <div class="weekEveryDay">THU</div>
                    <div class="weekEveryDay">FRI</div>
                    <div class="weekEveryDay">SAT</div>
                </div>
                <div class="calendar-body-days">
                    <div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarPrevDays" disabled>{{day}}</div>
                    <div class="weekEveryDay monthEveryDay"
                         v-for="day in calendarNowDays"
                         :class="['weekEveryDay monthEveryDay', {'now-day-writer' : calendarHadWrite.includes(day)}, {'now-day-not-writer' : calendarNotWrite.includes(day)}]"
                    >{{day}}</div>
                    <div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarNextDays" disabled>{{day}}</div>
                </div>
                <div class="calendar-body-info">
                    <div class="info-if-writer">
                        <div class="color-span"></div>
                        <div class="color-info">未更新</div>
                    </div>
                    <div class="info-if-writer">
                        <div class="color-span color-span2"></div>
                        <div class="color-info color-info2">有更新</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue实现日历小插件

本文实例为大家分享了Vue实现日历小插件的具体代码,供大家参考,具体内容如下先看下效果图吧, 如下源码可见于我的github 实现关键点: 1.组件的复用以及父子组件传值很明显每年每个月的月历样式(数据不一样)是一致的,那么自然而然思路就是把每个月作为一个公用组件进行复用十二次,这样就避免了多次重复的代码.每个组件不一样的地方在于年份和月份,而这两个数据我们可以由父组件向子组件进行传值来告诉子组件.关键代码如下: <template> <div class="wrap&q
vue实现日历备忘录功能

用vue写了个日历备忘录的功能,省略了备忘录的增删改查功能. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>备忘录</title> <style type="text/css"> #box{ width: 469px; } /*日历*/ *{ padding:
vue实现简单的日历效果

最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改. vue就不多说了,在vue中使用的是原生JS 效果图(基本没有样式,很low) 现在实现的都是最初级的版本,代码里面的容错,还有一些性能上的处理,并没有书写. 不多说,上代码: 首先是vue的html结构,很简单,里面添加了一些其他时间形式的显
Vue.js创建Calendar日历效果

使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar">  <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,
基于Vue实现支持按周切换的日历

基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date">  <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div>  <ul class=&q
基于Vue2-Calendar改进的日历组件（含中文使用说明）

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

公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指
vue+elementUI实现简单日历功能

vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class
VUE实现日历组件功能

哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画.还可以自定义显示日历里的内容. 现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件(父组件calendar.vue) <template> <div class="calendar-box"> <ul class="calendar-head&quo

Vue自定义日历小控件使用方法详解

相关推荐

随机推荐