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

calendar component added

Browse Source
This commit is contained in:
victorAnumudu
2024-12-17 02:57:53 +01:00
parent 263fec36c5
commit 61c50c03e4
4 changed files with 164 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/calendar/Calendar.jsx
+25 -16
View File
@@ -1,9 +1,22 @@
import React from "react";
import React, { useCallback, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import EventCalendar from "./EventCalendar";
export default function Calendar(){
const [draggedEvent, setDraggedEvent] = useState()
const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
const formatName = (name) => `${name}`
const dummyEvents = [
{id: '1', name: 'Family Vacation', color: 'fc-event-primary'},
{id: '2', name: 'Meeting In Office', color: 'fc-event-warning'},
{id: '3', name: 'Client Call', color: 'fc-event-danger'},
{id: '4', name: 'Interview', color: 'fc-event-success'}
]
return(
<>
<BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
@@ -26,20 +39,16 @@ export default function Calendar(){
<p className="mt-3">
Drag and drop your event or click in the calendar.
</p>
<div className="fc-event fc-event-primary" data-color="fc-event-primary">
<span></span> Family
Vacation
</div>
<div className="fc-event fc-event-warning" data-color="fc-event-warning">
<span></span> Meeting In
Office
</div>
<div className="fc-event fc-event-danger" data-color="fc-event-danger">
<span></span> Client Call
</div>
<div className="fc-event fc-event-success" data-color="fc-event-success">
<span></span> Interview
</div>
{dummyEvents.map(item => (
<div className={`fc-event ${item.color}`} data-color={`${item.color}`}
// draggable="true"
onDragStart={() =>
handleDragStart({ title: formatName(item.name)})
}
>
<span></span> {item.name}
</div>
))}
<div className="form-check">
<input className="form-check-input" type="checkbox" value=""
id="defaultCheck1" />
@@ -51,7 +60,7 @@ export default function Calendar(){
</div>
<div className="col-xl-9">
<div className="event-calendar">
<div id="event-calendar"></div>
<EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} formatName={formatName} />
</div>
</div>
</div>