I'm making a scheduler using Material-UI's DataGrid component and it looks great so far. Here's how I have it set up:
import React, {useState, useEffect } from "react";
import {DataGrid, GridToolbar} from '@material-ui/data-grid';
import axios from 'axios'
const columns = [
{
field: 'name',
headerName: 'Name',
editable: true,
flex: 1
},
{
field: 'email',
headerName: 'Email',
editable: true,
flex: 1
},
{
field: 'number',
headerName: 'Phone Number',
editable: true,
flex: 1
},
{
field: 'appointmentType',
headerName: 'Appointment Type',
editable: true,
flex: 1
},
{
field: 'description',
headerName: 'Description',
editable: true,
flex: 1
},
{
field: 'date',
headerName: 'Date',
editable: true,
width: 150,
type: 'dateTime'
},
];
const Scheduler = () => {
const [tableData, setTableData] = useState([]);
useEffect(() => {
fetchData()
}, [])
const fetchData = async () => {
const {data} = await axios.get("/api/patients")
setTableData(data.data)
console.log(data)
}
return (
<div style={{display: 'flex', flexDirection: 'column', paddingTop: 100}}>
<div style={{textAlign: 'center', paddingBottom: 30}}>
<h1>Appointments</h1>
</div>
<div style={{display:'flex', justifyContent: 'center', alignItems:'center'}}>
<div style={{height: 400, width: '90%'}}>
<DataGrid
getRowId={(row) => row._id}
rows={tableData}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
autoHeight
components={{
Toolbar: GridToolbar
}}
/>
</div>
</div>
</div>
);
};
export default Scheduler;
I have a couple questions.
- How do I make the datetime picker built into the datagrid (when
type:is declared as'datetime') localized? This system is being designed for something outside the US, so I'd like to localize it to British English. - How would I restrict certain dates and times in the aforementioned datetime picker?
Thank you.