Unplanned
Last Updated: 08 Jan 2022 11:00 by ADMIN
Thomas
Created on: 08 Jan 2022 11:00
Category: UI for Blazor
Type: Feature Request
2
CellRender event for the calendar in the various date pickers

For example, I want to set the Sunday day to red or any other date to a special color.

 

<AdminEdit>

Here is a workaround that can be used until the feature is released

<style>
    .hide-calendar {
        display: none;
    }

    .special {
        color: red;
        font-weight: bold;
    }
</style>

<div style="width: 400px">
    <TelerikDateInput @bind-Value="@DateValue" Width="90%"></TelerikDateInput>
    <TelerikButton Icon="calendar"
                   OnClick="@( () => isClicked = !isClicked )">
    </TelerikButton>
</div>

<TelerikCalendar Class="@(!isClicked ? "hide-calendar" : "")"
                 @bind-Value="@DateValue"
                 OnCellRender="@OnCellRenderHandler"
                 Min="@(new DateTime(2000, 1, 1))"
                 Max="@(new DateTime(2090, 1, 1))">
</TelerikCalendar>

@code {
    private void OnCellRenderHandler(CalendarCellRenderEventArgs args)
    {
        if (args.View == CalendarView.Month)
        {
            args.Class = args.Date.Day % 3 == 0 ? "special" : "";
        }
        else if (args.View == CalendarView.Decade)
        {
            args.Class = args.Date.Year == 2020 ? "special" : "";
        }
    }

    private DateTime DateValue { get; set; } = DateTime.Today;

    private bool isClicked { get; set; }
}

</AdminEdit>

0 comments