BarCalender · 한 줄 달력

<syn_barcalender>는 한 줄에서 날짜 또는 월 하나를 선택하는 HandStack 컨트롤입니다. syn.uicontrols.$barcalender로 제어하며 새 외부 라이브러리 없이 기존 Tabler 스타일을 사용합니다. 이름은 디렉터리와 동일하게 BarCalender입니다.

<syn_barcalender id="calDate" syn-datafield="SelectedDate"
    syn-events="['change','viewChange']"
    syn-options="{mode:'day'}"></syn_barcalender>
<syn_barcalender id="calMonth" syn-datafield="SelectedMonth"
    syn-options="{mode:'month'}"></syn_barcalender>

syn.uicontrols.$barcalender.setValue('calDate', '2024-02-29');
syn.uicontrols.$barcalender.getValue('calDate'); // '2024-02-29'
syn.uicontrols.$barcalender.clear('calDate'); // 선택만 해제, 표시 월 유지

day: YYYY-MM-DD, month: YYYY-MM 문자열을 사용하며, 선택이 없으면 ''입니다.
초기 선택은 없습니다. 현재 연도·월만 표시합니다. 오늘·이번 달은 밑줄, 선택값은 테두리로 구분합니다.
일별 이전·다음 이동과 연도·월 변경은 표시 기간만 바꿉니다. 다른 달에 선택한 날짜도 값으로 유지됩니다.
월별 이전·다음 이동은 이전·다음 월을 선택합니다. 연도 변경은 기존 선택 월을 유지하며 선택이 없으면 값도 비어 있습니다.
좁은 화면에서는 버튼 영역만 가로 스크롤됩니다. Tab으로 이동하고 Enter·Space로 버튼을 선택할 수 있습니다.
syn-datafield, belongID와 기존 거래의 Form/Row 매핑으로 읽기·쓰기를 지원합니다. 별도 서버 API는 필요 없습니다.
초기화·프로그램을 통한 값 설정·초기화는 이벤트를 발생시키지 않습니다.

API · 실행 예제 · 통합 샘플

옵션과 이벤트

자세한 기본값·메서드·유효한 날짜 형식은 API 문서를 참고하세요. 실행 예제에는 일별·월별, 강조 표시, 비활성화·읽기 전용과 로컬 Form/Row 바인딩이 포함되어 있습니다.

let $mypage = {
    event: {
        calDate_change(evt) {
            console.log(evt.detail.value, evt.detail.previousValue);
        },
        calDate_viewChange(evt) {
            console.log(evt.detail.year, evt.detail.month);
        }
    }
};

highlights는 모드별 값 문자열을 CSS 클래스에 매핑합니다. 예를 들어 highlights: {'2024-02-29': 'bg-orange-lt'}로 특정 날짜를 강조할 수 있습니다. 달력은 Tab·Enter·Space로 조작하며 선택값과 오늘 표시를 따로 제공합니다.

옵션과 이벤트​

옵션과 이벤트