victorAnumudu
112 lines
5.8 KiB
React
112 lines
5.8 KiB
React
import React, { useCallback, useState } from "react";
|
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
|
import EventCalendar from "./EventCalendar";
|
|
import ExternalDraggable from "./ExternalDraggable";
|
|
|
|
|
|
export default function Calendar(){
|
|
|
|
// const [draggedEvent, setDraggedEvent] = useState('undroppable')
|
|
// const handleDragStart = (event) => {
|
|
// setDraggedEvent(event)
|
|
// }
|
|
|
|
const dummyEvents = [
|
|
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
|
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
|
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
|
|
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
|
|
]
|
|
|
|
return(
|
|
<>
|
|
<BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="card card-statistics">
|
|
<div className="card-header">
|
|
<div className="card-heading">
|
|
<h4 className="card-title">Event Calendar</h4>
|
|
</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<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">
|
|
Add New Event
|
|
</button>
|
|
<p className="mt-3">
|
|
Drag and drop your event or click in the calendar.
|
|
</p>
|
|
{/* {dummyEvents.map((item, index) => (
|
|
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
|
|
draggable="true"
|
|
onDragStart={() =>
|
|
handleDragStart({...item})
|
|
}
|
|
>
|
|
<span></span> {item.title}
|
|
</div>
|
|
))} */}
|
|
<ExternalDraggable dummyEvents={dummyEvents} />
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="checkbox" value=""
|
|
id="defaultCheck1" />
|
|
<label className="form-check-label" htmlFor="defaultCheck1">
|
|
Remove After Drop
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-9">
|
|
<div className="event-calendar">
|
|
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
|
<EventCalendar />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Event Modal */}
|
|
<div className="modal fade" id="eventModal" tabIndex="-1" role="dialog">
|
|
<div className="modal-dialog modal-dialog-centered" role="document">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h5 className="modal-title" id="verticalCenterTitle">Add New Event</h5>
|
|
<button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<form>
|
|
<div className="form-group">
|
|
<label>Event Name</label>
|
|
<input type="email" className="form-control" id="eventname" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Choose Event Color</label>
|
|
<select className="form-control">
|
|
<option>Primary</option>
|
|
<option>Warning</option>
|
|
<option>Success</option>
|
|
<option>Danger</option>
|
|
</select>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" className="btn btn-success">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |