달력 날씨인데 안쓸듯..
This commit is contained in:
parent
fc32aba4ab
commit
b047436e32
@ -60,7 +60,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { inject, onMounted, reactive, ref, watch, computed } from 'vue';
|
||||
import { fetchHolidays } from '@c/calendar/holiday';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
import { useProjectStore } from '@/stores/useProjectStore';
|
||||
@ -437,18 +437,49 @@
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
// 달력 이벤트 아이콘 표시 함수
|
||||
// 날씨 아이콘 URL 가져오는 함수
|
||||
const getWeatherIconUrl = iconCode => {
|
||||
if (iconCode === '01d' || iconCode === '01n') {
|
||||
return '/img/icons/sunny-custom.png';
|
||||
}
|
||||
// @2x 제거하여 일반 크기 아이콘 사용
|
||||
return `https://openweathermap.org/img/wn/${iconCode}.png`;
|
||||
};
|
||||
|
||||
// 날씨 아이콘 클래스 가져오는 함수
|
||||
const getWeatherIconClass = iconCode => {
|
||||
if (iconCode === '01d' || iconCode === '01n') {
|
||||
return 'custom-sunny-icon';
|
||||
}
|
||||
return 'weather-icon';
|
||||
};
|
||||
|
||||
// 먼저 handleEventContent 함수 선언
|
||||
const handleEventContent = item => {
|
||||
if (!item.event) return null;
|
||||
|
||||
// 공휴일인 경우 텍스트로 표시
|
||||
// 날씨 이벤트인 경우
|
||||
if (item.event.classNames?.includes('weather-event')) {
|
||||
const weather = item.event.extendedProps;
|
||||
return {
|
||||
html: `
|
||||
<div class="weather-info">
|
||||
<img src="${weather.iconUrl}"
|
||||
class="${weather.iconClass}"
|
||||
style="width: 20px; height: 20px; display: block;" />
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
}
|
||||
|
||||
// 공휴일인 경우
|
||||
if (item.event.classNames?.includes('holiday-event')) {
|
||||
return {
|
||||
html: `<div class="holiday-text" style="color: white;">${item.event.title}</div>`,
|
||||
};
|
||||
}
|
||||
|
||||
// 현재 이벤트의 타입만 확인
|
||||
// 기존의 다른 이벤트 처리 코드...
|
||||
const eventType = item.event.extendedProps.type;
|
||||
if (!eventType) return null;
|
||||
|
||||
@ -481,7 +512,40 @@
|
||||
};
|
||||
};
|
||||
|
||||
// 캘린더 옵션 설정
|
||||
// 날씨 이벤트 추가 함수
|
||||
const addWeatherEvent = (date, weatherInfo) => {
|
||||
calendarEvents.value.push({
|
||||
start: date,
|
||||
type: 'weather',
|
||||
classNames: ['weather-event'],
|
||||
extendedProps: {
|
||||
weatherIcon: weatherInfo.icon,
|
||||
iconUrl: getWeatherIconUrl(weatherInfo.icon),
|
||||
iconClass: getWeatherIconClass(weatherInfo.icon),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// dailyWeatherList 변화 감지 및 날씨 정보 추가
|
||||
watch(
|
||||
dailyWeatherList,
|
||||
newWeatherList => {
|
||||
if (!newWeatherList?.length) return;
|
||||
|
||||
console.log(123);
|
||||
// 기존 날씨 이벤트 제거
|
||||
calendarEvents.value = calendarEvents.value.filter(event => !event.classNames?.includes('weather-event'));
|
||||
|
||||
// 새로운 날씨 정보 추가
|
||||
newWeatherList.forEach(weatherInfo => {
|
||||
const date = $common.dateFormatter(weatherInfo.date, 'YMD');
|
||||
addWeatherEvent(date, weatherInfo);
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 캘린더 옵션에 eventContent 설정
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
@ -500,10 +564,26 @@
|
||||
dateClick: handleDateClick,
|
||||
dayCellDidMount: arg => {
|
||||
const dateCell = arg.el;
|
||||
|
||||
// 마우스 홀드시 이벤트 모달
|
||||
dateCell.addEventListener('mousedown', e => {
|
||||
const date = $common.dateFormatter(arg.date, 'YMD');
|
||||
|
||||
// 날짜 숫자가 있는 요소 찾기
|
||||
const dateCellNumber = dateCell.querySelector('.fc-daygrid-day-number');
|
||||
|
||||
// 해당 날짜의 날씨 이벤트 찾기
|
||||
const weatherEvent = calendarEvents.value.find(
|
||||
event => event.classNames?.includes('weather-event') && $common.dateFormatter(event.start, 'YMD') === date,
|
||||
);
|
||||
|
||||
// 날씨 이벤트가 있으면 아이콘 추가
|
||||
if (weatherEvent && dateCellNumber) {
|
||||
const weatherIcon = document.createElement('img');
|
||||
weatherIcon.src = weatherEvent.extendedProps.iconUrl;
|
||||
weatherIcon.className = 'date-weather-icon';
|
||||
dateCellNumber.appendChild(weatherIcon);
|
||||
}
|
||||
|
||||
// 기존의 마우스 이벤트 핸들러들
|
||||
dateCell.addEventListener('mousedown', e => {
|
||||
handleMouseDown(date, e);
|
||||
});
|
||||
dateCell.addEventListener('mouseup', handleMouseUp);
|
||||
@ -562,7 +642,7 @@
|
||||
if (!weatherStore.dailyWeatherList?.length) {
|
||||
await weatherStore.getWeatherInfo();
|
||||
//dailyWeatherList.value = weatherStore.dailyWeatherList;
|
||||
console.log('dailyWeatherList.value: ', dailyWeatherList.value);
|
||||
//console.log('dailyWeatherList.value: ', dailyWeatherList.value);
|
||||
}
|
||||
|
||||
// 이벤트 카테고리 호출
|
||||
@ -607,4 +687,77 @@
|
||||
::v-deep(.fc-daygrid-event-harness:has(.holiday-event)) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 날씨 정보 스타일 */
|
||||
.weather-info {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.weather-info img,
|
||||
.weather-icon,
|
||||
.custom-sunny-icon {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
min-width: 20px !important;
|
||||
min-height: 20px !important;
|
||||
max-width: 20px !important;
|
||||
max-height: 20px !important;
|
||||
object-fit: contain !important;
|
||||
display: block !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 날씨 이벤트가 있는 셀의 스타일 조정 */
|
||||
.fc-daygrid-day-events .weather-event {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
z-index: 1;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 추가적인 제어를 위한 스타일 */
|
||||
.weather-event * {
|
||||
max-width: 20px !important;
|
||||
max-height: 20px !important;
|
||||
}
|
||||
|
||||
/* 다른 이벤트와의 겹침 방지 */
|
||||
.fc-daygrid-day-events {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 기존 날씨 관련 스타일은 제거하고 새로운 스타일 추가 */
|
||||
.fc-daygrid-day-number {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 4px !important;
|
||||
}
|
||||
|
||||
.date-weather-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
object-fit: contain !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
/* 날씨 이벤트 숨기기 (이제 날짜 옆에 표시되므로) */
|
||||
.weather-event {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user