gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update screen 30, 13, 22

Browse Source
This commit is contained in:
dev
2025-07-31 11:31:53 +09:00
parent 1faf49056d
commit 58bb7f915c
16 changed files with 436 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/common/Calendar.vue
View File

@ -3,45 +3,28 @@
<div class="custom-vc-calender-title text-center" v-if="headerVisible">
<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
</div>
<vc-calendar
ref="myCalendar"
:attributes="calendarAttributes"
class="custom-calendar"
>
<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 :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)"
>
<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"
/>
<component ref="planPop" :is="'PlanPop'" v-show="false" :detailList="detailList" :label="planLabel"
:parentPrgmId="parentPrgmId" />
</div>
</template>
<script>
@ -63,6 +46,10 @@ export default {
type: Boolean,
default: true,
},
showTitle: {
type: Boolean,
default: false,
},
},
computed: {
...mapState({
@ -122,7 +109,7 @@ export default {
planColor:
// item.endDt < Utility.setFormatDate(new Date(), 'YYYY-MM-DD')
// ? 'grey':
item.planColor,
item.planColor,
},
dates: new Date(yy, mm, dd),
});
@ -166,15 +153,14 @@ export default {
this.$refs['planPop'].strtDt = '';
this.$refs['planPop'].endDt = '';
this.$refs['planPop'].addPlanData = {
year : year,
month : month,
day : day
year: year,
month: month,
day: day
}
// BEGIN TEST UI
// this.$refs['planPop'].blocId = this.pageData.blocMstrList[
// this.pageData.blocId
// ].blocId;
// END TEST UI
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
this.pageData.blocId
].blocId;
this.$refs['planPop'].dialog = true;
},
updatePlan(val) {
@ -188,7 +174,7 @@ export default {
this.$refs['planPop'].dialog = true;
},
},
mounted() {},
mounted() { },
};
const myDetail = [];
</script>
@ -196,36 +182,44 @@ const myDetail = [];
<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 {
>div {
flex: 1 0 calc(100% / 7);
}
}
.vc-weekday {
display: flex;
align-items: center;
@ -233,6 +227,7 @@ const myDetail = [];
height: 36px;
padding: 0;
}
.vc-day {
height: 10.889vh;
min-height: auto;
@ -241,6 +236,7 @@ const myDetail = [];
font-size: 1rem;
line-height: 1.235;
}
.day-hldyNm {
overflow: hidden;
text-overflow: ellipsis;
@ -251,25 +247,27 @@ const myDetail = [];
font-size: 10pt;
}
> div {
>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 {
.plusButton:hover>span:first-child {
font-weight: bolder;
cursor: pointer;
}
.red {
//background-color: rgba(229,62,62,var(--bg-opacity));
background-color: #e53e3e !important;
background-color: #FF4D4F !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -277,9 +275,9 @@ const myDetail = [];
text-align: left;
margin-bottom: 0.25rem;
}
.blue {
//background-color: rgba(66,153,225,var(--bg-opacity));
background-color: #4299e1 !important;
background-color: #597EF7 !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -287,9 +285,9 @@ const myDetail = [];
text-align: left;
margin-bottom: 0.25rem;
}
.puple {
//background-color: rgba(102,126,234,var(--bg-opacity));
background-color: #667eea !important;
background-color: #9254DE !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -297,9 +295,9 @@ const myDetail = [];
text-align: left;
margin-bottom: 0.25rem;
}
.green {
//background-color: rgba(56,178,172,var(--bg-opacity));
background-color: #38b2ac !important;
background-color: #73D13D !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -308,9 +306,9 @@ const myDetail = [];
margin-bottom: 0.25rem;
width: 90%;
}
.orange {
//background-color: rgba(237,137,54,var(--bg-opacity));
background-color: #ed8936 !important;
background-color: #FFA940 !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -318,9 +316,9 @@ const myDetail = [];
text-align: left;
margin-bottom: 0.25rem;
}
.pink {
//background-color: rgba(237,100,166,var(--bg-opacity));
background-color: #ed64a6 !important;
background-color: #F759AB !important;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;
@ -328,8 +326,8 @@ const myDetail = [];
text-align: left;
margin-bottom: 0.25rem;
}
.grey {
background-color: #6d6d6d;
color: #fff;
border-radius: 0.125rem;
font-size: 0.75rem;