Blazor 캘린더 개요

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

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

    Blazor Calendar Example

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

    How To Create a Calendar in Blazor with Ignite UI

    ​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 />

    Selection Modes

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

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

    Range Selection

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

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

    Active View and Date

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

    Week numbers

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

    <IgbCalendar ShowWeekNumbers="true" />

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

    Multiple Months

    ​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 보다.

    Styling

    구성 요소는 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 구성을 보여줍니다.

    API References

    Additional Resources