C# blazor可以使用自定义属性更改回调事件吗？
现在我用blazor制作多选日历 我想在更改日期后得到回拨 这是我的日历组件源代码C# blazor可以使用自定义属性更改回调事件吗？,c#,.net-core,blazor,C#,.net Core,Blazor,现在我用blazor制作多选日历 我想在更改日期后得到回拨 这是我的日历组件源代码 <div class="table-responsive-sm"> <table class="table table-sm text-center calendar"> <thead> <tr> <th colspan="7"> &l
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="(e=> ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
/// <summary>
/// Selected Day List
/// </summary>
[Parameter]
public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (IsSelectable(clickedDate) == false)
return;
if (SelectedDays.Contains(clickedDate))
{
SelectedDays.Remove(clickedDate);
}
else
{
SelectedDays.Add(clickedDate);
}
SelectedDaysChanged.InvokeAsync(SelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}
@page "/"
<Calendar SelectableDays="SelectableDays"
@bind-SelectedDays="SelectedDays"></Calendar>
@code{
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>() { new DateTime(2020, 04, 03) };
public List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
SelectListCount = _selectedDays.Count;
}
}
public int SelectListCount { get; set; }
}
@page "/"
<Calendar SelectableDays="SelectableDays"
@bind-SelectedDays="SelectedDays"></Calendar>
<div>
@SelectListCount
</div>
@code{
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>() { new DateTime(2020, 04, 03) };
public List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
SelectListCount = _selectedDays.Count;
}
}
public int SelectListCount { get; set; }
}
@page/“
@代码{
public List SelectableDays{get；set；}=new List（）{new DateTime（2020,04,03）}；
公共列表_selectedDays=新列表（）；
[参数]
选定日期的公共列表
{
获取{return\u selectedDays；}
设置
{
如果（_selectedDays！=值）
_selectedDays=值；
SelectListCount=\u selectedDays.Count；
}
}
public int SelectListCount{get；set；}
}
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="(e=> ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
// I've changed the SelectedDays property in the Calendar component
// This is a parameter property, and it leads to subtle errors
// when used in your code as a local variable. Instead, define a
// local variable to get and set values from it, as I do in the
// ToggleDate method below.
private List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
if (SelectedDaysChanged.HasDelegate)
{
SelectedDaysChanged.InvokeAsync(value);
}
}
}
///// <summary>
///// Selected Day List
///// </summary>
//[Parameter]
//public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year,
CurrentMonth.Month, day);
if (IsSelectable(clickedDate) == false)
return;
var selectedDays = SelectedDays;
if (selectedDays.Contains(clickedDate))
{
selectedDays.Remove(clickedDate);
}
else
{
selectedDays.Add(clickedDate);
}
// Update the SelectedDays property
SelectedDays = selectedDays;
//var clickedDate = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
//if (IsSelectable(clickedDate) == false)
// return;
//if (SelectedDays.Contains(clickedDate))
//{
// SelectedDays.Remove(clickedDate);
//}
//else
//{
// SelectedDays.Add(clickedDate);
//}
//SelectedDaysChanged.InvokeAsync(SelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="@((e) => ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
[Parameter]
public List<DateTime> SelectedDays { get; set; }
///// <summary>
///// Selected Day List
///// </summary>
//[Parameter]
//public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; }
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year,
CurrentMonth.Month, day);
//if (IsSelectable(clickedDate) == false)
// return;
var tempSelectedDays = SelectedDays.Select(p => p).ToList(); // add here
if (tempSelectedDays.Contains(clickedDate))
{
tempSelectedDays.Remove(clickedDate);
}
else
{
tempSelectedDays.Add(clickedDate);
}
SelectedDaysChanged.InvokeAsync(tempSelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}
@（$“{currentmount:yyyy.MM}”）
太阳
周一
土族
结婚
清华大学
星期五
坐
@{
var i=0；
var prevLastDay=CurrentMonth.AddDays（-1）.Day；
}
@对于（变量行=0；行<5；行++）
{
@对于（变量col=0；col<7；col++）
{
如果（i<（int）开始星期五）
{
@（上周日-（（国际）星期一开始）
}
如果（i>=（DaysInMonth+（int）StartDayOfWeek））则为else
{
@（一-（月日+（国际）星期一开始）+1）
}
其他的
{
var day=i-（int）StartDayOfWeek+1；
@（天）
}
i++；
}
}
@代码{
///
///当月
///
[参数]
public DateTime currentmount{get；set；}=new DateTime（DateTime.Now.Year，DateTime.Now.Month，1）；
///
///当月第一天的开始日期
///
私有DayOfWeek StartDayOfWeek=>CurrentMonth.DayOfWeek；
//我已更改日历组件中的SelectedDays属性
//这是一个参数属性，它会导致细微的错误
//当在代码中用作局部变量时。请定义
//局部变量来获取和设置它的值，就像我在
//切换下面的日期方法。
私人列表_selectedDays=新列表（）；
[参数]
选定日期的公共列表
{
获取{return\u selectedDays；}
设置
{
如果（_selectedDays！=值）
_selectedDays=值；
如果（已选择DaySchanged.HasDelegate）
{
选择DaysChanged.InvokeAsync（值）；
}
}
}
/////
/////选定日期列表
/////
//[参数]
//public List SelectedDays{get；set；}=new List（）；
[参数]
公共事件回调SelectedDaysChanged{get；set；}
///
///可选日期列表
///
[参数]
public List SelectableDays{get；set；}=new List（）；
[参数]
公共事件回调CurrentMonthChanged{get；set；}
private int DaysInMonth=>DateTime.DaysInMonth（currentmount.Year，currentmount.Month）；
受保护的覆盖无效OnParametersSet（）
{
base.OnParametersSet（）；
CurrentMonth=CurrentMonth.AddDays（CurrentMonth.Day*-1+1）；
}
受保护的覆盖无效OnInitialized（）
{
}
公共布尔值可选择（日期时间日期）
{
返回SelectableDays.Select（p=>p.Date）。包含（Date.Date）；
}
公共字符串DayClass（整数天）
{
var targetDay=新日期时间（CurrentMonth.Year，CurrentMonth.Month，day）；
if（SelectedDays.Contains（targetDay））
{
返回“btn主节点”；
}
else if（SelectableDays.Select（p=>p.Date）.Contains（targetDay.Date））
{
返回“btn大纲主”；
}
返回字符串。空；
}
公共无效切换日期（整数天）
{
var clickedDate=新日期时间（CurrentMonth.Year，
当前月、月、日）；
如果（可选择（单击日期）=false）
回来
var selectedDays=selectedDays；
如果（选择日期。包含（单击日期））
{
选择日期。删除（单击日期）；
}
其他的
{
选择日期。添加（单击日期）；
}
//更新SelectedDays属性
SelectedDays=SelectedDays；
//var clickedDate=新日期时间（CurrentMonth.Year，CurrentMonth.Month，day）；
//如果（可选择（单击日期）=false）
//返回；
//如果（选择日期。包含（单击日期））
//{
//选择日期。删除（单击日期）；
//}
//否则
//{
//选择日期。添加（单击日期）；
//}
//SelectedDaysChanged.InvokeAsync（SelectedDays）；
}
公共无效更改月（整数添加月）
{
CurrentMonth=CurrentMonth.AddMonths（AddMonths）；
蒙特昌
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="(e=> ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
// I've changed the SelectedDays property in the Calendar component
// This is a parameter property, and it leads to subtle errors
// when used in your code as a local variable. Instead, define a
// local variable to get and set values from it, as I do in the
// ToggleDate method below.
private List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
if (SelectedDaysChanged.HasDelegate)
{
SelectedDaysChanged.InvokeAsync(value);
}
}
}
///// <summary>
///// Selected Day List
///// </summary>
//[Parameter]
//public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year,
CurrentMonth.Month, day);
if (IsSelectable(clickedDate) == false)
return;
var selectedDays = SelectedDays;
if (selectedDays.Contains(clickedDate))
{
selectedDays.Remove(clickedDate);
}
else
{
selectedDays.Add(clickedDate);
}
// Update the SelectedDays property
SelectedDays = selectedDays;
//var clickedDate = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
//if (IsSelectable(clickedDate) == false)
// return;
//if (SelectedDays.Contains(clickedDate))
//{
// SelectedDays.Remove(clickedDate);
//}
//else
//{
// SelectedDays.Add(clickedDate);
//}
//SelectedDaysChanged.InvokeAsync(SelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}
@page "/"
<Calendar SelectableDays="SelectableDays"
@bind-SelectedDays="SelectedDays"></Calendar>
<div>
@SelectListCount
</div>
@code{
public List<DateTime> SelectableDays { get; set; } = new List<DateTime>() { new DateTime(2020, 04, 03) };
public List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
SelectListCount = _selectedDays.Count;
}
}
public int SelectListCount { get; set; }
}
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="@((e) => ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
[Parameter]
public List<DateTime> SelectedDays { get; set; }
///// <summary>
///// Selected Day List
///// </summary>
//[Parameter]
//public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; }
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year,
CurrentMonth.Month, day);
//if (IsSelectable(clickedDate) == false)
// return;
var tempSelectedDays = SelectedDays.Select(p => p).ToList(); // add here
if (tempSelectedDays.Contains(clickedDate))
{
tempSelectedDays.Remove(clickedDate);
}
else
{
tempSelectedDays.Add(clickedDate);
}
SelectedDaysChanged.InvokeAsync(tempSelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}
//if (IsSelectable(clickedDate) == false)
// return;
@page "/"
<Calendar SelectableDays="SelectableDays"
@bind-SelectedDays="@SelectedDays"></Calendar>
@code{
public List<DateTime> SelectableDays { get; set; } = new
List<DateTime>() { new DateTime(2020, 04, 03) };
private List<DateTime> _selectedDays = new List<DateTime>();
[Parameter]
public List<DateTime> SelectedDays
{
get { return _selectedDays; }
set
{
if (_selectedDays != value)
_selectedDays = value;
SelectListCount = _selectedDays.Count;
}
}
public int SelectListCount { get; set; }
}
<div class="table-responsive-sm">
<table class="table table-sm text-center calendar">
<thead>
<tr>
<th colspan="7">
<button @onclick="(e=> ChangeMonth(-1))" class="btn btn-link">
<
</button>
@($"{CurrentMonth:yyyy.MM}")
<button @onclick="(e=> ChangeMonth(1))" class="btn btn-link">
>
</button>
</th>
</tr>
<tr>
<th scope="col">SUN</th>
<th scope="col">MON</th>
<th scope="col">TUS</th>
<th scope="col">WED</th>
<th scope="col">THU</th>
<th scope="col">FRI</th>
<th scope="col">SAT</th>
</tr>
</thead>
<tbody>
@{
var i = 0;
var prevLastDay = CurrentMonth.AddDays(-1).Day;
}
@for (var row = 0; row < 5; row++)
{
<tr>
@for (var col = 0; col < 7; col++)
{
if (i < (int)StartDayOfWeek)
{
<td style="color:gray;">
@(prevLastDay - ((int)StartDayOfWeek - i))
</td>
}
else if (i >= (DaysInMonth + (int)StartDayOfWeek))
{
<td style="color:gray;">@(i - (DaysInMonth + (int)StartDayOfWeek) + 1)</td>
}
else
{
var day = i - (int)StartDayOfWeek + 1;
<td>
<button class="btn btn-sm btn-block @(DayClass(day))" @onclick="@((e) => ToggleDate(day))">
@(day)
</button>
</td>
}
i++;
}
</tr>
}
</tbody>
</table>
</div>
@code {
/// <summary>
/// Current Month
/// </summary>
[Parameter]
public DateTime CurrentMonth { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
/// <summary>
/// Start Day Of First Day In Current Month
///</summary>
private DayOfWeek StartDayOfWeek => CurrentMonth.DayOfWeek;
[Parameter]
public List<DateTime> SelectedDays { get; set; }
///// <summary>
///// Selected Day List
///// </summary>
//[Parameter]
//public List<DateTime> SelectedDays { get; set; } = new List<DateTime>();
[Parameter]
public EventCallback<List<DateTime>> SelectedDaysChanged { get; set; }
/// <summary>
/// Selectable Day List
/// </summary>
[Parameter]
public List<DateTime> SelectableDays { get; set; }
[Parameter]
public EventCallback<DateTime> CurrentMonthChanged { get; set; }
private int DaysInMonth => DateTime.DaysInMonth(CurrentMonth.Year, CurrentMonth.Month);
protected override void OnParametersSet()
{
base.OnParametersSet();
CurrentMonth = CurrentMonth.AddDays(CurrentMonth.Day * -1 + 1);
}
protected override void OnInitialized()
{
}
public bool IsSelectable(DateTime date)
{
return SelectableDays.Select(p => p.Date).Contains(date.Date);
}
public string DayClass(int day)
{
var targetDay = new DateTime(CurrentMonth.Year, CurrentMonth.Month, day);
if (SelectedDays.Contains(targetDay))
{
return "btn-primary";
}
else if (SelectableDays.Select(p => p.Date).Contains(targetDay.Date))
{
return "btn-outline-primary";
}
return string.Empty;
}
public void ToggleDate(int day)
{
var clickedDate = new DateTime(CurrentMonth.Year,
CurrentMonth.Month, day);
//if (IsSelectable(clickedDate) == false)
// return;
Console.WriteLine($"ToggleDate {day}");
if (SelectedDays.Contains(clickedDate))
{
SelectedDays.Remove(clickedDate);
}
else
{
SelectedDays.Add(clickedDate);
}
SelectedDaysChanged.InvokeAsync(SelectedDays);
}
public void ChangeMonth(int addMonths)
{
CurrentMonth = CurrentMonth.AddMonths(addMonths);
CurrentMonthChanged.InvokeAsync(CurrentMonth);
}
}