Calendar는 월간/주간 보기, 날짜 선택, 선택 가능 기간 제한 등 다양한 일정 선택 기능을 제공합니다.

입력창과 연동하거나 특정 날짜를 활성화·비활성화하는 등 다양한 화면에서 사용할 수 있습니다.

coForward Calendar는 웹 화면에서 월간 또는 주간 달력을 표시하고 날짜를 선택하기 위한 사내 공통 JavaScript 컴포넌트입니다.

이 문서에서 다루는 기능

필수 준비물

• coForward_Calendar 클래스 파일
• 캘린더 전용 CSS
• 달력을 표시할 HTML 요소
• ES Module을 지원하는 브라우저 또는 프로젝트 번들러

HTML 작성

달력 컨테이너와 선택 결과를 표시할 입력 요소를 준비합니다.

<link rel="stylesheet" href="/path/to/coForward_calendar.css">

<label for="selectedDate">선택 날짜</label>
<input id="selectedDate" type="text" readonly>

<div id="calendar"></div>

<script type="module" src="/js/calendar-page.js"></script>

2-2. 클래스 불러오기

페이지용 JavaScript 파일에서 클래스를 import합니다.

// calendar-page.js
import coForward_Calendar from '/path/to/coForward_calendar.js';

캘린더는 다음 순서로 생성합니다.

import coForward_Calendar from '/path/to/coForward_calendar.js';

const container = document.getElementById('calendar');

if (!container) {
    throw new Error('캘린더 컨테이너를 찾을 수 없습니다.');
}

const calendar = new coForward_Calendar();

calendar.lang = 'ko';
calendar.type = 'month';
calendar.multiSelect = false;
calendar.displayOverflowDate = true;

calendar.render(container);

기본 적용 순서

HTML 컨테이너 준비
↓
클래스 import
↓
인스턴스 생성
↓
옵션과 콜백 설정
↓
render(container) 호출

월간·주간 보기

type으로 달력 표시 방식을 지정합니다.

calendar.type = 'month';

실행 중 표시 방식을 변경한 경우 다시 렌더링합니다.

calendar.setType('week');
calendar.render();

요일 언어

lang으로 요일 표시 언어를 지정합니다.

calendar.lang = 'ko';

실행 중 언어를 변경한 경우 다시 렌더링합니다.

calendar.setLang('en');
calendar.render();

4-3. 이전·다음 달 날짜 표시

월간 보기에서 이전 달과 다음 달 날짜의 표시 여부를 지정합니다.

calendar.displayOverflowDate = true;  // 표시
calendar.displayOverflowDate = false; // 숨김

속성을 변경한 뒤에는 render()를 다시 호출합니다.

특정 날짜가 있는 화면으로 이동

calendar.setDate('2026-07-15T00:00:00');

setDate()는 지정한 날짜가 포함된 화면으로 이동하고 달력을 다시 렌더링합니다.

단일 날짜 선택

기본값은 단일 선택입니다.

calendar.multiSelect = false;

onDateSelect에는 선택한 날짜가 YYYY-MM-DD 문자열로 전달됩니다.

const selectedDateInput = document.getElementById('selectedDate');

calendar.onDateSelect = (date) => {
    selectedDateInput.value = date;
};

다중 날짜 선택

여러 날짜를 선택하려면 multiSelect를 활성화합니다.

calendar.multiSelect = true;
calendar.multiLimit = 3;

다중 선택 결과는 필요한 시점에 getSelectedDate()로 조회합니다.

<button id="confirmDates" type="button">선택 확인</button>
<button id="clearDates" type="button">선택 초기화</button>

const confirmButton = document.getElementById('confirmDates');
const clearButton = document.getElementById('clearDates');

confirmButton.addEventListener('click', () => {
    const selectedDates = [...calendar.getSelectedDate()];
    console.log('선택 날짜:', selectedDates);
});

clearButton.addEventListener('click', () => {
    calendar.removeSelect();
});

5-3. 선택 결과 초기화

calendar.removeSelect();

removeSelect()는 선택 데이터와 화면의 선택 표시를 함께 초기화합니다.

minDate와 maxDate로 선택 가능한 전체 기간을 제한합니다.

날짜 경계가 브라우저 시간대의 영향을 받지 않도록 로컬 날짜 객체를 만들어 사용하는 방식을 권장합니다.

function toLocalDate(dateText) {
    const [year, month, day] = dateText.split('-').map(Number);
    return new Date(year, month - 1, day);
}

calendar.minDate = toLocalDate('2026-07-01');
calendar.maxDate = toLocalDate('2026-07-31');

실행 중 날짜 범위를 변경한 경우 다시 렌더링합니다.

calendar.setMinDate(toLocalDate('2026-08-01'));
calendar.setMaxDate(toLocalDate('2026-08-31'));
calendar.render();

날짜 셀에 일정 개수나 상태를 표시하려면 content와 contentMaker를 함께 사용합니다.

날짜별 데이터 등록

calendar.content = [
    { date: '2026-07-03', content: 2 },
    { date: '2026-07-08', content: 5 }
];

date는 반드시 두 자리 월·일을 포함한 YYYY-MM-DD 형식으로 작성합니다.

화면 요소 생성

contentMaker는 등록한 content 값을 인자로 받고, 화면에 추가할 DOM 노드를 반환해야 합니다.

calendar.contentMaker = (value) => {
    const badge = document.createElement('span');
    badge.className = 'calendar-badge';
    badge.textContent = `${value}건`;
    return badge;
};

.calendar-badge {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

아래 예제는 한국어 월간 달력, 단일 날짜 선택, 날짜 범위 제한, 입력 요소 연동을 한 번에 적용합니다.

HTML

<link rel="stylesheet" href="/path/to/coForward_calendar.css">

<label for="reservationDate">예약일</label>
<input id="reservationDate" type="text" readonly>

<div id="calendar"></div>

<script type="module" src="/js/reservation-calendar.js"></script>

JavaScript

import coForward_Calendar from '/path/to/coForward_calendar.js';

function toLocalDate(dateText) {
    const [year, month, day] = dateText.split('-').map(Number);
    return new Date(year, month - 1, day);
}

const container = document.getElementById('calendar');
const reservationInput = document.getElementById('reservationDate');

if (!container || !reservationInput) {
    throw new Error('캘린더 적용에 필요한 HTML 요소가 없습니다.');
}

const calendar = new coForward_Calendar();

calendar.lang = 'ko';
calendar.type = 'month';
calendar.multiSelect = false;
calendar.displayOverflowDate = true;
calendar.minDate = toLocalDate('2026-07-01');
calendar.maxDate = toLocalDate('2026-12-31');

calendar.onDateSelect = (date) => {
    reservationInput.value = date;
};

calendar.render(container);

달력이 표시되지 않습니다.

다음 항목을 확인합니다.

1. 클래스 파일이 올바른 경로에서 import되었는지 확인합니다.
2. 캘린더 컨테이너가 실제로 존재하는지 확인합니다.
3. render(container)를 호출했는지 확인합니다.
4. 캘린더 CSS가 로드되었는지 확인합니다.
5. 브라우저 개발자 도구의 Console 오류를 확인합니다.

const container = document.getElementById('calendar');
console.log(container);

설정을 변경했지만 화면이 그대로입니다.

일반 속성은 변경 후 다시 렌더링합니다.

calendar.lang = 'en';
calendar.type = 'week';
calendar.render();

날짜 선택 후 입력값이 바뀌지 않습니다.

onDateSelect가 함수로 등록되어 있는지, 입력 요소가 존재하는지 확인합니다.

calendar.onDateSelect = (date) => {
    document.getElementById('selectedDate').value = date;
};

날짜 콘텐츠가 표시되지 않습니다.

다음 두 항목을 확인합니다.

• content[].date가 YYYY-MM-DD 형식인지 확인합니다.
• contentMaker가 문자열이 아니라 DOM 노드를 반환하는지 확인합니다.

주요 속성

주요 메서드

© team coForward