Compare commits

...

6 Commits

2 changed files with 18 additions and 16 deletions
+8 -6
View File
@@ -54,12 +54,12 @@ export default function Calendar(){
<div className="row"> <div className="row">
<div className="col-xl-3"> <div className="col-xl-3">
<div id="external-events"> <div id="external-events">
<button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal"> {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
Add New Event Add New Event
</button> </button>
<p className="mt-3"> <p className="mt-3">
Drag and drop your event or click in the calendar. Drag and drop your event or click in the calendar.
</p> </p> */}
{/* {dummyEvents.map((item, index) => ( {/* {dummyEvents.map((item, index) => (
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
draggable="true" draggable="true"
@@ -71,19 +71,21 @@ export default function Calendar(){
</div> </div>
))} */} ))} */}
<ExternalDraggable dummyEvents={dummyEvents} /> <ExternalDraggable dummyEvents={dummyEvents} />
<div className="form-check"> {/* <div className="form-check">
<input className="form-check-input" type="checkbox" value={removeAfterDrop} <input className="form-check-input" type="checkbox" value={removeAfterDrop}
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} /> id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
<label className="form-check-label" htmlFor="defaultCheck1"> <label className="form-check-label" htmlFor="defaultCheck1">
Remove After Drop Remove After Drop
</label> </label>
</div> </div> */}
</div> </div>
</div> </div>
<div className="col-xl-9"> <div className="col-xl-9">
<div className="event-calendar"> <div className="event-calendar">
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */} <EventCalendar
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} /> removeAfterDrop={removeAfterDrop}
setDummyEvents={setDummyEvents}
/>
</div> </div>
</div> </div>
</div> </div>
+10 -10
View File
@@ -64,15 +64,15 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
} }
function handleEventClick(clickInfo) { // function handleEventClick(clickInfo) {
if ( // if (
confirm( // confirm(
`Are you sure you want to delete the event '${clickInfo.event.title}'` // `Are you sure you want to delete the event '${clickInfo.event.title}'`
) // )
) { // ) {
clickInfo.event.remove(); // clickInfo.event.remove();
} // }
} // }
function handleEvents(events) { function handleEvents(events) {
// setCurrentEvents(events); // setCurrentEvents(events);
@@ -98,7 +98,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
events={currentEvents} events={currentEvents}
select={handleDateSelect} select={handleDateSelect}
eventContent={renderEventContent} // custom render function eventContent={renderEventContent} // custom render function
eventClick={handleEventClick} // eventClick={handleEventClick}
eventsSet={handleEvents} // called after events are initialized/added/changed/removed eventsSet={handleEvents} // called after events are initialized/added/changed/removed
/* you can update a remote database when these fire: /* you can update a remote database when these fire:
eventAdd={function(){}} eventAdd={function(){}}