Blazor 캘린더 개요

Ignite UI for Blazor Calendar 구성 요소는 가볍고 구성하기 쉽습니다. 날짜와 요일을 표시하는 데 사용됩니다. 또한 최종 사용자에게 월별 또는 연간 뷰를 제공하는 가장 좋은 방법이기도 합니다. Ignite UI for Blazor Calendar 컨트롤을 사용하면 사람들이 탐색할 수 있는 최소 및 최대 날짜 범위를 제한할 수 있습니다.

Ignite UI Ignite UI for Blazor Calendar는 날짜 정보를 표시하는 쉽고 직관적인 방법을 제공합니다. 단일 또는 다중 날짜 선택 모드, 날짜 범위 강조 및 선택, 키보드 탐색, 주 번호 활성화, 크기 및 간격 옵션 등과 같은 다양한 기능이 포함되어 있습니다.

Blazor 달력 예제

다음 Blazor IgbCalendar 구성 요소 예제는 단일 일 선택 모드가 있는 기본 달력을 보여줍니다. 작동 방식을 보거나 코드 뒤에 있는 내용을 검사하세요.

Ignite UI를 사용하여 Blazor에서 캘린더를 만드는 방법

IgbCalendar 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));

또한 Ignite UI for Blazor IgbCalendar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

Ignite UI for Blazor 사용을 시작하는 가장 간단한 방법 IgbCalendar 다음과 같습니다:

<IgbCalendar />

선택 모드

사용자는 단일 선택, 다중 선택 또는 범위 선택의 세 가지 선택 모드 중에서 선택할 수 있습니다. 기본적으로 Ignite UI for Blazor IgbCalendar 단일 선택 모드를 사용하고 있지만 설정을 통해 변경할 수 있습니다. Selection이 예에서 표시된 것과 같은 속성입니다.

<IgbCalendar Selection="@CalendarSelection.Multiple" />

범위 선택

동일한 접근 방식에 따라 Selection 범위 모드로 전환할 수 있습니다.

<IgbCalendar Selection="@CalendarSelection.Range" />

Active View 및 날짜

Ignite UI for Blazor 하면 일, 월, 년의 세 가지 다른 보기 간에 전환할 수 있습니다. 구성 요소의 ActiveView 속성은 현재 보기를 반영합니다. 기본적으로 Calendar는 처음 로드될 때 현재 날짜를 표시합니다. ActiveDate 속성을 설정하여 이를 수정할 수 있습니다. ActiveDate 속성은 또한 최종 사용자가 현재 표시되는 날짜에 대해 변경한 내용을 반영합니다.

주 번호

ShowWeekNumbers 속성을 사용하여 Calendar 구성 요소의 주 번호를 표시할 수 있습니다. 다음과 같이 해당 부울 속성 show-week-numbers 사용하여 이를 수행할 수 있습니다.

<IgbCalendar ShowWeekNumbers="true" />

다음 데모에서는 주 번호가 활성화된 달력을 보여줍니다.

여러 달

VisibleMonths 속성을 사용하면 달력이 days 보기일 때 한 달 이상을 표시할 수 있습니다. 여러 달이 표시되는 경우 Orientation 속성을 사용하여 세로로 쌓을지 가로로 쌓을지 구성할 수 있습니다. 기본적으로 Orientation 속성은 horizontal으로 설정됩니다.

달력에는 이전 및 다음 달의 선행 및 후행 날짜가 표시됩니다. HideOutsideDays 속성을 true로 설정하거나 해당 부울 속성 HideOutsideDays 사용하여 이러한 날짜를 숨길 수 있습니다.

<IgbCalendar VisibleMonths="2" HideOutsideDays="true" />

다음 샘플은 여러 달 구성을 보여줍니다.

크기

--ig-size CSS 변수를 사용하여 달력 내부 요소의 크기와 간격을 제어할 수 있습니다. 구성 요소의 기본 크기는 큽니다.

이벤트

Calendar 구성 요소는 최종 사용자가 선택한 날짜를 변경할 때 Change 이벤트를 발생시킵니다. 다음과 같이 이벤트를 구독할 수 있습니다.

<IgbCalendar Change="@OnCalendarChange" /> @code { public void OnCalendarChange(IgbComponentDataValueChangedEventArgs args) { } }

Tab 키를 사용하여 페이지를 탐색하는 경우 W3 접근성 권장 사항에 따라 IgbCalendar에 다음 탭 정지가 도입된다는 점을 명심해야 합니다.

월 선택 버튼
연도 선택 버튼
이전 버튼
다음 버튼
활성 날짜 요소

언제 일/월/년에서 IgbCalendar 구성요소에 초점이 맞춰져 있으면 다음을 사용하세요.

PageUp 키는 이전 월/년/년 페이지로 이동합니다.
PageDown 키를 누르면 다음 달/연도/연도 페이지로 이동합니다.
이번 달의 첫날/보기의 첫 번째 달/보기의 첫 해에 초점을 맞추는 홈 키입니다.
이번 달의 마지막 날/보기의 마지막 달/보기의 마지막 연도에 초점을 맞추는 종료 키입니다.
일/월/년을 탐색하려면 화살표 키를 사용하세요. 첫 번째 항목 앞과 마지막 항목 뒤를 탐색하면 보기가 다음/이전 월/년/년 페이지로 전환됩니다.

언제 낮 안에 days 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

이전 연도로 이동하려면 Shift + PageUp 키를 누르세요.
다음 연도로 이동하려면 Shift + PageDown 키를 누르세요.
현재 초점을 맞춘 날짜를 선택하려면 Space 또는 Enter 키를 누르세요.

언제 월 안에 months 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

공간 또는 입력하다 변경하는 키 ActiveDate 현재 집중된 달로 전환하고 days 보다.

때 년도 안에 years 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

공간 또는 입력하다 변경하는 키 ActiveDate 현재 초점을 맞춘 연도로 전환하고 months 보다.

이전 또는 다음 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

이전/다음 달/연도/년 페이지로 전환하려면 스페이스 또는 Enter 키를 누르세요.

하위 헤더에 있는 월 버튼에 초점이 맞춰지면 다음을 사용하세요.

공간 또는 입력하다 전환할 키 months 보다.

연도 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

공간 또는 입력하다 전환할 키 years 보다.

스타일링

구성 요소는 IgbCalendar 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 노출된 모든 CSS 부분이 나열되어 있습니다.

이름	설명
`header`	헤더 요소입니다.
`header-title`	헤더 제목 요소입니다.
`header-date`	헤더 날짜 요소입니다.
`content`	보기 및 탐색 요소를 포함하는 콘텐츠 요소입니다.
`navigation`	탐색 컨테이너 요소입니다.
`months-navigation`	월 탐색 버튼 요소입니다.
`years-navigation`	연도 탐색 버튼 요소입니다.
`years-range`	연도 범위 요소입니다.
`navigation-buttons`	탐색 버튼 컨테이너입니다.
`navigation-button`	이전/다음 탐색 버튼입니다.
`days-view-container`	일 보기 컨테이너 요소입니다.
`days-view`	일별 보기 요소입니다.
`months-view`	월 보기 요소입니다.
`years-view`	연도 보기 요소입니다.
`days-row`	일수 행 요소입니다.
`label`	주 헤더 레이블 요소입니다.
`week-number`	주 번호 요소.
`week-number-inner`	주 번호 내부 요소입니다.
`date`	날짜 요소.
`date-inner`	날짜 내부 요소.
`first`	처음 선택한 날짜 요소입니다.
`last`	마지막으로 선택한 날짜 요소입니다.
`inactive`	비활성 날짜 요소.
`hidden`	숨겨진 날짜 요소.
`weekend`	주말 날짜 요소.
`range`	선택한 요소의 범위를 지정합니다.
`special`	특수 날짜 요소.
`disabled`	비활성화된 날짜 요소입니다.
`single`	단일 선택된 날짜 요소.
`preview`	범위 선택 미리보기 날짜 요소입니다.
`month`	월 요소.
`month-inner`	월 내부 요소.
`year`	연도 요소.
`year-inner`	연도 내부 요소.
`selected`	선택된 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.
`current`	현재 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.

이러한 CSS 부분을 사용하여 다음과 같이 구성 요소의 모양을 IgbCalendar 사용자 지정할 수 있습니다.

igc-calendar::part(date-inner selected), igc-calendar::part(month-inner selected), igc-calendar::part(year-inner selected), igc-calendar::part(month-inner selected):focus, igc-calendar::part(year-inner selected):focus { background: var(--ig-primary-500); border-color: var(--ig-primary-800); } igc-calendar::part(date-inner selected):hover, igc-calendar::part(month-inner selected):hover, igc-calendar::part(year-inner selected):hover { background: var(--ig-primary-500); border-color: var(--ig-primary-800); } igc-calendar::part(label), igc-calendar::part(navigation-button), igc-calendar::part(months-navigation):hover, igc-calendar::part(months-navigation):focus, igc-calendar::part(years-navigation):hover, igc-calendar::part(years-navigation):focus { color: var(--ig-primary-300); } igc-calendar::part(navigation-button):hover, igc-calendar::part(navigation-button):focus { color: var(--ig-primary-800); }

다음 샘플은 위의 CSS 구성을 보여줍니다.