Gray disabled date

4 posts, 0 answers
  1. Giampaolo
    Giampaolo avatar
    20 posts
    Member since:
    Mar 2020

    Posted 29 Apr Link to this post

    Hi

    Is it possible gray out disabled date on Calendar control ??

    Tnx

  2. Svetoslav Dimitrov
    Admin
    Svetoslav Dimitrov avatar
    139 posts

    Posted 30 Apr Link to this post

    Hello Giampaolo,

    Thank you for participating in our Blazor community!

    By default the color of the disabled dates (the font color) is gray as you can see in the Calendar Disabled Dates demo on this link: https://demos.telerik.com/blazor-ui/calendar/disabled-dates. What we do when there are disabled dates is to add a CSS class - k-state-disabled, to the specific <td> that contains the date. Should you require any additional customization you can apply CSS styles by targeting the k-state-disabled class. Below you can see a quick example of that. When you run the code snippet you will see that the background color of the disabled dates cells will be gray and their font color - blue.

    <style>
        .k-state-disabled{
            background-color:gray;
            color:blue;
        }
    </style>
    
    <div class="alert alert-info">
        You will not be able to book an event hall for the dates between April 10th 2020 and April 12th 2020 (Easter Day).
        You can select multiple dates.
    </div>
    
    @{
        if (SelectedDatesList.Any())
        {
            DateTime firstSelectedDate = SelectedDatesList.FirstOrDefault();
            DateTime lastSelectedDate = SelectedDatesList.LastOrDefault();
            <div class="alert alert-success">
                The event hall will be booked between <strong>@FormatDate(firstSelectedDate) and @FormatDate(lastSelectedDate)</strong>
            </div>
            if (firstSelectedDate < EasterDate && lastSelectedDate > EasterDate)
            {
                string firstDisabledDate = FormatDate(DisabledDatesList.FirstOrDefault());
                string lastDisabledDate = FormatDate(DisabledDatesList.LastOrDefault());
                <div class="alert alert-danger">
                    In the selected time period you will not be able to use the hall between <strong>@firstDisabledDate and @lastDisabledDate</strong>
                </div>
            }
        }
    }
    
    <TelerikCalendar Min="@MinDate"
                     Max="@MaxDate"
                     @bind-Date="@DateToNavigate"
                     DisabledDates="@DisabledDatesList"
                     SelectionMode="CalendarSelectionMode.Multiple"
                     @ref="CalendarReference"
                     ValueChanged="@SelectionHandler">
    </TelerikCalendar>
    
    @code {
        DateTime EasterDate { get; set; }
        DateTime MinDate { get; set; }
        DateTime MaxDate { get; set; }
        DateTime DateToNavigate { get; set; }
        List<DateTime> DisabledDatesList { get; set; } = new List<DateTime>();
        List<DateTime> SelectedDatesList { get; set; } = new List<DateTime>();
    
        TelerikCalendar CalendarReference;
    
        protected override void OnInitialized()
        {
            EasterDate = GetEasterDate();
            MinDate = EasterDate.AddMonths(-3);
            MaxDate = EasterDate.AddMonths(3);
            DateToNavigate = EasterDate;
    
            DisabledDatesList = new List<DateTime>()
    {
                EasterDate.AddDays(-2),
                EasterDate.AddDays(-1),
                EasterDate
            };
        }
    
        DateTime GetEasterDate()
        {
            return new DateTime(2020, 4, 12);
        }
    
        void SelectionHandler()
        {
            SelectedDatesList = CalendarReference.SelectedDates;
            SelectedDatesList.Sort();
        }
    
        string FormatDate(DateTime dateToFormat)
        {
            return dateToFormat.ToString("dd MMM yyyy");
        }
    }

    Regards,
    Svetoslav Dimitrov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Giampaolo
    Giampaolo avatar
    20 posts
    Member since:
    Mar 2020

    Posted 30 Apr in reply to Svetoslav Dimitrov Link to this post

    Really tnx

    And is it possibile set some dates with different backgruond color, without disabled it ??

    tnx

  4. Svetoslav Dimitrov
    Admin
    Svetoslav Dimitrov avatar
    139 posts

    Posted 04 May Link to this post

    Hello Giampaolo,

    There is an open Feature Request on our Feedback Portal for customization template for the day cell in the Calendar. You can see it from here: https://feedback.telerik.com/blazor/1446960-add-day-cell-customisation-templates-to-the-calendar. I have given a Vote on your behalf to raise it's popularity. You can Follow it for email notifications.

    Regards,
    Svetoslav Dimitrov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top