Add calendar days selection / switch npm to yarn

src/components/Schedule/DaySelector.js

@@ -1,13 +1,84 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
+import interaction from '@fullcalendar/interaction';
+import { DateTime } from 'luxon';
 
 export default function DaySelector() {
+	const [eventsList, setEventsList] = useState([]);
 
-		return (
-			<FullCalendar
-				initialView='dayGridMonth'
-				plugins={[dayGridPlugin]}
-			/>
-		);
+	useEffect(() => {
+		console.log('Latest events list: ', eventsList);
+	}, [eventsList]);
+
+	const handleSelect = (info) => {
+		let updatedEvents = [];
+		let datesList = new Set();
+
+		/// Add each date selected to datesList
+		let start = DateTime.fromISO(info.startStr);
+		let end = DateTime.fromISO(info.endStr);
+
+		// Check if selection contains only one day
+		let singleDay = end.toISODate() === start.plus({ days: 1 }).toISODate();
+
+		if (singleDay) {
+			// When a single date is selected
+			let selectedDate = info.startStr;
+			let selectedEvent = { start: selectedDate, display: 'background' };
+
+			// If selectedEvent exists in the list, find and set its index
+			let selectedEventIndex;
+			for (let index = 0; index < eventsList.length; index++) {
+				const eventDate = eventsList[index].start;
+				if (selectedDate === eventDate) {
+					// If it's the case, set current index to selectedEventIndex
+					selectedEventIndex = index;
+					break;
+				}
+			}
+
+			if (selectedEventIndex !== undefined) {
+				// If selectedEventIndex exists, remove the corresponding event from the list
+				eventsList.splice(selectedEventIndex, 1);
+				updatedEvents = [...eventsList];
+			} else {
+				// Add selected event to the list
+				updatedEvents = [...eventsList, selectedEvent];
+			}
+			// setEventsList(updatedEvents);
+		} else {
+			// When a range of dates is selected
+			let currentDate = start;
+			while (!(+end === +currentDate)) {
+				// Add currentDate to the datesList
+				datesList.add(currentDate.toISODate());
+				let newDate = currentDate.plus({ days: 1 });
+				currentDate = newDate;
+			}
+
+			// Add each date from the eventsList to datesList
+			eventsList.forEach((event) => {
+				datesList.add(event.start);
+			});
+
+			// Create events from datesList and add them to updatedEvents
+			datesList.forEach((date) => {
+				updatedEvents.push({ start: date, display: 'background' });
+			});
+		}
+		setEventsList(updatedEvents);
+	};
+
+	return (
+		<FullCalendar
+			initialView='dayGridMonth'
+			plugins={[dayGridPlugin, interaction]}
+			selectable={true}
+			unselectAuto={false}
+			select={(info) => handleSelect(info)}
+			defaultAllDay={true}
+			events={eventsList}
+		/>
+	);
 }