Skip to content

Commit f1b4232

Browse files
msynkmsynk
authored
feat(blazorui): apply BitCalendar improvements bitfoundation#12728 (bitfoundation#12738)
1 parent 5066e53 commit f1b4232

11 files changed

Lines changed: 1828 additions & 341 deletions

File tree

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor‎

Lines changed: 90 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
@inherits BitInputBase<DateTimeOffset?>
33

44
@{
5-
var todayYear = _culture.Calendar.GetYear(DateTime.Now);
6-
var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
7-
var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
5+
var today = GetToday();
6+
var todayYear = _culture.Calendar.GetYear(today);
7+
var todayMonth = _culture.Calendar.GetMonth(today);
8+
var focusableDay = GetFocusableDay();
89

910
var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
1011
var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
@@ -127,77 +128,94 @@
127128
}
128129
</div>
129130
</div>
130-
<div style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
131-
@if (ShowWeekNumbers)
132-
{
133-
<div style="@Styles?.WeekNumbersHeader" class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
134-
}
135-
136-
@for (var index = 0; index < 7; index++)
137-
{
138-
var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
139-
<div title="@dayOfWeekName"
140-
style="@Styles?.WeekNumbersHeader"
141-
class="bit-cal-wlb @Classes?.WeekNumbersHeader">
142-
@dayOfWeekName[0]
143-
</div>
144-
}
145-
</div>
146-
147-
@for (var week = 0; week < 6; week++)
148-
{
149-
//to ignore the last empty week of the month || to ignore the first whole week of the month
150-
if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
151-
152-
<div style="@Styles?.DaysRow" class="bit-cal-dgr @Classes?.DaysRow">
131+
<div role="grid" aria-label="@_monthTitle" style="@Styles?.DaysGrid" class="bit-cal-grd @Classes?.DaysGrid">
132+
<div role="row" style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
153133
@if (ShowWeekNumbers)
154134
{
155-
var weekNumber = GetWeekNumber(week);
156-
var title = string.Format(WeekNumberTitle, weekNumber);
157-
<div scope="row"
158-
title="@title"
159-
aria-label="@title"
160-
style="@Styles?.WeekNumber"
161-
class="bit-cal-wnm @Classes?.WeekNumber">
162-
@weekNumber
163-
</div>
135+
<div role="columnheader" style="@Styles?.WeekNumbersHeader" class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
164136
}
165-
@for (var day = 0; day < 7; day++)
137+
138+
@for (var index = 0; index < 7; index++)
166139
{
167-
var date = _daysOfCurrentMonth[week, day]!.Value;
168-
var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
169-
var isSelected = IsSelectedDate(date);
170-
var (style, klass) = GetDayButtonCss(date);
171-
var dayEvents = GetDayEvents(date);
172-
<button @onclick="() => HandleDayClick(date, dayEvents)"
173-
type="button"
174-
role="gridcell"
175-
disabled="@disabled"
176-
aria-readonly="true"
177-
aria-disabled="@disabled"
178-
title="@(dayEvents.Count > 0 ? GetEventTooltip(dayEvents) : null)"
179-
style="@style @Styles?.DayButton"
180-
class="bit-cal-dbt@(klass) @Classes?.DayButton"
181-
tabindex="@(isSelected ? 0 : -1)"
182-
aria-selected="@(isSelected ? "true" : "false")">
183-
@if (DayCellTemplate is not null)
184-
{
185-
@DayCellTemplate(GetDateTimeOfDayCell(date))
186-
}
187-
else
188-
{
189-
@GetDayOfCurrentMonth(date)
190-
}
191-
@if (dayEvents.Count > 0)
192-
{
193-
<span style="@Styles?.EventIndicator"
194-
class="bit-cal-evi @Classes?.EventIndicator">
195-
</span>
196-
}
197-
</button>
140+
var dayOfWeek = GetDayOfWeek(index);
141+
var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(dayOfWeek);
142+
<div role="columnheader"
143+
title="@dayOfWeekName"
144+
aria-label="@_culture.DateTimeFormat.GetDayName(dayOfWeek)"
145+
style="@Styles?.DayNameHeader"
146+
class="bit-cal-wlb @Classes?.DayNameHeader">
147+
@dayOfWeekName[0]
148+
</div>
198149
}
199150
</div>
200-
}
151+
152+
@for (var week = 0; week < 6; week++)
153+
{
154+
//to ignore the last empty week of the month || to ignore the first whole week of the month
155+
if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
156+
157+
<div role="row" style="@Styles?.DaysRow" class="bit-cal-dgr @Classes?.DaysRow">
158+
@if (ShowWeekNumbers)
159+
{
160+
var weekNumber = GetWeekNumber(week);
161+
var title = string.Format(WeekNumberTitle, weekNumber);
162+
<div role="rowheader"
163+
title="@title"
164+
aria-label="@title"
165+
style="@Styles?.WeekNumber"
166+
class="bit-cal-wnm @Classes?.WeekNumber">
167+
@weekNumber
168+
</div>
169+
}
170+
@for (var day = 0; day < 7; day++)
171+
{
172+
var date = _daysOfCurrentMonth[week, day]!.Value;
173+
174+
if (ShowOutsideDays is false && IsInCurrentMonth(date) is false)
175+
{
176+
<div role="gridcell" style="@Styles?.DayButton" class="bit-cal-dbe @Classes?.DayButton"></div>
177+
continue;
178+
}
179+
180+
var disabled = IsEnabled is false || IsDayDisabled(date);
181+
var isSelected = IsSelectedDate(date);
182+
var isToday = IsInCurrentMonth(date) && date == today.Date;
183+
var (style, klass) = GetDayButtonCss(date);
184+
var dayEvents = GetDayEvents(date);
185+
<button @onclick="() => HandleDayClick(date, dayEvents)"
186+
@onkeydown="e => HandleDayKeyDown(e, date)"
187+
type="button"
188+
role="gridcell"
189+
id="@GetDayButtonId(date)"
190+
disabled="@disabled"
191+
aria-readonly="true"
192+
aria-disabled="@disabled"
193+
aria-label="@date.ToString(_culture.DateTimeFormat.LongDatePattern, _culture)"
194+
aria-current="@(isToday ? "date" : null)"
195+
title="@(dayEvents.Count > 0 ? GetEventTooltip(dayEvents) : null)"
196+
style="@style @Styles?.DayButton"
197+
class="bit-cal-dbt@(klass) @Classes?.DayButton"
198+
tabindex="@(date == focusableDay ? 0 : -1)"
199+
aria-selected="@(isSelected ? "true" : "false")">
200+
@if (DayCellTemplate is not null)
201+
{
202+
@DayCellTemplate(GetDateTimeOfDayCell(date))
203+
}
204+
else
205+
{
206+
@GetDayOfCurrentMonth(date)
207+
}
208+
@if (dayEvents.Count > 0)
209+
{
210+
<span style="@Styles?.EventIndicator"
211+
class="bit-cal-evi @Classes?.EventIndicator">
212+
</span>
213+
}
214+
</button>
215+
}
216+
</div>
217+
}
218+
</div>
201219
</div>
202220
}
203221

@@ -292,6 +310,7 @@
292310
}
293311
</div>
294312
</div>
313+
<div role="grid" aria-label="@_currentYear" class="bit-cal-grd">
295314
@for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
296315
{
297316
<div style="@Styles?.MonthsRow" class="bit-cal-pkr @Classes?.MonthsRow" role="row">
@@ -325,6 +344,7 @@
325344
}
326345
</div>
327346
}
347+
</div>
328348
}
329349
else
330350
{
@@ -390,6 +410,7 @@
390410
</button>
391411
</div>
392412
</div>
413+
<div role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear" class="bit-cal-grd">
393414
@for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
394415
{
395416
<div style="@Styles?.YearsRow" class="bit-cal-pkr @Classes?.YearsRow" role="row">
@@ -420,7 +441,7 @@
420441
}
421442
</div>
422443
}
423-
444+
</div>
424445
}
425446
</div>
426447
}

0 commit comments

Comments
 (0)