-
2020-09-26 11:00:59
vue关于element日历calendar组件上月、今天、下月、日历块点击事件
参考
https://blog.csdn.net/qq493820798/article/details/106858962更多相关内容 -
element日历calendar组件上月、今天、下月、日历块点击事件及模板
2020-10-15 01:40:36主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
(与手机日历功能类似)C++实现当前整月日历的显示,翻页查询上月,下月,上年,下年的日历
2022-06-01 16:42:53此外实现了日历翻页查询,根据当前日历,可选择查询上个月,下个月,上一年,下一年的日历显示操作,整体操作与手机自带的日历基本操作相同。算是一个实战小项目,源码利用c++编写,任何问题欢迎私信。*************... -
js生成当月日历
2017-04-12 22:58:56var date = new Date(); //当前是哪一年 var year = date.getFullYear(); //当前是哪个月,注意这里的月是从0开始计数的 var month = date.getMonth();//当前月的第一天的日期 var firstDay = new Date(year,month,1...var date = new Date(); //当前是哪一年 var year = date.getFullYear(); //当前是哪个月,注意这里的月是从0开始计数的 var month = date.getMonth(); //当前月的第一天的日期 var firstDay = new Date(year,month,1); //第一天是星期几 var weekday = firstDay.getDay(); //求当前月一共有多少天 //new Date(year,month+1,0) : month+1是下一个月,day为0代表的是上一个月的最后一天,即我们所需的当前月的最后一天。 //getDate()则返回这个日期对象是一个月中的第几天,我们由最后一天得知这个月一共有多少天 var days = new Date(year,month+1,0).getDate(); var res = ""; //输出第一天之前的空格 for(var i=0;i<weekday;i++){ res+=" "; } for(var j=1;j<=days ;j++){ res += j+" "; weekday++; //如果是周日则换行 if(weekday%7 == 0){ weekday = 0; res += '\n'; } }
-
任意输入一个月份,输出上月本月下月的日历,要求连续
2020-11-24 00:29:00python任意输入一个月份,输出上月本月下月的日历,要求连续 代码 #-*-codeing = utf-8 -*- #@Time : 2020/11/17 23:55 #@Author : 宋俊育 #@File : 任意输入一个月份,输出上月本月下月的日历,要求连续.py #@...python任意输入一个月份,输出上月本月下月的日历,要求连续
代码
#-*-codeing = utf-8 -*- #@Time : 2020/11/17 23:55 #@Author : 宋俊育 #@File : 任意输入一个月份,输出上月本月下月的日历,要求连续.py #@Software : PyCharm from datetime import datetime def drawCalendar(year, month): dateday = [] if month == 1: someday = datetime((year - 1), 12, 1) firstDay = someday.isoweekday() firstD = firstDay; for i in range(firstDay): dateday.append(" ") for i in range(1, 32): dateday.append(i) for i in range(1, 32): dateday.append(i) if (year % 4 == 0 and year % 100 != 0) or year % 400 == 0: for i in range(1, 30): dateday.append(i) else: for i in range(1, 29): dateday.append(i) elif month == 12: someday = datetime(year, 11, 1) firstDay = someday.isoweekday() firstD = firstDay; for i in range(1, 31): dateday.append(i) for i in range(1, 32): dateday.append(i) for i in range(1, 32): dateday.append(i) else: someday = datetime(year, (month - 1), 1) firstDay = someday.isoweekday() firstD = firstDay; for i in range(firstDay): dateday.append(" ") for j in range((month - 1), (month + 2)): if ((year % 4 == 0 and year % 100 != 0) or year % 400 == 0) and j == 2: for i in range(1, 30): dateday.append(i) elif j in [1, 3, 5, 7, 8, 10, 12]: for i in range(1, 32): dateday.append(i) elif j == 2: for i in range(1, 29): dateday.append(i) elif j in [4, 6, 9, 11]: for i in range(1, 31): dateday.append(i) print(" Mo Tu We Th Fr Sa Su", end="") for i in range(0, len(dateday)): print("{0: >3} ".format(dateday[i]), end="") if i % 7 == 0: print("") year = eval(input("请输入年份:")) month = eval(input("请输入月份:")) drawCalendar(year, month)
运行:
-
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020-06-19 16:31:32辰小白小白最近在写日历模板,项目已经用了element组件,奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。 首先展示一些模板效果图: 这个...交流qq群:672373393
前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui
欢迎大家进群讨论!
辰小白小白最近在写日历模板,项目已经用了element组件,奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。
首先展示一些模板效果图:
这个项目的详细介绍可以下辰小白的这篇文章:后端开发的福音,vue+element实现的vue-element-admin前台框架,开箱即用
下面是日历模板首页源码
<template> <div> <el-card class="_calendar"> <el-container> <el-main> <el-card> <el-calendar v-model="value" :first-day-of-week="7"> <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="{date, data}"> <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)"> <p :class="data.isSelected ? 'is-selected' : ''"> {{ data.day.split('-').slice(1).join('-') }} <i :class="[data.isSelected ?'el-icon-check':'']" ></i> <i v-if="_.indexOf(isArrange, data.day)>0" class="el-icon-s-claim"></i> <!-- <i class="el-icon-coffee-cup"></i> --> </p> </div> </template> </el-calendar> </el-card> </el-main> <el-aside width="40%" style="overflow: hidden;"> <el-card> <div class="el-calendar__header"> <div class="el-calendar__title">排班详情</div> <div class="el-calendar__button-group"> <div class="el-button-group"> <button type="button" class="el-button el-button--plain el-button--mini" @click="saveOnClick" > <span>新增</span> </button> </div> </div> </div> <div class="calendar-info"> <div style="padding: 15px;"> <div role="alert" class="el-alert el-alert--success is-dark" @click="infoOnClick"> <i class="el-alert__icon el-icon-success is-big"></i> <div class="el-alert__content"> <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span> <p class="el-alert__description">值班人员:张三、李四、王五</p> <p class="el-alert__description">携带设备:123547、985431、745481</p> <i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i> </div> </div> <div role="alert" class="el-alert el-alert--info is-dark" @click="infoOnClick"> <i class="el-alert__icon el-icon-info is-big"></i> <div class="el-alert__content"> <span class="el-alert__title is-bold">2020-06-19 9:00~11:00(待审核)</span> <p class="el-alert__description">值班人员:张三、李四、王五</p> <p class="el-alert__description">携带设备:123547、985431、745481</p> <i class="el-alert__closebtn el-icon-close"></i> </div> </div> <div role="alert" class="el-alert el-alert--warning is-dark" @click="infoOnClick"> <i class="el-alert__icon el-icon-warning is-big"></i> <div class="el-alert__content"> <span class="el-alert__title is-bold">警告提示的文案</span> <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p> <i class="el-alert__closebtn el-icon-close"></i> </div> </div> <div role="alert" class="el-alert el-alert--error is-dark" @click="infoOnClick"> <i class="el-alert__icon el-icon-error is-big"></i> <div class="el-alert__content"> <span class="el-alert__title is-bold">错误提示的文案</span> <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p> <i class="el-alert__closebtn el-icon-close"></i> </div> </div> </div> </div> </el-card> </el-aside> </el-container> </el-card> <calendarDrawer ref="calendarDrawer"></calendarDrawer> <calendarForm ref="calendarForm"></calendarForm> </div> </template> <script> import calendarDrawer from "./calendar-drawer.vue"; import calendarForm from "./calendar-form.vue"; export default { components: { calendarDrawer, calendarForm }, data: function() { return { value: new Date(), isArrange: [ "2020-06-08", "2020-06-09", "2020-06-10", "2020-06-11", "2020-06-17", "2020-06-18" ] }; }, created: function() { this.$nextTick(() => { // 点击前一个月 let prevBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(1)" ); prevBtn.addEventListener("click", e => { console.log(this.data); this.$notify({ title: "上一月", message: "上个月头天:" + this.value, type: "success", position: "top-left" }); }); //点击下一个月 let nextBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(3)" ); nextBtn.addEventListener("click", () => { console.log(this.value); this.$notify({ title: "下一月", message: "下个月头天:" + this.value, type: "warning", position: "top-left" }); }); //点击今天 let todayBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(2)" ); todayBtn.addEventListener("click", () => { this.$notify.info({ title: "今天", message: "今天:" + this.value, position: "top-left" }); }); }); }, mounted: function() {}, methods: { //点击日期块 calendarOnClick(e) { console.log(e); // this.isArrange.push("2020-06-19"); this.$notify.error({ title: "日历块点击", message: e, position: "top-left" }); }, //点击信息块 infoOnClick() { this.$refs.calendarDrawer.drawer = true; }, //新增排班 saveOnClick() { this.$refs.calendarForm.dialogFormVisible = true; }, //删除排班 infoDel() { this.$confirm("此操作将永久删除该排班, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$message({ type: "success", message: "删除成功!" }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); } } }; </script> <style scoped> .is-selected { color: #1989fa; } .p-popover { text-align: center; } ._calendar { height: 99.5%; width: 100%; } .el-main { padding: 0px; overflow: hidden; } .calendar-info { height: 94%; overflow: auto; } .el-alert { margin: 15px 0px; } .el-alert:hover { transform: scale(1.02); } .el-alert:active { transform: scale(1.01); } </style> <style > ._calendar .div-Calendar { height: 125px; box-sizing: border-box; padding: 8px; } ._calendar .el-calendar-table .el-calendar-day { padding: 0px; height: 125px; } ._calendar .el-container, ._calendar .el-calendar { height: 100%; } ._calendar .el-card__body { padding: 0px; } </style>
具体的几个点击事件都有备注,这里不细说了
-
iOS 日历开发功能
2021-01-11 17:07:42日历基本功能都有、上下月动画显示、查看上月、查看下月、点击按钮返回今日、设置筛选日期跳转到当前设置年月日、显示当前年月日及选中的多少周 -
简陋至极:微信小程序日历组件(思路)
2021-03-29 17:19:23最近在做微信小程序项目,其中涉及...然后,有时为填充完整,还需显示上月残余天数以及下月开始几天,这些又该如何展示。 最后,根据自己项目需求实现其它细枝末节。 计算每月天数 按照一般思路,[1,3,5,7,8,10,12]这几 -
仿魅族日历,乐视日历,小米日历等效果
2016-11-15 16:28:02仿魅族日历,乐视日历,小米日历等效果,上部日历,下部列表展示日程安排等信息,向上滑动,日历收缩至一周显示,下拉展开正月显示。点击灰色日期(上月或下月日期)自动跳转至对应的月份。 -
jQuery写的日历(包括日历的样式及功能)
2020-10-27 11:24:21本代码将实现以下样式及功能:日历标题背景色、日历标题字体色、日历背景色、日历字体色、假日字体色、背景水印色、是否显示上月和下月的日期,感兴趣的朋友可以了解下哈 -
Android滑动日历控件AutoScrollCalendar.zip
2019-07-19 04:49:41滑动日历,支持上下滑动 左右滑动一、使用方法1、设置初始月份public void setCurrentMonth(Calendar startCalendar)2、月份的切换切换到上月调用scrollToPre()切换到下月调用scrollToNext()3、监听被选择的日子使用... -
Java期末实训日历软件设计
2022-06-16 10:07:47(2)提供上月、下月按钮供用户选择; (3)无论用户输入的年月,还是通过按钮选择的月份,均需通过下方面板显示相应的月历,且通过标签准确显示面板上的当前年月; (4)加分点:能够实时显示当前时间,即 时、分... -
Wpf日历控件
2017-04-12 17:15:54给单位做个小程序,需要日历中显示字符串,自己做了个WPF日历控件。完整源码,不多,略乱,自看。 按月显示,有公立和农历日期,农历的计算使用了网上找到的代码,在此感谢。 只做了按钮上月下月切换,没有做月和年... -
JS简单实现移动端日历功能示例
2020-11-27 18:25:37只是一个初步的简单的日历,有是否显示上月和下月部分的选项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-... -
分享如何用PHP制作日历(附代码)
2021-03-24 01:05:42最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:一、计算数据1、new一个Calendar类2、初始化两个下拉框中的数据,年份与... -
vue学习之关于element日历calendar组件中上月,今天,下月的显示
2021-10-05 16:50:04今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习。 显示效果图: 本月: 上月: 下月: 下方是源码 <template> <div> <el-calendar v-... -
使用vue3.0实现考勤日历组件
2021-11-29 14:39:41当前月日历1~(28/29/30/31),当前月1号如果不是周日,需要上月最后日历补全,当月最后一天不是周六需要下月开始日历补全。 切换至上月,切换至下月按钮 当前年月展示 如果某日有考勤异常,考勤异常日期标记 ... -
教你如何制作一个简单的PHP日历
2021-04-08 11:02:45最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:一、计算数据1、new一个Calendar类2、初始化两个下拉... -
jQuery 联动日历实现代码
2020-12-10 18:27:26上面蓝色的是一个DIV,显示当前月分,和上月,下月。 2.下面的日期和星期,是用一个table结构存放数据。星期用thead,日期用:tbody存放。 三、功能展开分析: 3.1、前两个功能? 让我想起使用JQUERY里面的toggle。很... -
PHP 自制日历
2021-04-21 16:15:43PHP 自制日历一、计算数据1、new一个Calendar类2、初始化两个下拉框中的数据,年份与月份3、初始化要搜索的年份和月份4、计算得出日历中每一天的数据信息,包括css、天数复制代码require_once 'calendar.php';... -
uniapp日历组件
2021-03-24 11:17:41uniapp日历组件 自己写的日历组件,欢迎指正 <template> <view class="fu-calendar-wrap"> <!-- 日历选择 start --> <view class="fu-calendar-data fu-flex fu-justify-center fu-align-... -
日历页面展示-PHP制作阴阳历转换的日历插件-PHP中文网教程
2021-04-23 06:25:27$mon= date('m');$year=date('Y');$day=date("t",mktime(0,0,0,$mon,12,$year));//当前月的天数 31$w=date("w",mktime(0,0,0,$mon,1,$year));//当月1号的星期几 4echo"";echo"";//表格开始了echo"{$year}年{$mon}月... -
ios-日历.zip
2019-07-11 18:21:17日历基本功能都有、上下月动画显示、查看上月、查看下月、点击按钮返回今日、设置筛选日期跳转到当前设置年月日、显示当前年月日及选中的多少周。 -
使用Java日历显示月份
2021-03-06 13:23:23要使用Calendar类,请导入以下包。importjava.util.Calendar;使用Calendar类,创建一个对象。Calendarcalendar=Calendar.getInstance();现在,创建一个包含月份名称的字符串数组。String[]month=newString[]{... -
Java、显示日历
2022-01-31 10:00:17编写程序,提示用户输入年份和代表该年的第一天是星期几的数字,然后在控制台上显示该年的日历表。例如,如果用户输入年份2013和代表2013年1月1日为星期二的2,程序应该显示该年的每个月的日历。 package pack2; ... -
手写vue日历控件过程
2019-02-11 21:23:22之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断。 设计(以最常用的按... -
基于Java Swing实现的日历记事本系统【源码+报告文档】
2022-06-16 11:25:06本项目是一套基于Java Swing实现的日历记事本系统,主要针对计算机相关专业的正在学习java的学生与需要项目实战练习的Java学习者。 包含:项目源码、报告文档等。 项目都经过严格调试,确保可以运行! 该系统功能... -
Java显示当前月的日历
2022-02-05 22:49:18下面这个程序将显示当前月的日历,且当前日期用一个*标记,如图: import java.time.DayOfWeek; import java.time.LocalDate; /** * @Author Hatsune Miku * @Date 2020/6/2 11:15 * @Version 1.0 */ public ...
收藏数
1,833
精华内容
733