# pc端个性化日历实现
pc端个性化日历实现
技术:vue => v-for、slot-scop 插槽域
需求:需要实现日历上每一天动态显示不同的信息
思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据
一、实现日历组件
思路:布局上就是一个7列,行数不确定的表格。只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面。
1.布局的实现
<div class="calendar">
<div class="calendar-operation">
<span class="calendar-title">{{title}}</span>
<div class="calendar-YearMonth">
<Icon type="ios-arrow-back" style="margin-right:30px;" @click="prev" />
<div class="calendar-YearMonth-content">{{YearMonth}}</div>
<Icon type="ios-arrow-forward" style="margin-left:30px;color:" @click="next" />
</div>****
</div>
<div class="calendar-head">
<div class="calendar-head-item">星期日</div>
<div class="calendar-head-item">星期一</div>
<div class="calendar-head-item">星期二</div>
<div class="calendar-head-item">星期三</div>
<div class="calendar-head-item">星期四</div>
<div class="calendar-head-item">星期五</div>
<div class="calendar-head-item">星期六</div>
</div>
<div class="calendar-content">
<div v-for="(item,index) in dateArray" :key="index" class="calendar-row">
<div v-for="(val,key) in item" :key="key" :class="{'calendar-cols':true,'calendar-enable':!val.enable}">
<span class="calendar-cols-content">{{val.value}}</span>
<div class="calendar-cols-opera" >
<div style="height:100%;">
<slot :oper = 'val.oper'></slot>
</div>
</div>
</div>
</div>
</div>
</div>
<style scoped lang="less">
.calendar{
width:100%;
border:1px solid #e8eaec;
border-left: 0;
border-radius: 8px;
background: #fff;
.calendar-operation {
height: 60px;
border-bottom: 1px solid #e8eaec;
border-left:1px solid #e8eaec;
.calendar-title{
display:block;
font-size:12px;
color:#fb9153;
float: left;
height: 100%;
line-height:60px;
padding-left: 40px;
}
.calendar-YearMonth{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size:17px;
color: #fb9153;
}
}
.calendar-head {
display: flex;
height:40px;
border-bottom: 1px solid #e8eaec;
border-left:1px solid #e8eaec;
.calendar-head-item {
flex: 1;
height:100%;
line-height:40px;
font-size: 12px;
text-align: center;
border-left: 1px solid #e8eaec;
}
}
.calendar-content {
width: 100%;
.calendar-row{
width:100%;
display: flex;
.calendar-cols {
position: relative;
flex: 1;
height: 0;
padding-bottom: 14%;
border-bottom: 1px solid #e8eaec;
border-left: 1px solid #e8eaec;
.calendar-cols-content{
display:block;
text-align: right;
height:0;
padding-bottom: 15%;
box-sizing: border-box;
padding: 0 10px;
margin-bottom: 15%;
}
.calendar-cols-opera{
width:100%;
height: 0;
padding-bottom: 84%;
box-sizing: border-box;
overflow-y: auto;
}
}
}
.calendar-enable{
color: #e8eaec;
}
}
}
</style>
2.日历数组的实现
思路:获取当前月有多少天,当月第一天对应的星期。
实现:如何获取这个月的天数,通过下一个月的第一天 减去一天时间就是这个月的最后一天,进而能知道这个月的天数
//获取当月最后一天
function getLastDate(year,month) {
let currentMonth = month - 1
let nextMonth = currentMonth + 1
if(nextMonth > 11 ) {
nextMonth = 0
year++
}
//let nextMonthFisrtDate = new Date(year,nextMonth,1).getDate()
let lastDate = new Date(new Date(year,nextMonth,1).getTime() - 1000*60*60*24).getDate()
return lastDate
}
//获取当月第一天对应的星期
function getFirstDay(year,month) {
let currentMonth = month - 1
return new Date(year,currentMonth,1).getDay()
}
//获取最后一天的星期
function getLastDay(year,month) {
let currentMonth = month - 1
return new Date(year,currentMonth,getLastDate(year,month)).getDay()
}
//获取当月 日期数据
function getDateArray(yearMonth) {
let year = parseInt(yearMonth.split('-')[0])
let month = parseInt(yearMonth.split('-')[1])
let dateArray = []
let firstDay = getFirstDay(year,month,1)
let lastDate = getLastDate(year,month)
let lastDateDay = getLastDay(year,month)
let prevLastDate = getLastDate(year,month - 1)
//缓存每一行数据
let newArr = []
//获取第一行数据
for(let i=1;i<=7;i++){
if(i<=firstDay){
newArr.push({
date:'',
value: prevLastDate - (firstDay-i),
enable: false,
oper:{}
})
}
else{
newArr.push({
date:new Date(year,month-1,i-firstDay).getTime(),
value:i-firstDay,
enable: true,
oper:{}
})
}
}
dateArray.push(newArr)
newArr = [] //清空
let count = 0
for (let i=(7-firstDay+1);i<=lastDate;i++){
if ( count < 7){
newArr.push({
date:new Date(year,month-1,i).getTime(),
value:i,
enable:true,
oper:[]
})
}
else{
dateArray.push(newArr)
newArr = []
newArr.push({
date:new Date(year,month-1,i).getTime(),
value:i,
enable:true,
oper:[]
})
count = 0
}
if (i == lastDate && count == 6) {
dateArray.push(newArr)
}
count++
}
//获取最后一行
newArr = []
if(lastDateDay<6){
for(let i=0;i<=6;i++){
if(i<=lastDateDay){
newArr.push({
date:new Date(year,month-1,lastDate-(lastDateDay-i)).getTime(),
value:lastDate-(lastDateDay-i),
enable:true,
oper:[]
})
}
else{
newArr.push({
date:'',
value:i-lastDateDay,
enable:false,
oper:[]
})
}
}
dateArray.push(newArr)
}
return dateArray;
}
二、个性化日历使用
<Calendar :operData="operData" @change="calendarChange" :title="title">
<template slot-scope="slotScope">
<div v-for="(item,index) in slotScope.oper " :key="index" class="calendar-oper">
<div class="calendar-oper-tag" :style="{background:tagType[item.type].color}">
<span>{{item.visitTypeCode}}</span>
</div>
<div class="calendar-oper-time">{{item.time}}</div>
<div class="calendar-oper-content">{{item.content}}</div>
</div>
</template>
</Calendar>
# pc端个性化日历实现的更多相关文章
- 山西大同大学教务处教师端——可在PC端,手机端操作
解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端 / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换
查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...
- 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢?
如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...
- C#--图片上传(PC端和APP)保存及 跨域上传说明
手动跨域操作文件 补录:跨域访问文件夹文件是一种常见的需求,下面主要介绍的的通过代码使用具有权限账号的人来达到跨域操作文件的能力. 现在补充一下普通的一些需求场景,今天就遇到了一种需要经常需要登录远程 ...
- 判断是pc端还是手机端,并跳转到相应页面
<!-- 判断浏览器是否为手机端 --> <script> // class ! function(navigator) { var user ...
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
- 关于pc端直播
写这篇文章首先是想给自己一个总结.整理,还有就是给那些 没有特别明白直播是怎么回事的人一点 思路 最近公司想要做pc端直播,作为一个自认为很菜的前端实在是不知从何下手,所以只能用国人最爱的百度,搜索了 ...
- PHP项目实现手机端和PC端的页面切换
目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
随机推荐
- python学习笔记之—— calendar(日历)模块
内置函数month() #!/usr/bin/python import calendar print calendar.month(2017,12) 输出: December 2017 Mo Tu ...
- Storm并行度
1.Storm并行度相关的概念 Storm集群有很多节点,按照类型分为nimbus(主节点).supervisor(从节点),在conf/storm.yaml中配置了一个supervisor有多个槽( ...
- maven 结合mybaits整合框架,打包时mapper.xml文件,mapper目录打不进war包去问题
首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...
- ui-sref的参数传递
例如:路由配置如下: $stateProvider.state('admin.userList', { url: '/listUser?type&role', //参数必须先在这边声明 tem ...
- java虚拟机---内存
java虚拟机---内存 Java虚拟机,即JVM,负责运行java程序,每个java程序都运行在一个具体jvm实例上.Java虚拟机的体系架构分为:类装载子系统.运行时数据区.执行引擎.类装载子系统 ...
- String使用equals和==比较的区别
"==" 操作符的作用: 1.用于基本数据类型的比较 2.判断引用是否指向堆内存的同一块地址. equals的作用: 用于判断两个变量是否是对同一个对象的引用,即堆中的内容是否相 ...
- 一次存储链路抖动因I/O timeout不同在AIX和HPUX上的不同表现(转)
去年一个故障案例经过时间的沉淀问题没在发生今天有时间简单的总结一下,当时正时午睡时分,突然告警4库8个实例同时不可用,这么大面积的故障多数是有共性的关连,当时查看数据库DB ALERT日志都是I/O错 ...
- MySQL · 数据恢复 · undrop-for-innodb
Ref:https://www.aliyun.com/jiaocheng/1109809.html 摘要: 简介 undrop-for-innodb 是针对 innodb 的一套数据恢复工具,可以从 ...
- 使用CADisplayLink写秒表
使用CADisplayLink写秒表 效果: 源码: StopWatch.h 与 StopWatch.m // // StopWatch.h // ShowTime // // Created by ...
- iOS8 生成二维码与条形码
iOS8 生成二维码与条形码 效果图: 源码: // // ViewController.m // CodeCreator // // Created by YouXianMing on 15/3/1 ...