MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

calendar fixing contd

Browse Source
This commit was merged in pull request #14.
This commit is contained in:
victorAnumudu
2025-01-20 06:15:11 +01:00
parent d1d6c6a9fc
commit cd7e6fdf75
2 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/calendar/Calendar.jsx
+33 -11
View File
@@ -11,13 +11,34 @@ export default function Calendar(){
// setDraggedEvent(event)
// }
const dummyEvents = [
const events = [
{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')}
]
const [dummyEvents, setDummyEvents] = useState(events)
const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
const [newEvent, setNewEvent] = useState({
title: '', color: ''
})
const handleEditEvent = ({target:{name,value}}) => {
setNewEvent(prev => ({...prev, [name]:value}))
}
const handleAddNewEvent = () => {
if(newEvent.title && newEvent.color){
const eventToAdd = {...newEvent}
setDummyEvents(prev => ([...prev, eventToAdd]))
setNewEvent({title: '', color: ''})
}
}
return(
<>
<BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
@@ -51,8 +72,8 @@ export default function Calendar(){
))} */}
<ExternalDraggable dummyEvents={dummyEvents} />
<div className="form-check">
<input className="form-check-input" type="checkbox" value=""
id="defaultCheck1" />
<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>
@@ -62,7 +83,7 @@ export default function Calendar(){
<div className="col-xl-9">
<div className="event-calendar">
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
<EventCalendar />
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
</div>
</div>
</div>
@@ -86,15 +107,16 @@ export default function Calendar(){
<form>
<div className="form-group">
<label>Event Name</label>
<input type="email" className="form-control" id="eventname" />
<input type="email" className="form-control" id="eventname" name='title' value={newEvent.title} onChange={handleEditEvent} />
</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 className="form-control" name='color' value={newEvent.color} onChange={handleEditEvent}>
<option value={''}>Select</option>
<option value={'fc-event-primary'}>Primary</option>
<option value={'fc-event-warning'}>Warning</option>
<option value={'fc-event-success'}>Success</option>
<option value={'fc-event-danger'}>Danger</option>
</select>
</div>
@@ -102,7 +124,7 @@ export default function Calendar(){
</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>
<button type="button" className="btn btn-success" onClick={handleAddNewEvent}>Save changes</button>
</div>
</div>
</div>