CODEWITHSUNDEEP
reactjscalendarjsx
michaelpnrs
michaelpnrs

Reputation: 111

Is there a way to enable only certain calendar options?

I am trying to create a calendar which depends on a parameter. If the user wants a weekend pass I need to let him choose only one set of the days Friday, Saturday, Sunday in the period of one month.

Example: If I choose to buy a weekend pass today 09/09/2021, I can have the options 10-12/09,17-19/09,24-26/09 for September.

The calendar has to be Infinite in order to be renewed every day. I have created the values date, month, year to get the current full date, which I parse to minDate maxDate in order to limit the options into only one month.

Code:

render() {
        let newDate = new Date()
        let date = newDate.getDate();
        let month = newDate.getMonth();
        let year = newDate.getFullYear();
        let weeklyVignette = newDate.getDate();
        const {label, t, value = '', loading, error, width, height, displayOptions, locale, key, required, validateOnBlur,
            theme, name, proposed, disabled = false, onChange, minDateBeforeToday, setError, available=true,
            minDate = new Date(year, month, date),
            maxDate = new Date(year, month, date+30)} = this.props;
        const {selected} = this.state;
        const _locale ={...locale, ...{weekdays: locale.weekdays.map(day => t(day))}}

        const resultCalendar =
            this.state.open && !disabled
                ? <InfiniteCalendar
                    width={width}
                    height={height}
                    selected={value||selected||proposed}
                    displayOptions={displayOptions}
                    locale={_locale}
                    theme={theme}
                    minDate={minDate}
                    weeklyVignetteDays = { (weeklyVignette===4 && weeklyVignette===5 && weeklyVignette===6 )}
                    max = { new Date(year, month, date+30) } // Maximum month to render
                    min = { new Date(year, month, date) } // Minimum month to render
                    maxDate={maxDate}
                    onSelect={(e) => this.onClick(e, onChange)}
                />
                : null;

How can I block all the days of the current month except Fridays, Saturdays and Sundays?

Any thoughts?

Upvotes: 0

Views: 153

Answers (1)

Yasin Br
Yasin Br

Reputation: 1799

you should use the property of disabledDays

For example, to disable Monday and Sunday: [0, 6]

in your case you should use: disabledDays = [0,1,2,3]

Upvotes: 2

Related Questions