340 lines
7.2 KiB
Vue
340 lines
7.2 KiB
Vue
<template>
|
|
<div class="custom-vc-calender">
|
|
<div class="custom-vc-calender-title text-center" v-if="headerVisible">
|
|
<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
|
|
</div>
|
|
<vc-calendar locale="ko-KR" ref="myCalendar" :attributes="calendarAttributes" class="custom-calendar">
|
|
<!-- disable-page-swipe
|
|
is-expanded -->
|
|
<template v-slot:day-content="{ day, attributes }">
|
|
<div class="plusButton" style="overflow:auto">
|
|
<!-- <p class="plusButton mr-1" >+</p> -->
|
|
<span :class="['day-label', { 'is-holiday': hldyValues(day.day) }]"
|
|
@click="addPlan(day.year, day.month, day.day)">{{ day.day }}</span>
|
|
<span v-for="attr in attributes" :key="attr.key" class="day-hldyNm">
|
|
{{ attr.customData.title }}
|
|
</span>
|
|
<div class="">
|
|
<p v-for="attr in attributes" :key="attr.key" :class="attr.customData.planColor"
|
|
@click="updatePlan(attr.customData.planSeq)">
|
|
{{ attr.customData.planTitle }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</vc-calendar>
|
|
<component ref="planPop" :is="'PlanPop'" v-show="false" :detailList="detailList" :label="planLabel"
|
|
:parentPrgmId="parentPrgmId" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import Utility from '~/plugins/utility';
|
|
import PlanPop from '@/components/common/modal/PlanPop';
|
|
|
|
export default {
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
gridName: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
headerVisible: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showTitle: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
pageData(state) {
|
|
return state.pageData[this.parentPrgmId];
|
|
},
|
|
}),
|
|
gridData() {
|
|
return this.pageData[this.gridName].data;
|
|
},
|
|
planData() {
|
|
return this.pageData.planData;
|
|
},
|
|
calendarDtValue() {
|
|
const dt = this.pageData['fromDt'];
|
|
return dt;
|
|
},
|
|
selectedYear() {
|
|
return Utility.setFormatDate(this.calendarDtValue, 'YYYY');
|
|
//return this.calendarDtValue.split("-")[0];
|
|
},
|
|
selectedMonth() {
|
|
return Utility.setFormatDate(this.calendarDtValue, 'MM');
|
|
//return this.calendarDtValue.split("-")[1];
|
|
},
|
|
hldyValues() {
|
|
const filter = this.gridData.filter(
|
|
data => data.hldyFg === '1' || data.hldyNm,
|
|
);
|
|
const map = filter.map(item => {
|
|
const dt = item.dt.split(' ')[0];
|
|
const dtArr = dt.split('-');
|
|
const dd = dtArr[2] * 1;
|
|
return dd;
|
|
});
|
|
|
|
return day => {
|
|
return map.includes(day);
|
|
};
|
|
},
|
|
calendarAttributes() {
|
|
if (this.planData.length > 0) {
|
|
let attrArr = [];
|
|
this.planData.forEach((item, idx) => {
|
|
const dt = item.dt.split(' ')[0];
|
|
const dtArr = dt.split('-');
|
|
const yy = dtArr[0] * 1;
|
|
const mm = dtArr[1] * 1 - 1;
|
|
const dd = dtArr[2] * 1;
|
|
attrArr.push({
|
|
key: idx,
|
|
customData: {
|
|
title: item.hldyNm,
|
|
hldyFg: item.hldyFg,
|
|
planTitle: item.planTitle,
|
|
planSeq: item.planSeq,
|
|
planColor:
|
|
// item.endDt < Utility.setFormatDate(new Date(), 'YYYY-MM-DD')
|
|
// ? 'grey':
|
|
item.planColor,
|
|
},
|
|
dates: new Date(yy, mm, dd),
|
|
});
|
|
});
|
|
return attrArr;
|
|
} else {
|
|
return [];
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
calendarDtValue(val) {
|
|
// if (val) {
|
|
// this.$refs.myCalendar.move(this.calendarDtValue);
|
|
// }
|
|
if (val) {
|
|
const yy = Utility.setFormatDate(this.calendarDtValue, 'YYYY');
|
|
const mm = Utility.setFormatDate(this.calendarDtValue, 'MM') - 1;
|
|
this.$refs.myCalendar.showPageRange(new Date(yy, mm, 1));
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
PlanPop,
|
|
},
|
|
data() {
|
|
return {
|
|
detailList: myDetail,
|
|
planPopDisableFlag: false,
|
|
planLabel: '일정',
|
|
};
|
|
},
|
|
methods: {
|
|
addPlan(year, month, day) {
|
|
this.planLabel = '일정 등록';
|
|
this.$refs['planPop'].popUpAction = 'insert';
|
|
// this.$refs['planPop'].strtDt = year + '-' + month + '-' + day;
|
|
// this.$refs['planPop'].endDt = year + '-' + month + '-' + day;
|
|
// this.$refs['planPop'].strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
|
// this.$refs['planPop'].endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
|
this.$refs['planPop'].strtDt = '';
|
|
this.$refs['planPop'].endDt = '';
|
|
this.$refs['planPop'].addPlanData = {
|
|
year: year,
|
|
month: month,
|
|
day: day
|
|
}
|
|
|
|
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
|
this.pageData.blocId
|
|
].blocId;
|
|
this.$refs['planPop'].dialog = true;
|
|
},
|
|
updatePlan(val) {
|
|
this.$refs['planPop'].popUpAction = 'update';
|
|
this.$refs['planPop'].planSeq = val;
|
|
this.$refs['planPop'].strtDt = '';
|
|
this.$refs['planPop'].endDt = '';
|
|
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
|
this.pageData.blocId
|
|
].blocId;
|
|
this.$refs['planPop'].dialog = true;
|
|
},
|
|
},
|
|
mounted() { },
|
|
};
|
|
const myDetail = [];
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/var.scss';
|
|
@import '@/assets/scss/mixin.scss';
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
.custom-vc-calender {
|
|
&-title {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.custom-calendar.vc-container {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.vc-header,
|
|
.vc-arrows-container {
|
|
display: none;
|
|
}
|
|
|
|
.vc-weeks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
>div {
|
|
flex: 1 0 calc(100% / 7);
|
|
}
|
|
}
|
|
|
|
.vc-weekday {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 36px;
|
|
padding: 0;
|
|
}
|
|
|
|
.vc-day {
|
|
height: 10.889vh;
|
|
min-height: auto;
|
|
|
|
.day-label {
|
|
font-size: 1rem;
|
|
line-height: 1.235;
|
|
}
|
|
|
|
.day-hldyNm {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
max-width: 80%;
|
|
float: right;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
>div {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 10px;
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
|
|
.vc-day.is-not-in-month {
|
|
* {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
.plusButton:hover>span:first-child {
|
|
font-weight: bolder;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.red {
|
|
background-color: #FF4D4F !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #597EF7 !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.puple {
|
|
background-color: #9254DE !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.green {
|
|
background-color: #73D13D !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
width: 90%;
|
|
}
|
|
|
|
.orange {
|
|
background-color: #FFA940 !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.pink {
|
|
background-color: #F759AB !important;
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.grey {
|
|
color: #fff;
|
|
border-radius: 0.125rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|