Calendar
Calendar(캘린더) 위젯은 월 단위 달력을 그려 날짜를 보여주고, 셀을 눌러 날짜를 선택하게 하는 위젯입니다.
특정 날짜에 이벤트 점을 표시하고, 월 보기와 주 보기를 전환하며, 날짜 선택·월 이동에 동작을 연결할 수 있습니다.
정의 / 역할
Calendar 위젯은 한 달치 날짜 격자와 헤더(년·월)를 그려줍니다. 사용자가 날짜 셀을 누르면 해당 날짜가 선택되고 onDateSelected 동작이 실행됩니다. 지정한 날짜 목록에는 이벤트 점이 표시되며, 오늘 기준 과거/미래와 이벤트 유무에 따라 색을 다르게 설정할 수 있습니다. 월 보기와 주 보기 두 가지 형식을 지원합니다.
- 카테고리: Contents
- 기본 형식: 월 보기(
month) - 기본 헤더: 오늘 표시 헤더(
todayHeader)
기능
| 기능 | 설명 |
|---|---|
| 날짜 선택 | 날짜 셀을 누르면 해당 날짜가 선택되고 onDateSelected 동작이 실행됩니다. |
| 이벤트 표시 | 지정한 날짜 목록(eventDate)에 이벤트 점을 표시합니다. |
| 형식 전환 | 월 보기와 주 보기를 전환합니다. 형식 전환 바를 표시하거나 숨길 수 있습니다. |
| 월 이동 | 헤더에서 이전·다음 달로 이동하며, 페이지가 바뀌면 onPageChanged 동작이 실행됩니다. |
| 기간 제한 | 선택 가능한 시작일(firstDay)·종료일(lastDay)을 지정합니다. |
| 색·글자 설정 | 과거/미래·선택·이벤트 상태별 색과 헤더·요일·날짜 글자 스타일을 조정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- Calendar 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서 형식(
calendarFormat)·헤더(header) 등 기본 표시를 설정합니다. onDateSelected에 날짜를 선택했을 때 실행할 동작(로직·스크립트)을 연결합니다.- 필요하면 이벤트 날짜·기간 제한·상태별 색을 조정합니다.
속성 (Property)
노트
헤더·요일·날짜 글자 스타일 속성은 글자 색을 제외한 크기·굵기만 설정합니다. 색은 아래 색상 속성으로 지정합니다.
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
calendarFormat | 달력 표시 형식 | month | month, week |
selectedDate | 초기 선택 날짜 | 미지정 | 문자열(날짜) |
firstDay | 선택 가능한 시작일 | 미지정 | 문자열(날짜) |
lastDay | 선택 가능한 종료일 | 미지정 | 문자열(날짜) |
eventDate | 이벤트 점으로 표시할 날짜 목록 | 미지정 | 문자열 목록 |
rowHeight | 날짜 행 높이 | 미지정(런타임 기본 32) | 숫자(px, 0 이상) |
header | 헤더 형태 | todayHeader | todayHeader, arrowHeader |
headerNavMode | 헤더(년·월) 탭 시 날짜 이동 방식 | popup | popup, inline |
headerVisible | 헤더 표시 여부 | true | 참/거짓 |
dayOfWeekVisible | 요일 줄 표시 여부 | true | 참/거짓 |
typeChangeBarVisible | 형식 전환 바 표시 여부 | true | 참/거짓 |
outsideDaysVisible | 이번 달 밖 날짜(앞뒤 달) 표시 여부 | true | 참/거짓 |
headerColor | 헤더 글자·아이콘 색(제목·오늘/화살표) | #FFFFFF | 색상 |
beforeNowDateColor | 오늘 이전 날짜 글자색 | #FFFFFF | 색상 |
beforeNowSelectedDateColor | 오늘 이전 선택 날짜 글자색 | #121212 | 색상 |
beforeNowSelectedBgColor | 오늘 이전 선택 날짜 배경색 | #FAFAFA | 색상 |
afterNowDateColor | 오늘 이후 날짜 글자색 | #A0A0A0 | 색상 |
afterNowSelectedDateColor | 오늘 이후 선택 날짜 글자색 | #A0A0A0 | 색상 |
afterNowSelectedBgColor | 오늘 이후 선택 날짜 배경색 | #FAFAFA | 색상 |
beforeNowEventDateColor | 오늘 이전 이벤트 날짜 글자색 | #FFCB00 | 색상 |
beforeNowEventSelectedDateColor | 오늘 이전 이벤트 선택 날짜 글자색 | #121212 | 색상 |
beforeNowEventSelectedBgColor | 오늘 이전 이벤트 선택 날짜 배경색 | #FFCB00 | 색상 |
afterNowEventDateColor | 오늘 이후 이벤트 날짜 글자색 | #84C13D | 색상 |
afterNowEventSelectedDateColor | 오늘 이후 이벤트 선택 날짜 글자색 | #FFFFFF | 색상 |
afterNowEventSelectedBgColor | 오늘 이후 이벤트 선택 날짜 배경색 | #84C13D | 색상 |
dayOfWeekTextColor | 요일 글자색 | #616161 | 색상 |
dragBarColor | 형식 전환(드래그) 바 색 | #FFFFFF | 색상 |
disabledColor | 비활성(선택 불가) 날짜 색 | #4D4D4D | 색상 |
headerTitleTextStyle | 헤더 제목 글자 스타일 (색 제외) | 13px, 굵기 600 | 텍스트 스타일 |
headerActionTextStyle | 헤더 액션 글자 스타일 (색 제외) | 13px, 굵기 500 | 텍스트 스타일 |
monthPickerTextStyle | 월 선택 글자 스타일 (색 제외) | 13px | 텍스트 스타일 |
dayOfWeekTextStyle | 요일 글자 스타일 (색 제외) | 14px | 텍스트 스타일 |
dayTextStyle | 날짜 글자 스타일 (색 제외) | 14px | 텍스트 스타일 |
주의 / 팁
팁
날짜 셀의 색은 오늘 기준 과거(beforeNow*)/미래(afterNow*)와 이벤트 유무·선택 여부의 조합으로 결정됩니다. 상태별 색을 각각 지정할 수 있습니다.
노트
headerTitleTextStyle·dayTextStyle 등 글자 스타일 속성에서는 글자 색이 제외되어 있습니다. 글자색은 beforeNowDateColor·dayOfWeekTextColor 등 별도 색상 속성으로 지정합니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Calendar (캘린더) Widget Control 문서에서 확인하세요.