85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
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([]);
|
|
|
|
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}
|
|
/>
|
|
);
|
|
}
|