@ -7,12 +7,12 @@
protected override RenderFragment PickerContent =>
@<CascadingValue Value="@this" IsFixed="true">
<PickerToolbar Class="mud- picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud- button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud- button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
<PickerToolbar Class="picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
</PickerToolbar>
<PickerContent>
<div class="mud- picker-calendar-content @($"mud- picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
<div class="picker-calendar-content @($"picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
@{
int dayId = 0;
@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
@ -24,14 +24,14 @@
{
int tempMonth = displayMonth; //without local variable month names are wrong
<div class="mud- picker-calendar-container">
<div class="picker-calendar-container">
@if (tempMonth == 0 && CurrentView == OpenTo.Year)
{
<div id="pickerYears" class="mud- picker-year-container">
<div id="pickerYears" class="picker-year-container">
@for (int i = GetMinYear(); i <= GetMaxYear(); i++)
{
var year = i;
<div class="mud- picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
<div class="picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
</div>
}
@ -43,26 +43,26 @@
var prevLabel = $"Go to previous year {calendarYear - 1}";
var nextLabel = $"Go to next year {calendarYear + 1}";
<div class="mud- picker-calendar-header">
<div class="mud- picker-calendar-header-switch">
<div class="picker-calendar-header">
<div class="picker-calendar-header-switch">
@if (!FixYear.HasValue)
{
<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud- flip-x-rtl" />
<button type="button" class="mud- picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="flip-x-rtl" />
<button type="button" class="picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
</button>
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud- flip-x-rtl" />
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="flip-x-rtl" />
}
else
{
<TextContent Class="mud- picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
<TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
}
</div>
</div>
<div class="mud- picker-month-container">
<div class="picker-month-container">
@foreach (var month in GetAllMonths())
{
<button type="button" aria-label="@GetMonthName(month)" class="mud- picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
<button type="button" aria-label="@GetMonthName(month)" class="picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
</button>
}
@ -74,35 +74,35 @@
var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";
<div class="@GetCalendarHeaderClasses(tempMonth)">
<div class="mud- picker-calendar-header-switch">
<div class="picker-calendar-header-switch">
@if (!FixMonth.HasValue)
{
<IconButton aria-label="@prevLabel" Class="mud- picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
<button type="button" class="mud- picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
<IconButton aria-label="@prevLabel" Class="picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
<button type="button" class="picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
<TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
</button>
<IconButton aria-label="@nextLabel" Class="mud- picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
<IconButton aria-label="@nextLabel" Class="picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
}
else
{
<TextContent Class="mud- picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
<TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
}
</div>
<div class="mud- picker-calendar-header-day">
<div class="picker-calendar-header-day">
@if (ShowWeekNumbers)
{
<div class="mud- picker-calendar-week">
<Text Typo="Typo.caption" Class="mud- picker-calendar-week-text"></Text>
<div class="picker-calendar-week">
<Text Typo="Typo.caption" Class="picker-calendar-week-text"></Text>
</div>
}
@foreach (var dayname in GetAbbreviatedDayNames())
{
<TextContent Typo="Typo.caption" Class="mud- day-label">@dayname</TextContent>
<TextContent Typo="Typo.caption" Class="day-label">@dayname</TextContent>
}
</div>
</div>
<div class="mud- picker-calendar-transition mud-picker-slide-transition">
<div class="mud- picker-calendar">
<div class="picker-calendar-transition mud-picker-slide-transition">
<div class="picker-calendar">
@for (int week = 0; week < 6; week++)
{
int tempWeek = week;
@ -110,8 +110,8 @@
@if (ShowWeekNumbers)
{
<div class="mud- picker-calendar-week">
<Text class="mud- picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
<div class="picker-calendar-week">
<Text class="picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
</div>
}
@foreach (var day in GetWeek(tempMonth, tempWeek))
@ -122,21 +122,21 @@
{
var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
<button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
class="mud- button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
@onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
@onclick:stopPropagation="true"
aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
<p class="mud- typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
<p class="typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
</button>
}
else
{
<button @key="0" type="button" style="--day-id: 1;"
class="mud- button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
aria-label='' disabled>
<p class="mud- typography mud-typography-body2 mud-inherit-text"></p>
<p class="typography mud-typography-body2 mud-inherit-text"></p>
</button>
}
}
Matija Koželj
2 years ago