[vue.js] 캘린더에 한국 공휴일 등록

1. 공공데이터포털 API 사용

const getHolidays = async (year) => {
  const serviceKey = '인증키';
  const url = `http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo?serviceKey=${serviceKey}&solYear=${year}&numOfRows=100`;
  
  try {
    const response = await axios.get(url);
    const holidays = {};
    
    response.data.response.body.items.item.forEach(item => {
      const date = item.locdate.toString();
      const formattedDate = `${date.substring(0,4)}-${date.substring(4,6)}-${date.substring(6,8)}`;
      holidays[formattedDate] = item.dateName;
    });
    
    return holidays;
  } catch (error) {
    console.error('공휴일 정보 조회 실패:', error);
    return {};
  }
};

 

 

2. 구글 캘린더 API 사용

const getHolidays = async (year) => {
  const calendarId = 'ko.south_korea#holiday@group.v.calendar.google.com';
  const apiKey = 'API_키';
  const url = `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events?key=${apiKey}&timeMin=${year}-01-01T00:00:00Z&timeMax=${year}-12-31T23:59:59Z`;
  
  try {
    const response = await axios.get(url);
    const holidays = {};
    
    response.data.items.forEach(item => {
      const date = item.start.date;
      holidays[date] = item.summary;
    });
    
    return holidays;
  } catch (error) {
    console.error('공휴일 정보 조회 실패:', error);
    return {};
  }
};

 

3. 외부 라이브러리 사용

ex) holiday-kr

import holidays from 'holiday-kr';

const holidays = getHolidays(new Date().getFullYear());

- 대체공휴일 표시 안 됨