diff --git a/frontend/src/components/calendar/TaskDataHandler.jsx b/frontend/src/components/calendar/TaskDataHandler.jsx
index d96c381..ff8a5df 100644
--- a/frontend/src/components/calendar/TaskDataHandler.jsx
+++ b/frontend/src/components/calendar/TaskDataHandler.jsx
@@ -4,7 +4,7 @@ let eventGuid = 0;
 
 const mapResponseToEvents = response => {
   return response.map(item => ({
-    id: createEventId(),
+    id: item.id,
     title: item.title,
     start: item.start_event,
     end: item.end_event,
diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx
index 1740df4..b4f8430 100644
--- a/frontend/src/components/calendar/calendar.jsx
+++ b/frontend/src/components/calendar/calendar.jsx
@@ -5,6 +5,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getEvents, createEventId } from "./TaskDataHandler";
+import axiosInstance from "../../api/configs/AxiosConfig";
 
 export default class Calendar extends React.Component {
   state = {
@@ -101,7 +102,14 @@ export default class Calendar extends React.Component {
 
   handleEventClick = clickInfo => {
     if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
-      clickInfo.event.remove();
+      axiosInstance
+      .delete(`todo/${clickInfo.event.id}/`)
+      .then(response => {
+        clickInfo.event.remove();
+      })
+      .catch(error => {
+        console.error("Error deleting Task:", error);
+      });
     }
   };