theoludwig/p61-project
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

feat: add a calendar on the history page

Browse Source
This commit is contained in:
Maxime Rumpler 2024-03-15 15:30:19 +01:00
parent 33f5ebec62
commit 7b8ca39eb2
3 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/(pages)/history.tsx
View File

@ -1,8 +1,12 @@
import { StyleSheet } from "react-native"
import { Button } from "react-native-paper"
import { Calendar } from "react-native-calendars"
import { SafeAreaView } from "react-native-safe-area-context"
import { useState } from "react"
const History: React.FC = () => {
const [selected, setSelected] = useState("")
return (
<SafeAreaView style={styles.container}>
<Button
@ -13,6 +17,31 @@ const History: React.FC = () => {
>
Press me
</Button>
<Calendar
onDayPress={(day) => {
setSelected(day.dateString)
}}
markedDates={{
"2023-03-01": { selected: true, marked: true, selectedColor: "blue" },
"2023-03-02": { marked: true },
"2023-03-03": { selected: true, marked: true, selectedColor: "blue" },
[selected]: {
selected: true,
disableTouchEvent: true,
selectedColor: "orange",
},
}}
theme={{
backgroundColor: "#000000",
calendarBackground: "#000000",
textSectionTitleColor: "#b6c1cd",
selectedDayBackgroundColor: "#00adf5",
selectedDayTextColor: "#ffffff",
todayTextColor: "#00adf5",
dayTextColor: "#2d4150",
textDisabledColor: "#d9efff",
}}
/>
</SafeAreaView>
)
}

56
package-lock.json generated
View File

@ -23,6 +23,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.4",
"react-native-calendars": "1.1304.1",
"react-native-paper": "5.12.3",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "3.29.0",
@ -18148,6 +18149,15 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"optional": true,
"engines": {
"node": "*"
}
},
"node_modules/mrmime": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@ -19553,6 +19563,23 @@
"react": "18.2.0"
}
},
"node_modules/react-native-calendars": {
"version": "1.1304.1",
"resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1304.1.tgz",
"integrity": "sha512-D1aU5lLhi7KCCCeHhKOkcC41K8s3paiiIfMaOQx6NezCbgKHelqT01WPpAZLh3Cm0QTC5EZo0oDPD0mCdKrDgQ==",
"dependencies": {
"hoist-non-react-statics": "^3.3.1",
"lodash": "^4.17.15",
"memoize-one": "^5.2.1",
"prop-types": "^15.5.10",
"react-native-swipe-gestures": "^1.0.5",
"recyclerlistview": "^4.0.0",
"xdate": "^0.8.0"
},
"optionalDependencies": {
"moment": "^2.29.4"
}
},
"node_modules/react-native-paper": {
"version": "5.12.3",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.3.tgz",
@ -19600,6 +19627,11 @@
"react-native": "*"
}
},
"node_modules/react-native-swipe-gestures": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
"integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
},
"node_modules/react-native-vector-icons": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz",
@ -19997,6 +20029,20 @@
"node": ">=0.10.0"
}
},
"node_modules/recyclerlistview": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz",
"integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==",
"dependencies": {
"lodash.debounce": "4.0.8",
"prop-types": "15.8.1",
"ts-object-utils": "0.0.5"
},
"peerDependencies": {
"react": ">= 15.2.1",
"react-native": ">= 0.30.0"
}
},
"node_modules/redent": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@ -21654,6 +21700,11 @@
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
},
"node_modules/ts-object-utils": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
"integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
},
"node_modules/tsconfig-paths": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@ -22400,6 +22451,11 @@
"uuid": "dist/bin/uuid"
}
},
"node_modules/xdate": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/xdate/-/xdate-0.8.2.tgz",
"integrity": "sha512-sNBlLfOC8S3V0vLDEUianQOXcTsc9j4lfeKU/klHe0RjHAYn0CXsSttumTot8dzalboV8gZbH38B+WcCIBjhFQ=="
},
"node_modules/xml": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",

1
package.json
View File

@ -31,6 +31,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.4",
"react-native-calendars": "1.1304.1",
"react-native-paper": "5.12.3",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "3.29.0",