Poznámka:
Přístup k této stránce vyžaduje autorizaci. Můžete se zkusit přihlásit nebo změnit adresáře.
Přístup k této stránce vyžaduje autorizaci. Můžete zkusit změnit adresáře.
Zobrazení kalendáře umožňuje uživateli zobrazit a pracovat s kalendářem, který může procházet podle měsíce, roku nebo desetiletí. Uživatel může vybrat jedno datum nebo rozsah kalendářních dat. Nemá výběrovou plochu a kalendář je vždy viditelný.
Je to správná kontrola?
Zobrazení kalendáře umožňuje uživateli vybrat jedno datum nebo rozsah kalendářních dat z vždy viditelného kalendáře.
Pokud potřebujete uživateli povolit výběr více kalendářních dat najednou, musíte použít zobrazení kalendáře. Pokud potřebujete, aby si uživatel vybral jen jedno datum a kalendář nemusí být stále viditelný, zvažte použití ovládacího prvku pro výběr data kalendáře nebo ovládacího prvku pro výběr data.
Další informace o výběru správného ovládacího prvku najdete v článku Ovládací prvky data a času .
Examples
Zobrazení kalendáře se skládá ze 3 samostatných zobrazení: zobrazení měsíce, zobrazení roku a desetiletí. Ve výchozím nastavení začíná otevřeným zobrazením měsíce. Spouštěcí zobrazení můžete určit nastavením Vlastnosti DisplayMode .
Uživatelé kliknou na záhlaví v zobrazení měsíce, aby otevřeli zobrazení roku, a kliknutím na záhlaví v zobrazení roku otevřete zobrazení desetiletí. Uživatelé vyberou rok v zobrazení desetiletí, aby se vrátili do zobrazení roku, a výběrem měsíce v zobrazení roku se vrátíte do zobrazení měsíce. Dvě šipky vedle záhlaví přecházejí dopředu nebo dozadu podle měsíců, podle roků nebo po desetiletích.
Vytvoření zobrazení kalendáře
- Důležitá rozhraní API:CalendarView – třída, SelectedDatesChanged – událost
Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.
Tento příklad ukazuje, jak vytvořit jednoduché zobrazení kalendáře.
<CalendarView/>
Výsledné zobrazení kalendáře vypadá takto:
Výběr kalendářních dat
Ve výchozím nastavení je vlastnost SelectionMode nastavena na Single. To umožňuje uživateli vybrat jedno datum v kalendáři. Nastavte selectionMode na None (Žádný ) a zakažte výběr data.
Nastavte SelectionMode na Více , aby uživatel vybral více kalendářních dat. Více kalendářních dat můžete programově vybrat přidáním objektů DateTime/DateTimeOffset do kolekce SelectedDates , jak je znázorněno zde:
calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));
Uživatel může zrušit výběr vybraného data kliknutím nebo klepnutím v mřížce kalendáře.
Událost SelectedDatesChanged můžete zpracovat tak, aby byla upozorněna, když se změnila kolekce SelectedDates .
Poznámka:
Důležité informace o hodnotách kalendářních dat naleznete v části Hodnoty DateTime a Calendar v článku Ovládací prvky data a času.
Přizpůsobení vzhledu zobrazení kalendáře
Zobrazení kalendáře se skládá z obou elementů XAML definovaných v ovládacím prvku ControlTemplate a vizuálních prvků vykreslovaných přímo ovládacím prvku.
- Prvky XAML definované v šabloně ovládacího prvku zahrnují ohraničení, které ohraničuje ovládací prvek, záhlaví, předchozí a další tlačítka a prvky DayOfWeek. Tyto prvky můžete stylovat a znovu šablonovat jako jakýkoliv ovládací prvek XAML.
- Mřížka kalendáře se skládá z CalendarViewDayItem objektů. Tyto prvky nemůžete stylovat ani znovu šablonovat, ale jsou k dispozici různé vlastnosti, které vám umožní přizpůsobit jejich vzhled.
Tento diagram znázorňuje prvky, které tvoří zobrazení měsíce v kalendáři. Další informace naleznete v poznámkách k třídě CalendarViewDayItem.
Tato tabulka obsahuje seznam vlastností, které můžete změnit a změnit vzhled prvků kalendáře.
Ve výchozím nastavení se v zobrazení měsíce zobrazuje 6 týdnů najednou. Počet týdnů zobrazených nastavením Vlastnosti NumberOfWeeksInView můžete změnit. Minimální počet týdnů, které se mají zobrazit, je 2; maximum je 8.
Ve výchozím nastavení se zobrazení roku a desetiletí objeví ve formátu 4x4 mřížky. Pokud chcete změnit počet řádků nebo sloupců, zavolejte SetYearDecadeDisplayDimensions s požadovaným počtem řádků a sloupců. Tím se změní mřížka pro zobrazení roku i desetiletí.
Tady jsou zobrazení roku a desetiletí nastavena tak, aby se zobrazovala v mřížce 3x4.
calendarView1.SetYearDecadeDisplayDimensions(3, 4);
Ve výchozím nastavení je minimální datum zobrazené v zobrazení kalendáře 100 let před aktuálním datem a maximální zobrazené datum je 100 let za aktuálním datem. Minimální a maximální datum, která kalendář zobrazuje, můžete změnit nastavením vlastností MinDate a MaxDate .
calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);
Aktualizace položek dnů v kalendáři
Každý den v kalendáři je reprezentován CalendarViewDayItem objekt. Chcete-li získat přístup k jednotlivé položce dne a použít její vlastnosti a metody, zpracujte událost CalendarViewDayItemChanging a použijte vlastnost Item argumentů události pro přístup k CalendarViewDayItem.
Můžete učinit den nevybratelným v zobrazení kalendáře nastavením jeho vlastnosti CalendarViewDayItem.IsBlackout na true.
Kontextové informace o hustotě událostí za den můžete zobrazit voláním CalendarViewDayItem.SetDensityColors metoda. Pro každý den můžete zobrazit 0 až 10 pruhů hustoty a nastavit barvu každého pruhu.
Tady jsou některé položky dne v kalendáři. Dny 1 a 2 jsou začerněné. Dny 3 a 4 mají různé úrovně indikátorů hustoty.
Fázované vykreslování
Zobrazení kalendáře může obsahovat velký počet objektů CalendarViewDayItem. Aby uživatelské rozhraní reagovalo a umožnilo plynulou navigaci v kalendáři, podporuje zobrazení kalendáře postupné vykreslování. Díky tomu můžete rozdělit zpracování položky dne do fází. Pokud se den před dokončením všech fází přesune mimo zobrazení, již se nebude věnovat čas pokusům o zpracování a vykreslení této položky.
Tento příklad ukazuje postupné vykreslování zobrazení kalendáře pro plánování událostí.
- Ve fázi 0 se vykreslí výchozí denní položka.
- Ve fázi 1 zablokujete data, která není možné rezervovat. To zahrnuje minulé termíny, neděle a data, která jsou již plně zarezervovaná.
- Ve fázi 2 zkontrolujete každou schůzku, která je rezervována pro daný den. Pro každou potvrzenou schůzku se zobrazí zelený pruh hustoty a modrý pruh hustoty pro každou nezávaznou schůzku.
Třída Bookings v tomto příkladu pochází z fiktivní aplikace pro rezervaci událostí a nezobrazuje se.
<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);
}
}
}
Související články
Spolupracujte s námi na GitHubu
Zdroj tohoto obsahu najdete na GitHubu, kde můžete také vytvářet a kontrolovat problémy a žádosti o přijetí změn. Další informace najdete v našem průvodci pro přispěvatele.
Windows developer