RwCalendar
일정과 업무 항목을 달력에서 조회하고 날짜 이동, 일정 선택과 기간 변경을 처리하는 구성요소입니다. 조회 화면은 표시 기간이 바뀔 때 데이터를 다시 가져오고, 편집 화면은 날짜나 일정 이벤트를 업무 로직에 연결합니다.
화면 구성
달력 상단에서 조회 월을 이동할 수 있고, 본문에는 CalendarEvent 목록이 날짜별로 표시됩니다. CalendarMaxWidth의 기본값은 1200px이며, 일정별 추가 명령이 필요한 경우 IsShowDropDownMenu를 켜고 DropdownMenu 목록을 함께 바인딩합니다.
주요 연결 항목
| 항목 | 형식 | 용도 |
|---|---|---|
DataBind |
일정·메뉴 목록 | 조회한 일정을 달력에 반영 |
OnSearchDateChanged |
EventCallback<string> |
사용자가 조회 날짜를 이동했을 때 재조회 |
OnDateClicked |
EventCallback<string> |
일정이 없는 날짜 영역 선택 |
OnEventClicked |
EventCallback<string> |
기존 일정 선택 |
OnEventUpdated |
EventCallback<CalendarEvent> |
드래그 등으로 일정 기간이 바뀐 결과 전달 |
OnDropMenuClicked |
EventCallback<DropdownMenu> |
일정의 추가 명령 처리 |
데이터 조회
초기 화면과 조회 월 변경 시 서버에서 필요한 기간만 조회한 다음 DataBind(items, dropdowns)를 호출합니다. 화면에 표시되는 일정에는 중복되지 않는 식별자를 넣어야 선택과 이동 이벤트가 같은 업무 항목을 찾을 수 있습니다.
날짜 선택
빈 날짜를 누르면 OnDateClicked가 호출됩니다. 새 일정 작성 화면을 열 때는 전달된 날짜를 기본 시작일로 사용하되, 서버 저장 시 사용자의 시간대와 업무 기준일을 다시 확인합니다.
일정 선택과 변경
기존 일정을 누르면 OnEventClicked로 일정 식별자가 전달됩니다. 일정의 기간을 화면에서 변경하면 OnEventUpdated가 호출되므로, 권한과 중복 일정을 검증한 뒤 저장합니다. 저장에 실패하면 달력 데이터를 다시 조회해 화면과 서버 상태를 맞춥니다.
추가 메뉴
복사, 완료 처리나 담당자 변경처럼 일정마다 필요한 작업은 DropdownMenu로 제공합니다. 메뉴는 선택한 일정의 권한과 상태에 맞춰 구성하고, OnDropMenuClicked에서 실제 작업을 실행합니다.
사용 예
<RwCalendar @ref="calendar"
OnSearchDateChanged="LoadMonth"
OnDateClicked="CreateSchedule"
OnEventClicked="OpenSchedule"
OnEventUpdated="MoveSchedule" />
조회 후에는 await calendar.DataBind(events);를 호출합니다. 화면에서 임의로 만든 날짜 문자열을 그대로 저장하지 말고, API 계약의 날짜 형식으로 변환합니다.
문제 확인
- 서버와 브라우저 시간대 차이로 시작일이나 종료일이 하루씩 이동하지 않는지 확인합니다.
- 일정 이동 결과를 저장하기 전에 현재 사용자에게 수정 권한이 있는지 확인합니다.
- 한 날짜에 일정이 많을 때 잘림과 추가 목록 진입 방법을 제공합니다.
- 재조회 중 이전 데이터가 남아 선택 대상이 바뀌지 않도록 합니다.