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

started calendar api integration

Browse Source
This commit was merged in pull request #19.
This commit is contained in:
victorAnumudu
2025-01-21 21:14:03 +01:00
parent 7ec139c5ad
commit 1708cb893f
8 changed files with 131 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/calendar/Calendar.jsx
+61 -33
View File
@@ -1,8 +1,13 @@
import React, { useCallback, useState } from "react";
import { useQuery } from '@tanstack/react-query'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import EventCalendar from "./EventCalendar";
import ExternalDraggable from "./ExternalDraggable";
import { getCalendarEvents } from '../../services/services'
import queryKeys from '../../services/queryKeys'
export default function Calendar(){
@@ -11,6 +16,15 @@ export default function Calendar(){
// setDraggedEvent(event)
// }
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.calendar_events,
queryFn: () => getCalendarEvents()
})
const receievedEvents = data?.data?.bar_data
const category = receievedEvents?.category //EVENT CATEGORIES FROM API
const eventList = receievedEvents?.list //EVENT LIST FROM API
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')},
@@ -52,42 +66,56 @@ export default function Calendar(){
</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={removeAfterDrop}
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
<label className="form-check-label" htmlFor="defaultCheck1">
Remove After Drop
</label>
</div> */}
{isFetching ?
<>
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</>
: isError ?
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
<div className="col-xl-9">
<div className="event-calendar">
<EventCalendar
removeAfterDrop={removeAfterDrop}
setDummyEvents={setDummyEvents}
/>
:
<>
<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 category={category} />
{/* <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
removeAfterDrop={removeAfterDrop}
eventList={eventList}
/>
</div>
</div>
</>
}
</div>
</div>