For my current project, I am utilizing a Datepicker component. I am looking to incorporate a custom information button in the upper right corner of the calendar layout, similar to the example image provided below:
https://i.stack.imgur.com/fHMbn.png
Unfortunately, I couldn't find much guidance in the documentation. If anyone knows whether this customization is feasible and how to implement it, your assistance would be greatly appreciated.
--- EDIT ---
Following suggestions, I have added a button intended to overlay the calendar. Here is the code snippet for the button :
const useStyles = makeStyles({
paper: {
outline: 'none',
padding: '10px',
position: 'absolute',
left: '50%',
top: '50%',
WebkitTransform: 'translate(-50%, -50%)',
transform: ' translate(-50%, -50%)',
width: 'auto',
backgroundColor: 'white',
textAlign: 'center',
},
infoButtonShown: {
display: 'inline-flex',
position: 'absolute',
left: '50%',
top: '50%',
WebkitTransform: 'translate(-50%, -50%)',
transform: ' translate(-50%, -50%)',
color: 'black',
},
infoButtonHidden: {
display: 'none',
position: 'absolute',
left: '50%',
top: '50%',
WebkitTransform: 'translate(-50%, -50%)',
transform: ' translate(-50%, -50%)',
color: 'black',
},
});
<IconButton
className={ isInfoOpen ? classes.infoButtonShown :
classes.infoButtonHidden
}>
<InfoIcon fontSize="small" />
</IconButton>
However, the button does not appear on top of the calendar as expected. I have experimented with different z-index values but have not succeeded. Any insights on how I can position it above the calendar?
--- EDIT 2 ---
Building upon Ibrahim's suggestion, I am attempting to create a customized toolbar using ToolbarComponent :
import { DatePickerToolbar } from '@material-ui/pickers/DatePicker/DatePickerToolbar';
ToolbarComponent={(props) => (
<div>
<DatePickerToolbar {...props} />
<IconButton
className={
isInfoOpen
? classes.infoButtonShown
: classes.infoButtonHidden
}
>
<InfoIcon fontSize="small" />
</IconButton>
</div>
)}
However, this implementation results in an error :
× TypeError: Cannot read property 'trackMetric' of null
I am quite lost here, especially given the lack of documentation on DatePickerToolbar. I had to provide the full path to avoid errors regarding its location within the @material-ui/pickers package. Is there a suitable toolbar available that I can use for this purpose?