html pc端万年历插件,# pc端个性化日历实现
pc端个性化日历实现
技术:vue => v-for、slot-scop 插槽域
需求:需要实现日历上每一天动态显示不同的信息
思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据
一、实现日历组件
思路:布局上就是一个7列,行数不确定的表格。只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面。
1.布局的实现
{{title}}
****
{{val.value}}
.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;
}
}
}
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;
}
二、个性化日历使用
{{item.visittypecode}}
html pc端万年历插件,# pc端个性化日历实现相关推荐
- html移动端表格插件,移动端类table组件封装
简介 一个不怎么高度自定义的移动端table组件,可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的 实现思路表格头部一个循环:循环渲染每一列的列名 表格内容两重循环:外层循 ...
- java对接海康威视SDK(win64、linux64),处理播放实时流转码,按时间回放功能,附海康威视最新3.0摄像头监控web端实例+插件
java对接海康威视SDK(win64.linux64),处理播放实时流转码,按时间回放功能 准备工作 遇到的坑 调用步骤 参数配置 DeviceEnums 初始化sdk 注册 大华的sdk叫登陆海康 ...
- 点微同城系统整站源码 带pc端与小程序端+49款插件
介绍: 点微同城系统整站源码 带pc端与小程序端+49款插件 下载 百度网盘 请输入提取码百度网盘为您提供文件的网络备份.同步和分享服务.空间大.速度快.安全稳固,支持教育网加速,支持手机端.注册使用 ...
- 苹果cmsv10仿电影淘淘PC+WAP爱看的高端免费模板
苹果cmsv10仿电影淘淘PC+WAP模板主题介绍: 模板名称:苹果cmsv10仿电影淘淘PC+WAP爱看的高端免费模板 模板程序:苹果cmsv10 模板类型:pc+wap 空间支持:php5.6+m ...
- 普通pc端开发与移动端开发区别
1,普通pc端开发与移动端开发区别. 普通pc端开发,我理解就是你拿电脑打开的网页都算[这不是废话么]. 那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师. 这么一比,是不是感 ...
- phpcms v9电脑pc站+手机wap移动端双模板共用数据库数据同步可同步生成静态文件
phpcms v9电脑pc站+手机wap移动端双模板共用数据库数据同步可同步生成静态文件,并且电脑站和手机站网址页面一一对应,非插件,程序二次开发版. 详情如下: 1.phpcms v9电脑版+手机版 ...
- 基于vue2的移动端适配与pc端各一套样式
公司需求基于vue2的一套代码能适应pc端与移动端,检测到为pc端就显示pc端样式,检测为移动端就做适配 移动端rem适配,utils辅助文件夹里创建一个rem.js ps:此处是750设计稿,如需修 ...
- vue +element 搭建项目,要求既支持pc端又支持移动端
使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () {if(document.documentElement.clientW ...
- PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
最新文章
- Numpy入门教程:12. 线性代数
- 什么是信度分析(Reliability)?有哪些信度分析方法?那什么又是效度?
- CComboBox 置空
- java个人所得税计算_java个人所得税计算器 | 学步园
- 【Linux】一步一步学Linux——cksum命令(235)
- android骰子游戏代码_真神器!不用手写一行代码就能做网站~
- kotlin 判断数字_Kotlin程序可以逆转数字
- setuptools Declaring Dependencies
- 团队作业第六次-团队Github实战训练
- Testbench基本入门
- 文献阅读(245)Roller
- html小说站源码,读取本地HTML的小说阅读器应用源码项目
- 如何做一个阿里云物联网安卓原生APP
- json格式转csv格式
- 前端使用vue+ js-xlsl + elemen-ui实现导出Excel表格(绝对好使, 前端有问题直接关注我, 或者评论立刻给你回应, 专业解决)
- python封包和解包_python解析网络封包方法
- Java实现一个简易联网坦克对战小游戏
- 【历史上的今天】12 月 12 日:英特尔创始人出生;PSP 发布;双十二购物狂欢节
- Oracle SQL 批量修改资料库邮箱后缀名称
- 既不是研发顶尖高手,也不是销售大牛,为何偏偏获得2万RMB的首个涛思文化奖?...