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