element日历日历calendar组件上月、今天、下月、日历块点击事件及模板源码组件上月、今天、下月、日历块点击事件及模板源码
辰小白小白最近在写日历模板，项目已经用了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">
资源评论
- 许诚~2022-11-29资源很赞，希望多一些这类资源。
- 王鹤鹤2022-11-01这个资源对我启发很大，受益匪浅，学到了很多，谢谢分享~
