日付検証

Calendarコントロールに組み込まれたバリデータItemValidatorを使用して、ユーザーがカレンダーコントロールから選択できるデータの型や値を制御できます。これを行うには、validation関数を作成して、ユーザーによる日付選択を許可または制限するItemValidatorに割り当てるだけです。この種のvalidationは、重要な作業日、ジムに通う日、ダイエットプランなどを計画する際に便利です。

次の図は、検証を適用した後のCalendarコントロールを示しています。

In the following example, ItemValidator function is created to determine the valid dates for selection so that a user can only select a weekday in the calendar control.

DateValidation	コードのコピー
@using C1.Blazor.Calendar @using C1.Blazor.Core @using System; <style> .c1-calendar { -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23); margin: 20px; } .custom-slot { width: 100%; height: 100%; justify-content: center; align-items: center; display: flex; } .non-available-slot { color: white; background: red; opacity: 0.3; } .adjacent-slot { color: red; opacity: 0.5; } </style> <C1Calendar HeaderMonthFormat="MMMM" ItemValidator="ItemValidator"> <DaySlotTemplate> @if (!ItemValidator((DateTime)context.Date)) { <div class="custom-slot non-available-slot">@context.Date.ToString("dd")</div> } else if (context.IsAdjacent) { <div class="custom-slot adjacent-slot">@context.Date.ToString("dd")</div> } else { @context.Date.ToString("dd") } </DaySlotTemplate> </C1Calendar> @code { bool ItemValidator(DateTime date) { return date.DayOfWeek != DayOfWeek.Saturday && date.DayOfWeek != DayOfWeek.Sunday; } }

DateValidation

コードのコピー

@using C1.Blazor.Calendar
@using C1.Blazor.Core
@using System;

<style>
    .c1-calendar {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.23);
        margin: 20px;
    }

    .custom-slot {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .non-available-slot {
        color: white;
        background: red;
        opacity: 0.3;
    }

    .adjacent-slot {
        color: red;
        opacity: 0.5;
    }
</style>

<C1Calendar HeaderMonthFormat="MMMM" ItemValidator="ItemValidator">
    <DaySlotTemplate>
        @if (!ItemValidator((DateTime)context.Date))
        {
            <div class="custom-slot non-available-slot">@context.Date.ToString("dd")</div>
        }
        else if (context.IsAdjacent)
        {
            <div class="custom-slot adjacent-slot">@context.Date.ToString("dd")</div>
        }
        else
        {
            @context.Date.ToString("dd")
        }
    </DaySlotTemplate>
</C1Calendar>

@code
{
    bool ItemValidator(DateTime date)
    {
        return date.DayOfWeek != DayOfWeek.Saturday && date.DayOfWeek != DayOfWeek.Sunday;
    }
}