You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
7.2 KiB
152 lines
7.2 KiB
2 years ago
|
@namespace Connected.Components
|
||
|
|
@inherits Picker<DateTime?>
|
||
|
|
|
||
|
|
@Render
|
||
|
|
|
||
|
|
@code {
|
||
|
|
|
||
|
|
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>
|
||
|
|
<PickerContent>
|
||
|
|
<div class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
|
||
|
|
@{
|
||
|
|
int dayId = 0;
|
||
|
|
@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
|
||
|
|
{
|
||
|
|
dayId = -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@for (int displayMonth = 0; displayMonth < DisplayMonths; ++displayMonth)
|
||
|
|
{
|
||
|
|
int tempMonth = displayMonth; //without local variable month names are wrong
|
||
|
|
|
||
|
|
<div class="mud-picker-calendar-container">
|
||
|
|
@if (tempMonth == 0 && CurrentView == OpenTo.Year)
|
||
|
|
{
|
||
|
|
<div id="pickerYears" class="mud-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">
|
||
|
|
<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
else if (tempMonth == 0 && CurrentView == OpenTo.Month)
|
||
|
|
{
|
||
|
|
var calendarYear = GetCalendarYear(PickerMonth?.Year ?? DateTime.Today.Year);
|
||
|
|
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">
|
||
|
|
@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">
|
||
|
|
<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
||
|
|
</button>
|
||
|
|
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" />
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mud-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">
|
||
|
|
<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
|
||
|
|
</button>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
else if (CurrentView == OpenTo.Date || tempMonth > 0)
|
||
|
|
{
|
||
|
|
var prevLabel = $"Go to previous month {GetMonthName((tempMonth - 1) % 12)}";
|
||
|
|
var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";
|
||
|
|
|
||
|
|
<div class="@GetCalendarHeaderClasses(tempMonth)">
|
||
|
|
<div class="mud-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">
|
||
|
|
<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" />
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="mud-picker-calendar-header-day">
|
||
|
|
@if (ShowWeekNumbers)
|
||
|
|
{
|
||
|
|
<div class="mud-picker-calendar-week">
|
||
|
|
<Text Typo="Typo.caption" Class="mud-picker-calendar-week-text"></Text>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
@foreach (var dayname in GetAbbreviatedDayNames())
|
||
|
|
{
|
||
|
|
<TextContent Typo="Typo.caption" Class="mud-day-label">@dayname</TextContent>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mud-picker-calendar-transition mud-picker-slide-transition">
|
||
|
|
<div class="mud-picker-calendar">
|
||
|
|
@for (int week = 0; week < 6; week++)
|
||
|
|
{
|
||
|
|
int tempWeek = week;
|
||
|
|
var firstMonthFirstYear = _picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1;
|
||
|
|
|
||
|
|
@if (ShowWeekNumbers)
|
||
|
|
{
|
||
|
|
<div class="mud-picker-calendar-week">
|
||
|
|
<Text class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
@foreach (var day in GetWeek(tempMonth, tempWeek))
|
||
|
|
{
|
||
|
|
var tempId = ++dayId;
|
||
|
|
|
||
|
|
@if (tempId != 0 || !firstMonthFirstYear)
|
||
|
|
{
|
||
|
|
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))"
|
||
|
|
@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>
|
||
|
|
</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"
|
||
|
|
aria-label='' disabled>
|
||
|
|
<p class="mud-typography mud-typography-body2 mud-inherit-text"></p>
|
||
|
|
</button>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</PickerContent>
|
||
|
|
</CascadingValue>;
|
||
|
|
}
|