<template>
<div class="calendar">
<!-- 导航 -->
<div class="calendar-nav">
<span>关闭</span>
<span>文案</span>
<span>确认</span>
</div>
<!-- 开始日期/结束日期 -->
<div class="aclendar-begin">
<div class="aclendar-data aclendar-rightBorder">
<span class="aclendar-dataText">开始日期</span>
<input class="aclendar-input" type="text" disabled v-model="begin">
</div>
<div class="aclendar-data">
<span class="aclendar-dataText">结束日期</span>
<input class="aclendar-input" type="text" disabled v-model="begin">
</div>
</div>
<!-- 日历 -->
<div class="custom-calendar" :style="{width:calendarWidth,height:calendarHeight}" :class="calendarClass">
<div class="calendar-topBox">
<slot name="calendarTitle"></slot>
<slot name="calendarTop" :currentYear="currentYear" :currentMonth="currentMonth+1" :changeMonth="changeMonth">
<div class="calendar-title rowBtween" :style="{height:titleHeight,background:titleBk}" :class="titleClass">
<div class="right">
<slot name="monthRightBtn" :changeMonth="changeMonth" :currentYear="currentYear" :currentMonth="currentMonth+1">
<i class="el-icon-arrow-left" @click="changeMonth(0)"></i>
<strong class="left">{
{
currentYear}}{
{
titleDateConnector || '年'}}{
{
currentMonth+1}}{
{
titleDateConnector ? '' : '月'}}</strong>
<i class="el-icon-arrow-right" @click="changeMonth(1)"></i>
</slot>
</div>
</div>
</slot>
</div>
<div class="calendar-body" :style="{background:bodyBk}" :class="bodyClass">
<div class="bodyTitleBox rowCenter">
<slot name="weeks">
<span class="body-title rowCenter" :ref="index ? '' : 'calenCellTitle'" :style="{height:cellTitleHeight,color:cellTitleColor}" v-for="(week,index) in weeks" :key="index">{
{
week}}</span>
</slot>
</div>
<div class="calen-content rowCenter">
<div class="calen-cell" :id="'calen'+index" :ref="index ? '' : 'calenCell'" :class="[calenCellClass,index<7 ? 'firstRowCellClass': '',index%7===0 ? 'firstColumCellClass' : '']" :style="{...calenCellStyle,...cellBorderStyle(index)}" v-for="(day,index) in calendarList" :key="index" @click="choose(day,index)">
<slot name="day" :day="day">
<span class="dateSpan rowCenter" :class="day.dateClass">{
{
day.day}}</span>
</slot>
<div class="rowCenter" v-show="day.hasData && day.isThis">
<slot name="haveDataTag" :hasData="day.hasData" :isThis="day.isThis">
<div class="tag"></div>
</slot>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
isValidDate,isNumber} from "./validate"
import {
checkStartTimeEndTimeFun,insertDataToCalendar} from './util'
export default {
name: "Calendar",
props: {
initDate:{
type:[String,Date,Number],
default:()=>new Date()
},//初始化日期
width:{
type:[String,Number],
default:'100%'
},//日历宽度
height:{
type:[String,Number],
default:'100%'
},//日历高度
calendarClass:String,
vue自定义日历
最新推荐文章于 2024-05-07 16:58:53 发布