Eintrag in SQlite einfügen

app/(tabs)/calendar.tsx

@@ -1,11 +1,15 @@
+import { Ionicons } from "@expo/vector-icons";
 import * as Calendar from "expo-calendar";
 import * as SQLite from "expo-sqlite";
 import React, { useEffect, useState } from "react";
 import {
+  Button,
   FlatList,
+  Modal,
   SafeAreaView,
   StyleSheet,
   Text,
+  TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -30,6 +34,10 @@ export default function CalendarTab() {
   const [calendarType, setCalendarType] = useState<"calendar" | "reminder">(
     "calendar"
   );
+  const [modalVisible, setModalVisible] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  const [newStart, setNewStart] = useState("");
+  const [newEnd, setNewEnd] = useState("");
 
   useEffect(() => {
     if (source === "sqlite") {
@@ -129,6 +137,21 @@ export default function CalendarTab() {
     }
   };
 
+  const addEventToDB = async () => {
+    if (!newTitle || !newStart || !newEnd) return;
+    await db.execAsync(
+      `INSERT INTO events (id, title, startDate, endDate) VALUES ('${Date.now()}', '${newTitle.replace(
+        /'/g,
+        "''"
+      )}', '${newStart}', '${newEnd}');`
+    );
+    setModalVisible(false);
+    setNewTitle("");
+    setNewStart("");
+    setNewEnd("");
+    await loadEventsFromDB();
+  };
+
   const renderItem = ({ item }: { item: EventItem }) => (
     <View style={styles.item}>
       <Text style={styles.title}>{item.title}</Text>
@@ -141,6 +164,20 @@ export default function CalendarTab() {
 
   return (
     <SafeAreaView style={styles.container}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          alignItems: "center",
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => setModalVisible(true)}
+          style={{ padding: 10 }}
+        >
+          <Ionicons name="add-circle" size={32} color="#007AFF" />
+        </TouchableOpacity>
+      </View>
       <View style={styles.switchRow}>
         <TouchableOpacity
           style={[
@@ -204,6 +241,49 @@ export default function CalendarTab() {
           source === "sqlite" ? loadEventsFromDB : loadEventsFromDevice
         }
       />
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <Text style={styles.header}>Neuer SQLite-Eintrag</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="Titel"
+              value={newTitle}
+              onChangeText={setNewTitle}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Start (YYYY-MM-DD HH:mm)"
+              value={newStart}
+              onChangeText={setNewStart}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder="Ende (YYYY-MM-DD HH:mm)"
+              value={newEnd}
+              onChangeText={setNewEnd}
+            />
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                marginTop: 10,
+              }}
+            >
+              <Button
+                title="Abbrechen"
+                onPress={() => setModalVisible(false)}
+              />
+              <Button title="Speichern" onPress={addEventToDB} />
+            </View>
+          </View>
+        </View>
+      </Modal>
     </SafeAreaView>
   );
 }
@@ -237,4 +317,25 @@ const styles = StyleSheet.create({
   },
   activeButton: { backgroundColor: "#007AFF" },
   switchText: { color: "#333", fontWeight: "bold" },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContent: {
+    width: 320,
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 20,
+    elevation: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 12,
+    fontSize: 16,
+  },
 });