[x] I have searched the Issues to see if this bug has already been reported
[x] I have tested the latest version
Summary
We could introduce an additional prop into Datepicker called tilesDisabled which accepts a function that tells Datepicker which dates should be "disabled for selection". If 30th of Nov is disabled, then (1) the user shouldn't be able to select it; and (2) the appropriate "graying-out" is applied to the tile.
import React, { useState } from 'react';
import Calendar from 'react-calendar';
const disabledDates = [tomorrow, in3Days, in5Days];
function tileDisabled({ date, view }) {
// Disable tiles in month view only
if (view === 'month') {
// Check if a date React-Calendar wants to check is on the list of disabled dates
return disabledDates.find(dDate => isSameDay(dDate, date));
}
}
function MyApp() {
const [value, setValue] = useState(new Date());
// technically this would be <Datepicker />
return (
<Calendar
onChange={onChange}
value={date}
tileDisabled={tileDisabled}
/>
);
}
I guess this is an RFC haha - I'm happy to look into implementing it if we're OK with the proposed API, though performance might need some consideration. I looked around the repo's Issues and couldn't find any mention of this.
I had a look at the Datepicker source-code and this should be doable. Edge-cases would be annoying though, so there's a chance I'd run out of time before I can finish this.
Context
I can do the same thing with react-calendar, but frankly I can't be bothered to style it myself since I'd rather keep everything under one theme (i.e. the Flowbite theme), and plus the Flowbite Datepicker already looks gorgeous enough for me.
Ultimately, I want to disable certain dates from selection because I'd want the user to only select dates that have "data" in them (e.g. in the context of my mental health journalling app, it doesn't make sense for the user to navigate to a date that doesn't have any journal entries).
Summary
We could introduce an additional prop into Datepicker called
tilesDisabled
which accepts a function that tells Datepicker which dates should be "disabled for selection". If 30th of Nov is disabled, then (1) the user shouldn't be able to select it; and (2) the appropriate "graying-out" is applied to the tile.We can probably follow the func signature in react-calendar for this https://github.com/wojtekmaj/react-calendar/wiki/Recipes#selectively-disable-tiles
I guess this is an RFC haha - I'm happy to look into implementing it if we're OK with the proposed API, though performance might need some consideration. I looked around the repo's Issues and couldn't find any mention of this.
I had a look at the Datepicker source-code and this should be doable. Edge-cases would be annoying though, so there's a chance I'd run out of time before I can finish this.
Context
I can do the same thing with react-calendar, but frankly I can't be bothered to style it myself since I'd rather keep everything under one theme (i.e. the Flowbite theme), and plus the Flowbite Datepicker already looks gorgeous enough for me.
Ultimately, I want to disable certain dates from selection because I'd want the user to only select dates that have "data" in them (e.g. in the context of my mental health journalling app, it doesn't make sense for the user to navigate to a date that doesn't have any journal entries).