Browse Source

allow users to see what is available in the calendar

José C.S. Curet 1 year ago
parent
commit
2cbd4e9ce2
2 changed files with 33 additions and 7 deletions
  1. 2
    0
      package.json
  2. 31
    7
      screens/calendar.js

+ 2
- 0
package.json View File

@@ -17,6 +17,7 @@
17 17
     "@react-navigation/drawer": "^6.5.1",
18 18
     "@react-navigation/native": "^6.0.14",
19 19
     "@react-navigation/native-stack": "^6.9.2",
20
+    "@types/react-native": "~0.70.6",
20 21
     "expo": "~47.0.7",
21 22
     "expo-dev-client": "~2.0.1",
22 23
     "expo-status-bar": "~1.4.2",
@@ -24,6 +25,7 @@
24 25
     "react": "18.1.0",
25 26
     "react-dom": "18.1.0",
26 27
     "react-native": "0.70.5",
28
+    "react-native-calendars": "^1.1292.0",
27 29
     "react-native-gesture-handler": "^2.8.0",
28 30
     "react-native-reanimated": "~2.12.0",
29 31
     "react-native-safe-area-context": "4.4.1",

+ 31
- 7
screens/calendar.js View File

@@ -1,17 +1,41 @@
1
-import * as React from 'react';
2
-import { StyleSheet, View, Text } from 'react-native';
1
+import React, { useState } from 'react';
2
+import { StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';
3 3
 import Header from '../shared/header';
4
+import Calendar from 'react-native-calendars/src/calendar';
5
+import { Agenda, calendarTheme } from 'react-native-calendars';
4 6
 
5
-export default function Calendario({navigation}) {
6
-    return (
7
-        <View style={styles.container}>
8
-         <Text>Calendario Screen</Text>
7
+export default function Calendario({ navigation }) {
8
+    const [items, setItems] = useState({
9
+      '2022-12-06': [{name: 'matricula'}],
10
+      '2022-12-07': [{name: 'seguir metiendole mano al sprint 🥵'}],
11
+      '2022-12-08': [],
12
+    });
13
+  
14
+    function renderItem(item) {
15
+      return (
16
+        <View>
17
+            <Text style={[styles.item, {height: item.height}]}>{item.name}</Text>
9 18
         </View>
10
-    )
19
+      );
20
+    }
21
+  
22
+    return (
23
+      <Agenda
24
+        items={items}
25
+        renderItem={renderItem}
26
+      />
27
+    );
11 28
 }
12 29
 
13 30
 const styles = StyleSheet.create({
14 31
     container: {
15 32
         padding: 24
33
+    },
34
+    item: {
35
+      backgroundColor: 'white',
36
+      flex: 1,
37
+      padding: 15,
38
+      marginRight: 10,
39
+      marginTop: 32
16 40
     }
17 41
 });