샘플 캘린더 추가
This commit is contained in:
parent
a24693af2a
commit
d40393dca2
51
package-lock.json
generated
51
package-lock.json
generated
@ -8,6 +8,10 @@
|
||||
"name": "front",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/vue3": "^6.1.15",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tinymce/tinymce-vue": "^5.1.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
@ -993,6 +997,43 @@
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/core": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
|
||||
"integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"preact": "~10.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/daygrid": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
|
||||
"integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.15"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/interaction": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
|
||||
"integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.15"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/vue3": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.15.tgz",
|
||||
"integrity": "sha512-ctfTICGrNEIj7gmLHQcUYe0WzDTSW5Vd9hyOnVChxPU75AZU9WqdDMkHwJYnfNxNhT6QQuiMHq/qsRRd5zQwOw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.15",
|
||||
"vue": "^3.0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
@ -3723,6 +3764,16 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.12.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
|
||||
"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/vue3": "^6.1.15",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tinymce/tinymce-vue": "^5.1.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
|
||||
179
src/components/calendar/SampleCalendar.vue
Normal file
179
src/components/calendar/SampleCalendar.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card">
|
||||
<FullCalendar ref="fullCalendarRef" :options="calendarOptions" defaultView="dayGridMonth" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FullCalendar from '@fullcalendar/vue3';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { inject, onMounted, reactive, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { isEmpty } from '@/common/utils';
|
||||
|
||||
// 기본만 넣었는데 기능 추가해야할듯
|
||||
|
||||
const key1 = 'vrkIY7jUy82WRHIozbBtz4n2L89jAqNDY%2B4DmNpmasTex%2FNDySN7FDYwBqPj1p%2BxXLg13BzYfgHPt6eipWhH8Q%3D%3D';
|
||||
const key2 = 'vrkIY7jUy82WRHIozbBtz4n2L89jAqNDY+4DmNpmasTex/NDySN7FDYwBqPj1p+xXLg13BzYfgHPt6eipWhH8Q==';
|
||||
const dayjs = inject('dayjs');
|
||||
|
||||
const fetchData = () => {
|
||||
const date = fullCalendarRef.value?.getApi().currentData.viewTitle;
|
||||
const dateArr = date.split(' ');
|
||||
let contectYear = dateArr[0].trim();
|
||||
let contectMonth = dateArr[1].trim();
|
||||
const regex = /\D/g;
|
||||
contectYear = parseInt(contectYear.replace(regex, ''), 10);
|
||||
contectMonth = parseInt(contectMonth.replace(regex, ''), 10);
|
||||
const yearArr = [];
|
||||
const monthArr = [];
|
||||
|
||||
for (let offset = -1; offset <= 1; offset++) {
|
||||
let newMonth = contectMonth + offset;
|
||||
let newYear = contectYear;
|
||||
|
||||
// 월이 1보다 작으면 작년으로 이동
|
||||
if (newMonth < 1) {
|
||||
newMonth += 12;
|
||||
newYear -= 1;
|
||||
}
|
||||
|
||||
if (newMonth > 12) {
|
||||
newMonth -= 12;
|
||||
newYear += 1;
|
||||
}
|
||||
|
||||
yearArr.push(newYear);
|
||||
monthArr.push(String(newMonth).padStart(2, '0'));
|
||||
}
|
||||
|
||||
callApi(yearArr, monthArr);
|
||||
};
|
||||
|
||||
const callApi = (yearArr, monthArr) => {
|
||||
for (let i = 0; i < yearArr.length; i++) {
|
||||
axios.get('http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getRestDeInfo', {
|
||||
params: {
|
||||
serviceKey: key2,
|
||||
solYear: String(yearArr[i]),
|
||||
solMonth: String(monthArr[i]),
|
||||
},
|
||||
})
|
||||
.then(data => {
|
||||
const itemData = data.data.response.body.items.item;
|
||||
if(!isEmpty(itemData)){
|
||||
if(Array.isArray(itemData)){
|
||||
for(const item of itemData){
|
||||
const locdate = item.locdate;
|
||||
dateFormat(locdate);
|
||||
}
|
||||
}else{
|
||||
const locdate = itemData.locdate;
|
||||
dateFormat(locdate);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('공휴일 불러오기 실패');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const dateFormat = (locdate) => {
|
||||
const day = dayjs(String(locdate) , 'YYYYMMDD');
|
||||
const formatDate = day.format('YYYY년 M월 D일');
|
||||
const targetEle = document.querySelector(`[aria-label="${formatDate}"]`);
|
||||
|
||||
if(targetEle != null){
|
||||
targetEle.style.color = 'red';
|
||||
}
|
||||
}
|
||||
|
||||
const fullCalendarRef = ref(null);
|
||||
|
||||
const handleDateClick = arg => {
|
||||
console.log(arg.dateStr);
|
||||
};
|
||||
|
||||
const moveCalendar = (value = 0) => {
|
||||
const calendarApi = fullCalendarRef.value?.getApi();
|
||||
|
||||
if (value == 1) {
|
||||
calendarApi.prev();
|
||||
} else if (value == 2) {
|
||||
calendarApi.next();
|
||||
} else if (value == 3) {
|
||||
calendarApi.today();
|
||||
}
|
||||
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
// initialDate: this.contectDate, 선택날짜
|
||||
headerToolbar: {
|
||||
left: 'today',
|
||||
center: 'title',
|
||||
right: 'prev,next',
|
||||
},
|
||||
locale: 'kr', // 한국어 설정
|
||||
events: [],
|
||||
eventOrder: 'sortIdx',
|
||||
selectable: true,
|
||||
dateClick: handleDateClick,
|
||||
droppable: false,
|
||||
customButtons: {
|
||||
prev: {
|
||||
text: 'PREV',
|
||||
click: () => {
|
||||
moveCalendar(1);
|
||||
},
|
||||
},
|
||||
today: {
|
||||
text: 'TODAY',
|
||||
click: () => {
|
||||
moveCalendar(3);
|
||||
},
|
||||
},
|
||||
next: {
|
||||
text: 'NEXT',
|
||||
click: () => {
|
||||
moveCalendar(2);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fc-button-group {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
|
||||
.fc-today-button {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.fc-day-sun .fc-col-header-cell-cushion,
|
||||
.fc-day-sun a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.fc-day-sat .fc-col-header-cell-cushion,
|
||||
.fc-day-sat a {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
@ -34,13 +34,19 @@
|
||||
<li class="menu-item" :class="$route.path == '/' ? 'active' : ''">
|
||||
<RouterLink class="menu-link" to="/">
|
||||
<i class="menu-icon tf-icons bx bx-home-smile"></i>
|
||||
<div class="text-truncate" data-i18n="Analytics">Main</div>
|
||||
<div class="text-truncate">Main</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="menu-item" :class="$route.path.includes('/board') ? 'active' : ''">
|
||||
<RouterLink class="menu-link" to="/board">
|
||||
<i class="menu-icon tf-icons bx bx-layout"></i>
|
||||
<div class="text-truncate" data-i18n="Analytics">Board</div>
|
||||
<div class="text-truncate">Board</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
|
||||
<RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
|
||||
<i class="menu-icon tf-icons bx bx-calendar"></i>
|
||||
<div class="text-truncate">Sample</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -26,6 +26,10 @@ const routes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/sample',
|
||||
component: () => import('@c/calendar/SampleCalendar.vue'),
|
||||
},
|
||||
{
|
||||
path: "/:anything(.*)",
|
||||
component: () => import('@v/ErrorPage.vue'),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user