Vue中的日历组件 Calendar 实现 考勤打卡记录

这篇具有很好参考价值的文章主要介绍了Vue中的日历组件 Calendar 实现 考勤打卡记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

日历组件 Calendar 可以自定义在页面添加内容。

实现效果图
Vue中的日历组件 Calendar 实现 考勤打卡记录,vue.js,elementui,前端
Vue中的日历组件 Calendar 实现 考勤打卡记录,vue.js,elementui,前端

1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件
Vue中的日历组件 Calendar 实现 考勤打卡记录,vue.js,elementui,前端
Vue中的日历组件 Calendar 实现 考勤打卡记录,vue.js,elementui,前端
2.也可以通过自带的input事件来获取日历
Vue中的日历组件 Calendar 实现 考勤打卡记录,vue.js,elementui,前端
3.vue页面完整代码
注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。文章来源地址https://www.toymoban.com/news/detail-815589.html

<template>
	<div>
		<!-- 日历组件 -->
		<el-calendar
			:events="tableData"
			:date-format="'yyyy-MM-dd'"
			:time-format="true"
			:time-区间步长="30"
			@date-change="getDateChange"
			style="height:95%;overflow:scroll"
		>
			<template
				slot="dateCell"
				slot-scope="{date, data}"
				>
				<p :class="dateFormatter(date)">
					{{ data.day.split('-').slice(1).join('-') }}
				</p>
				<div v-if="result[$m(date).format('YYYY-MM-DD')] " class="chockIn">
					<p v-if="result[$m(date).format('YYYY-MM-DD')].length >= 2">上班:{{ result[$m(date).format('YYYY-MM-DD')][result[$m(date).format('YYYY-MM-DD')].length-1].checkInTime }}</p> 
					<p v-if="result[$m(date).format('YYYY-MM-DD')].length >= 2" style="margin-top:5px;">下班:{{ result[$m(date).format('YYYY-MM-DD')][0].checkInTime }}</p> 
					<el-popover
						placement="bottom"
						width="540"
						max-width="540"
						trigger="click
						v-if="result[$m(date).format('YYYY-MM-DD')].length > 2"
					>
						<el-table :data="result[$m(date).format('YYYY-MM-DD')]">
							<el-table-column align="center" type="index" width="60" label="序号"></el-table-column>
							<el-table-column prop="clockTime" align="left" label="打卡时间" width="180">
								<template slot-scope="scope">
									{{ $m(scope.row.clockTime).format('YYYY-MM-DD HH:mm') }}
								</template>
							</el-table-column>
							<el-table-column width="300" property="site" label="地址" show-overflow-tooltip></el-table-column>
						</el-table>
						<p class="navMore"  slot="reference">展示更多</p> 
					</el-popover>
				</div>
				<p class="absenceFromDuty" v-if="($m(new Date()).format('YYYY-MM-DD') >= $m(date).format('YYYY-MM-DD'))">
					<span v-if="!result[$m(date).format('YYYY-MM-DD')] || result[$m(date).format('YYYY-MM-DD')].length < 2">{{dateFormatterText(date)}}</span>
				</p> 
			</template> 
		</el-calendar>
  	</div>
</template>

<script>

export default {
	data() {
		return {
			beginTime: '',
            endTime: '',
			newDate:'',
			nowDate:'',
			result:{},
			value: new Date(), // 当前日期
		}
	},
	created(){
		// 获取当前月第一天
		this.beginTime = this.$m().firstDay();
		this.beginTime = this.$m(this.beginTime).format('YYYY-MM-DD HH:mm')
		// 获取当前月最后一天
		this.endTime = this.$m().lastDay();
		this.endTime = this.$m(this.begiendTimenTime).format('YYYY-MM-DD 23:59')
    },
  	methods: {
		// 检查日期是否是周末
		dateFormatterText(date) {
			const dayOfWeek = date.getDay();
			if (dayOfWeek === 0 || dayOfWeek === 6) { // 0 是星期日,6 是星期六
				return ''; 
			}
			return '缺勤';
		},
		// 获取日历数据
		getDateChange(val){
			let date = val.split("-");
			date = date[0] + '-' + date[1];
			//打卡的年月
			if(date){
				// 开始时间
				let firstDay = this.$m(date).firstDay();
				this.beginTime = this.$m(firstDay).format('YYYY-MM-DD HH:mm')
				// 结束时间
				let lastDay = this.$m(date).lastDay();
				this.endTime = this.$m(lastDay).format('YYYY-MM-DD 23:59')
				// 获取每个月发月份下的打卡记录
				this.getClockLogList();
			}
		},
        // 获取打卡记录
		getClockLogList(){
		    // ...调用接口获取每个月的考勤打卡数据,赋值给 this.tableData
            // this.tableData = val;
		},
	}
}
</script>
<style lang="scss" scoped>
	.chockIn{
		margin-top:10px;
	}
	.absenceFromDuty{
		color: #c06817;
		margin-top:10px;
	}
	.navMore{
		margin-top:3px;
		color: #3370ff;
	}
    .weekend-highlight {
        color: #eb3333;
	}
</style>

到了这里,关于Vue中的日历组件 Calendar 实现 考勤打卡记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了 el-badge 具体效果如下图所示:  页面标签: 变量声明: 样式修改: 参考地址

    2024年02月11日
    浏览(64)
  • uni-app日历组件(calendar),兼容安卓、ios、微信、百度、抖音小程序

    插件链接: https://ext.dcloud.net.cn/plugin?id=7839/ 参数 说明 类型 可选值 默认值 pointList 日期数组,控制日期底下的点 Array - [] pointColor 点的颜色 String - #fff defaultDate 默认选中的日期 String - 默认值为当天 (传YYYY-MM-DD 或者 YYYY/MM/DD格式日期) showBtn 是否显示 展开/折叠 按钮 Boolean true /

    2024年02月09日
    浏览(64)
  • 微信小程序实现日历功能、日历转换插件、calendar

    效果图 微信小程序实现交互

    2024年02月13日
    浏览(57)
  • 微信小程序使用vant calendar日历组件 default-date 默认选中的日期无效?

    废话少说 直接贴代码 总结:  ①: 要有一个minDate 最小可选日期,要不然无法选择之前的时间 ②: defaultDate(数组): 绑定为时间戳,,[ 起始时间,截止时间 ] , 转换时间戳时要再次getTime()否则设定默认时间失败!!!重点!!!

    2024年02月02日
    浏览(59)
  • 记录-Vue移动端日历设计与实现

    选择月份和选择年份与日期做了条件渲染,切换方式是点击顶部时间切换选项 日数据的显示一共42条数据,先获取当前月的总天数,将每个月的天数保存在一个数组里,然后根据传入的参数返回相应的天数, 因为有闰年的存在,2月会是29天,所以做了闰年的判断.然后获取每周的第一天

    2023年04月26日
    浏览(33)
  • 【Flutter】Flutter 使用 table_calendar 实现自定义日历

    【Flutter】Flutter 使用 table_calendar 实现自定义日历 你好!今天我要为你介绍一个非常实用的 Flutter 日历组件—— table_calendar 。这个组件不仅功能强大、高度可定制,而且使用起来非常简单。在本文中,我会手把手教你如何使用这个组件,并分享一些实际业务中的应用示例。希

    2024年02月08日
    浏览(44)
  • java+springboot+vue开发的小学生(家长)考勤请假打卡小程序

    演示视频 小程序 https://www.bilibili.com/video/BV1RN4y167Xu/?share_source=copy_webvd_source=11344bb73ef9b33550b8202d07ae139b 管理员 https://www.bilibili.com/video/BV18H4y1z7xH/?share_source=copy_webvd_source=11344bb73ef9b33550b8202d07ae139b 主要功能:家长代替小学生注册登录,可向班主任请假销假考勤打卡,查看班主任信

    2024年02月06日
    浏览(58)
  • 《Vue3+Typescript》一个简单的日历组件实现

    这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 目录 一、前言 二、效果图 三、核心思路 四、代码实现 4.1 本月日期

    2024年02月14日
    浏览(41)
  • uniapp zjy-calendar日历,uni-calendar日历增强版

    zjy-calendar日历是对uniapp uni-calendar日历的增强,支持圆点和文字自定义颜色。 源使用说明:https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html https://ext.dcloud.net.cn/plugin?id=13509

    2024年02月13日
    浏览(53)
  • vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能

    已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了。今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲、随遇而安、安之若素、素不相识也就无所谓了

    2024年02月06日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包