in progress

README.md

@@ -16,9 +16,11 @@ Inspired by [Elegant New Tab](https://addons.mozilla.org/en-US/firefox/addon/ele
   - allow to change date ?
   - integrate with calendar
 - double click to delete entry
-- fix done task button icon
 - handle multiple open tabs
 - firefox sync
+- select locale
+- improve calendar display
+- integrate calendar (to show upcoming events)
 
 # Develop
 

package.json

@@ -7,10 +7,10 @@
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.4",
+    "@mui/x-date-pickers": "^5.0.13",
     "dayjs": "^1.11.7",
     "marked": "^4.2.5",
     "react": "^18.2.0",
-    "react-calendar": "^4.0.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",

src/App.jsx

@@ -7,7 +7,11 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import {Container, Paper} from '@mui/material';
 import {VFlex, HFlex} from "./components/base"
 import {deepOrange, blueGrey} from '@mui/material/colors';
-console.log("ORANGE", deepOrange)
+import { CalendarPicker, LocalizationProvider, } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+require('dayjs/locale/fr')
+
 const theme = createTheme ({
   palette: {
     mode: "dark",
@@ -23,9 +27,12 @@ function App() {
           <VFlex style={{gap: "20px"}}>
             <div/>
             <HFlex style={{justifyContent: "space-around"}}>
-              <div style={{flexGrow: 1}}/>
+              <div style={{flexGrow: 1}}>
+              </div>
               <div style={{maxWidth: "300px"}}>
-                <Calendar/>
+                <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
+                  <CalendarPicker onChange={()=>{}} reduceAnimations={true} readOnly={true}></CalendarPicker>
+                </LocalizationProvider>
               </div>
             </HFlex>
             <div style={{display: "grid", gridTemplateColumns: "1fr 2fr", gap: "50px"}}>