Feature request: disable weekends?

[spyofborg]

It is possible to disable weekends? As in, not shown, or can not be selected.

What I would like to achieve is: The user picks a 3-week vacation, but of course, the weekends should not be included in the range. So it would be good to be able to disable weekends so they can not be selected. I know that I most likely have to still make a method to calculate the correct days unless the component can already extract the disabled weekends from the total amount of selected days.

Thank you!

[jdtcn]

Yes, you can disable weekends:

<DateRangePicker DaysEnabledFunction="@(d => d.DayOfWeek != DayOfWeek.Sunday && d.DayOfWeek != DayOfWeek.Saturday)" />

The type of DaysEnabledFunction is Func<DateTimeOffset,bool> so you can implement any custom logic.

See also CustomDateFunction, it can add CustomDateClass css class to dates. (Weekends already has weekend css class, disabled days has disabled class).

[spyofborg]

Dear,

Sorry that I bother you, but I do want to understand one thing better.

Your info works indeed to disable those weekends, but I’m now further in my application.

I also want to be able to disable dates like public holidays.

How could you do that?

This is what I did now:

<DateRangePicker OnRangeSelect="OnRangeSelect" ShowWeekNumbers="true" DateFormat="dd-MM-yyyy" DaysEnabledFunction="DisableDates"

             MaxDate="DateTimeOffset.Now.AddYears(2)" MinDate="DateTimeOffset.Now.AddDays(-1)" @bind-StartDate="startDate" @bind-EndDate="endDate">

<PickerTemplate>

    <div id="@context.ParentId" @onclick="context.Toggle" style="background:#fff;cursor:pointer;padding:5px 10px; width:250px; border:1px solid #ccc;">

        <i class="oi oi-calendar"></i>&nbsp;

        <span>@context.FormattedRange @(string.IsNullOrEmpty(context.FormattedRange)?"Choose your dates.":"")</span>

        <i class="oi oi-chevron-bottom float-right"></i>

    </div>

</PickerTemplate>

So I was wondering how you could make a function to pass the dates that should be disabled?

I will get the info from a Database with all the public holidays in it.

And is it also possible to colour certain dates based, I would like to colour dates that are public holidays. For example from another component:

I really appreciate your work, I hope you can help me along.

Thank you for the info.

David

From: Sergey notifications@github.com Sent: vrijdag 24 april 2020 16:08 To: jdtcn/BlazorDateRangePicker BlazorDateRangePicker@noreply.github.com Cc: spyofborg github@viaene.eu; Author author@noreply.github.com Subject: Re: [jdtcn/BlazorDateRangePicker] Feature request: disable weekends? (#15)

Yes, you can disable weekends:

The type of DaysEnabledFunction is Func<DateTimeOffset,bool> so you can implement any custom logic.

See also CustomDateFunction, it can add CustomDateClass css class to dates. (Weekends already have weekend css class).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jdtcn/BlazorDateRangePicker/issues/15#issuecomment-619032420 , or unsubscribe https://github.com/notifications/unsubscribe-auth/APBCCXJJWTJCNX2LKIRHH2DROGML5ANCNFSM4MQC37LA . https://github.com/notifications/beacon/APBCCXKP3HH75BG2FPZJDUDROGML5A5CNFSM4MQC37LKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOETS26ZA.gif

[jdtcn]

Hi.

Try something like this:

<style>
    .dthighlight {
        background-color: aquamarine;
    }
</style>

<DateRangePicker @ref="Picker"
                 DaysEnabledFunction="DaysEnabledFunction"
                 OnMonthChanged="OnMonthChanged"
                 CustomDateClass="dthighlight"
                 CustomDateFunction="CustomDateFunction" />

@code {
    DateRangePicker Picker;

    // Don't forget to set initial values in OnInitialized event
    List<DateTimeOffset> DisabledDays { get; set; } = new List<DateTimeOffset>();

    private bool DaysEnabledFunction(DateTimeOffset day)
    {
        // Place your disable logic here
        return !DisabledDays.Any(d => d.Day == day.Day);
    }

    private bool CustomDateFunction(DateTimeOffset day)
    {
        // Place your highlight logic here
        return DisabledDays.Any(d => d.Day == day.Day - 1);
    }

    private void OnMonthChanged()
    {
        // Update DisabledDays array from database here

        var leftMonth = Picker.LeftCalendar.Month;
        var rightMonth = Picker.RightCalendar.Month;
        DisabledDays = new List<DateTimeOffset> {
            new DateTime(leftMonth.Year, leftMonth.Month, leftMonth.Month),
            new DateTime(rightMonth.Year, rightMonth.Month, rightMonth.Month)
        };
    }
}

It'll give you:

[spyofborg]

Hi,

Thank you for your very fast reply.

I start to understand how it works, I have a list DisabledDays where I can add the dates.

DateTime dt = DateTime.Now.AddDays(2);

    DisabledDays.Add(dt);

    // Place your disable logic here

    return !DisabledDays.Any(d => d.Day == day.Day);

And that works, the date today +2 is disabled!

But final question though is, without making a foreach loop, is there a way that you can disable every weekend by default or will I have to do a foreach loop and add the weekends that way?

Before it was d => d.DayOfWeek != DayOfWeek.Sunday && d.DayOfWeek != DayOfWeek.Saturday in the DaysEnabledFunction.

But now we have a list, so still wonder if you can avoid doing a foreach.

But, I’m glad it is possible to do highlights also, your picker is really nice and free! 😊

Thank you,

David

From: Sergey notifications@github.com Sent: zondag 28 juni 2020 21:05 To: jdtcn/BlazorDateRangePicker BlazorDateRangePicker@noreply.github.com Cc: spyofborg github@viaene.eu; State change state_change@noreply.github.com Subject: Re: [jdtcn/BlazorDateRangePicker] Feature request: disable weekends? (#15)

Hi.

Try something like this:

<DateRangePicker @ref="Picker"

             DaysEnabledFunction="DaysEnabledFunction"

             OnMonthChanged="OnMonthChanged"

             CustomDateClass="dthighlight"

             CustomDateFunction="CustomDateFunction" />

@code {

DateRangePicker Picker;

List<DateTimeOffset> DisabledDays { get; set; } = new List<DateTimeOffset>();

private bool DaysEnabledFunction(DateTimeOffset day)

{

    // Place your disable logic here

    return !DisabledDays.Any(d => d.Day == day.Day);

}

private bool CustomDateFunction(DateTimeOffset day)

{

    // Place your highlight logic here

    return DisabledDays.Any(d => d.Day == day.Day - 1);

}

private void OnMonthChanged()

{

    // Update DisabledDays array from database here

    var leftMonth = Picker.LeftCalendar.Month;

    var rightMonth = Picker.RightCalendar.Month;

    DisabledDays = new List<DateTimeOffset> {

        new DateTime(leftMonth.Year, leftMonth.Month, leftMonth.Month),

        new DateTime(rightMonth.Year, rightMonth.Month, rightMonth.Month)

    };

}

}

It'll give you:

https://user-images.githubusercontent.com/47177226/85955924-7c9db080-b99b-11ea-844d-5d477f8f4dc1.png

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/jdtcn/BlazorDateRangePicker/issues/15#issuecomment-650808075 , or unsubscribe https://github.com/notifications/unsubscribe-auth/APBCCXOKWHC77IJLZ2WSOC3RY6H4VANCNFSM4MQC37LA . https://github.com/notifications/beacon/APBCCXI6ON7ZACJKAQXRDA3RY6H4VA5CNFSM4MQC37LKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOE3FIWCY.gif

[jdtcn]

To disable weekends and days in the array:

private bool DaysEnabledFunction(DateTimeOffset day)
{
    if (day.DayOfWeek == DayOfWeek.Sunday || day.DayOfWeek == DayOfWeek.Saturday)
    {
        return false;
    }
    return !DisabledDays.Any(d => d.Day == day.Day);
}