Widok kalendarza

Widok kalendarza umożliwia użytkownikowi wyświetlanie kalendarza i interakcję z nim, który może nawigować według miesiąca, roku lub dekady. Użytkownik może wybrać jedną datę lub zakres dat. Nie ma powierzchni wybieraka, a kalendarz jest zawsze widoczny.

Czy jest to właściwa kontrola?

Użyj widoku kalendarza, aby umożliwić użytkownikowi wybranie pojedynczej daty lub zakresu dat z zawsze widocznego kalendarza.

Jeśli musisz zezwolić użytkownikowi na wybranie wielu dat jednocześnie, musisz użyć widoku kalendarza. Jeśli użytkownik ma wybrać tylko jedną datę i nie potrzebuje stałej widoczności kalendarza, rozważ użycie narzędzia wyboru daty z kalendarza lub narzędzia wyboru daty .

Aby uzyskać więcej informacji na temat wybierania właściwej kontrolki, zobacz artykuł Kontrolki daty i godziny .

Przykłady

Widok kalendarza składa się z 3 oddzielnych widoków: widoku miesiąca, widoku roku i widoku dekady. Domyślnie rozpoczyna się od otwartego widoku miesiąca. Widok uruchamiania można określić, ustawiając właściwość DisplayMode.

Użytkownicy klikają nagłówek w widoku miesiąca, aby otworzyć widok roku, a następnie klikają nagłówek w widoku roku, aby otworzyć widok dekady. Użytkownicy wybierają rok w widoku dekady, aby powrócić do widoku roku i wybrać miesiąc w widoku roku, aby powrócić do widoku miesiąca. Dwie strzałki z boku nagłówka przechodzą do przodu lub do tyłu według miesięcy, według roku lub dekady.

Tworzenie widoku kalendarza

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano, jak utworzyć prosty widok kalendarza.

<CalendarView/>

Wynikowy widok kalendarza wygląda następująco:

Wybieranie dat

Domyślnie właściwość SelectionMode jest ustawiona na Single. Dzięki temu użytkownik może wybrać jedną datę w kalendarzu. Ustaw wartość SelectionMode na Brak , aby wyłączyć wybór daty.

Ustaw wartość SelectionMode na Multiple, aby umożliwić użytkownikowi wybór wielu dat. Możesz programowo wybrać wiele dat, dodając obiekty DateTime/DateTimeOffset do kolekcji SelectedDates , jak pokazano poniżej:

calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));

Użytkownik może usunąć zaznaczenie wybranej daty, klikając lub naciskając ją w siatce kalendarza.

Zdarzenie SelectedDatesChanged można obsługiwać, aby otrzymywać powiadomienia o zmianie kolekcji SelectedDates.

Dostosowywanie wyglądu widoku kalendarza

Widok kalendarza składa się zarówno z elementów XAML zdefiniowanych w kontrolce ControlTemplate, jak i elementów wizualnych renderowanych bezpośrednio przez kontrolkę.

• Elementy XAML zdefiniowane w szablonie kontrolki zawierają obramowanie, które otacza kontrolkę, nagłówek, poprzednie i następne przyciski oraz elementy DayOfWeek. Możesz stylować i ponownie szablonować te elementy, takie jak dowolna kontrolka XAML.
• Siatka kalendarza jest złożona z obiektów CalendarViewDayItem. Nie można stylizować ani ponownie szablonować tych elementów, ale dostępne są różne właściwości umożliwiające dostosowanie ich wyglądu.

Na tym diagramie przedstawiono elementy, które składają się na widok miesiąca kalendarza. Aby uzyskać więcej informacji, zobacz uwagi dotyczące klasy CalendarViewDayItem .

W tej tabeli wymieniono właściwości, które można zmienić, aby zmodyfikować wygląd elementów kalendarza.

Domyślnie widok miesiąca pokazuje 6 tygodni naraz. Liczbę tygodni można zmienić, ustawiając właściwość NumberOfWeeksInView . Minimalna liczba tygodni do pokazania wynosi 2; wartość maksymalna to 8.

Domyślnie widoki roku i dekady są wyświetlane w siatce 4x4. Aby zmienić liczbę wierszy lub kolumn, wywołaj metodę SetYearDecadeDisplayDimensions z żądaną liczbą wierszy i kolumn. Spowoduje to zmianę siatki zarówno dla widoków roku, jak i dekady.

Widoki roku i dekady są tutaj ustawione na wyświetlanie w układzie 3x4.

calendarView1.SetYearDecadeDisplayDimensions(3, 4);

Domyślnie minimalna data wyświetlana w widoku kalendarza to 100 lat przed bieżącą datą, a wyświetlana maksymalna data to 100 lat po bieżącej dacie. Możesz zmienić minimalne i maksymalne daty wyświetlane w kalendarzu, ustawiając właściwości MinDate i MaxDate .

calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);

Aktualizowanie elementów dnia kalendarzowego

Każdy dzień w kalendarzu jest reprezentowany przez obiekt CalendarViewDayItem . Aby uzyskać dostęp do pojedynczego elementu dnia i użyć jego właściwości i metod, obsłuż zdarzenie CalendarViewDayItemChanging i użyj właściwości Item zdarzenia args, aby uzyskać dostęp do elementu CalendarViewDayItem.

W widoku kalendarza możesz ustawić właściwość CalendarViewDayItem.IsBlackout jako niemożliwą do wybrania dnia, ustawiając jej właściwość CalendarViewDayItem.IsBlackout, aby true.

Kontekstowe informacje o gęstości zdarzeń można wyświetlić w ciągu dnia, wywołując metodę CalendarViewDayItem.SetDensityColors . Można pokazać od 0 do 10 pasków gęstości dla każdego dnia i ustawić kolor każdego słupka.

Oto niektóre elementy dnia w kalendarzu. Dni 1 i 2 są zaciemnione. Dni 2, 3 i 4 mają ustawione różne słupki gęstości.

Renderowanie etapowe

Widok kalendarza może zawierać dużą liczbę obiektów CalendarViewDayItem. Aby zapewnić dynamiczne działanie interfejsu użytkownika i włączyć płynną nawigację za pośrednictwem kalendarza, widok kalendarza obsługuje renderowanie etapowe. Umożliwia to podzielenie przetwarzania elementu dnia na fazy. Jeśli dzień zostanie przeniesiony z widoku przed ukończeniem wszystkich faz, nie będzie już używany czas na przetworzenie i renderowanie tego elementu.

W tym przykładzie przedstawiono etapowe renderowanie widoku kalendarza na potrzeby planowania terminów.

• W fazie 0 jest renderowany domyślny element dnia.
• W fazie 1 zaciemniasz daty, których nie można zarezerwować. Obejmuje to wcześniejsze daty, niedziele i daty, które są już w pełni zarezerwowane.
• W fazie 2 sprawdzasz każdy termin zarezerwowany na dany dzień. Dla każdego potwierdzonego terminu zostanie wyświetlony zielony pasek gęstości oraz niebieski pasek gęstości dla każdego terminu wstępnie umawianego.

Klasa Bookings w tym przykładzie pochodzi z fikcyjnej aplikacji do rezerwacji terminów i nie jest wyświetlana.

<CalendarView CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging"/>

private void CalendarView_CalendarViewDayItemChanging(CalendarView sender,
                                   CalendarViewDayItemChangingEventArgs args)
{
    // Render basic day items.
    if (args.Phase == 0)
    {
        // Register callback for next phase.
        args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
    }
    // Set blackout dates.
    else if (args.Phase == 1)
    {
        // Blackout dates in the past, Sundays, and dates that are fully booked.
        if (args.Item.Date < DateTimeOffset.Now ||
            args.Item.Date.DayOfWeek == DayOfWeek.Sunday ||
            Bookings.HasOpenings(args.Item.Date) == false)
        {
            args.Item.IsBlackout = true;
        }
        // Register callback for next phase.
        args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
    }
    // Set density bars.
    else if (args.Phase == 2)
    {
        // Avoid unnecessary processing.
        // You don't need to set bars on past dates or Sundays.
        if (args.Item.Date > DateTimeOffset.Now &&
            args.Item.Date.DayOfWeek != DayOfWeek.Sunday)
        {
            // Get bookings for the date being rendered.
            var currentBookings = Bookings.GetBookings(args.Item.Date);

            List<Color> densityColors = new List<Color>();
            // Set a density bar color for each of the days bookings.
            // It's assumed that there can't be more than 10 bookings in a day. Otherwise,
            // further processing is needed to fit within the max of 10 density bars.
            foreach (booking in currentBookings)
            {
                if (booking.IsConfirmed == true)
                {
                    densityColors.Add(Colors.Green);
                }
                else
                {
                    densityColors.Add(Colors.Blue);
                }
            }
            args.Item.SetDensityColors(densityColors);
        }
    }
}

UwP i WinUI 2

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Powiązane artykuły

• kontrolki daty i godziny
• Wybieracz daty z kalendarza
• Wybór daty
• Selektor czasu