WPF Calendar Component를 이용한 년 또는 월 선택 하기

WPF의  Calendar Component를 이용하여 UI에서 년 또는 월을 선택하는 방법에 대해서 알아보겠습니다.

 

1. WPF UI에서 Calendar를 추가합니다.

 

2. 아래와 같이 Calendar Component를 세개 추가합니다.

   두번째는 월 선택, 세번째는 년 선택을 할 수 있도록 할 겁니다.

 

2. 두번째 Calendar를 선택하고, 속성 중에 DisplayMode를 Year로 변경합니다.

   * Display Mode

     (1) Month : 한달의 일을 표시

     (2) Year : 1년의 월을 표시

     (3) Decade : 10년의 년을 표시

 

3. 세번째 Calendar를 선택하고, 속성 중에 DisplayMode를 Decade로 변경합니다.

 

4. 프로젝트를 실행하면 아래와 같이 일, 월, 년 Calendar가 표시됩니다.

 

5. 하지만 아래과 같이 두번째와 세번째의 Calendar에서 월 또는 년을 선택하면 Display Mode가 변경된다.

 

 

6. 두번째 Calendar에서 월을 선택 시 Display Mode가 변경되지 않게 하기 위해서 DisplayModeChagned 이벤트를 추가합니다.

 

7. 아래의 DisplayModeChamged 이벤트에서 DispayMode를 Year로 변경하여 Display Mode가 변경되는 것을 방지합니다.

private void calendar2_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
    calendar2.DisplayMode = CalendarMode.Year;
}

 

 

8. 세번째 Calendar에서 년을 선택 시 Display Mode가 변경되지 않게 하기 위해서 DisplayModeChagned 이벤트를 추가합니다.

 

9. 아래의 DisplayModeChamged 이벤트에서 DispayMode를 Decade로 변경하여 Display Mode가 변경되는 것을 방지합니다.

private void calendar3_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
    calendar3.DisplayMode = CalendarMode.Decade;
}

 

10. 아래와 같이 월 및 년을 선택해도 Display Mode가 변경되지 않습니다.

 

11. 월 또는 년을 선택 시 이벤트를 발생하기 위해서 PreviewMouseUp 이벤트를 추가합니다.

 

12. 아래의 코드와 같이 월 또는 년이 선택되었을 때 Message Box를 표시합니다.

private void calendar2_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show(calendar2.DisplayDate.ToString("yyyy-MM"));
}

 

 

13. 아래와 같이 정상적으로 작동하는 것을 보실 수 있습니다.

    개발에 따라 해당 방법을 적용해서 사용하길 바랍니다.