[pickers] Import custom holiday for date picker

[fakhamatia]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I want import Jalali holidays to date picker and mark them red in view. It is possible ?

Source: Persian Calendar

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[alexfauquette]

Yes you can. With slotPorps you can override day props.

https://codesandbox.io/s/angry-ully-sw8goj?file=/demo.tsx

This king of behavior could be interesting in the docs. We already have this example. But it's overcomplicated for style modification

[fakhamatia]

Great! I want to use DatePicker not DateCalendar, it's not different? And If I want to show a title or description, what are your suggestion? Like title or footer for MuiPaper

[alexfauquette]

I took the calendar for simplicity, but you should have access to the same slotProps in other components

For more advanced customization, you have https://mui.com/x/react-date-pickers/custom-layout/ and https://mui.com/x/react-date-pickers/custom-components/ docs pages

[isrezaei]

Hi , i got a issue ! why when i use dateAdapter={AdapterDateFnsJalali} in LocalizationProvider , in slotProps={{day : (ownerState)}}, data of ownerState , part day object , i got a full data time string ! but when i use AdapterDayjs in dateAdapter , in slotProps={{day : (ownerState)}} , ownerState part of day , i got information about every day month and years ! why ?

in this case i got full string time stamp :

    <LocalizationProvider
        dateAdapter={AdapterDateFnsJalali} // i use AdapterDateFnsJalali
        adapterLocale={faJalali}
        localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}  >
        <DemoContainer components={['DatePicker']}>
            <DatePicker
                label="date"
                clearable
                slotProps={{
                    day: (ownerState) => {
                        const DATES = {
                            month : ownerState.day['$M'], //i got string full time stamp !!
                            day : ownerState.day['$D'], //i got string full time stamp !!
                        }
                    }
                }}
            />
        </DemoContainer>
    </LocalizationProvider>

but in this case i got full info about date

    <LocalizationProvider
        dateAdapter={AdapterDayjs} //i use AdapterDayjs
    >
        <DemoContainer components={['DatePicker']}>
            <DatePicker
                label="date"
                clearable
                slotProps={{
                    day: (ownerState) => {
                        const DATES = {
                            month : ownerState.day['$M'], i got courrect info about each month 
                            day : ownerState.day['$D'],i got courrect info about each day
                        }
                    }
                }}
            />
        </DemoContainer>
    </LocalizationProvider>

help me thanks !

[alexfauquette]

@isrezaei could you open a new issue, with a codesandbox containing the two example?

This issue is dedicated to improving the documentation of day customization which is not related to your message