Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
56125b427d | ||
 victor.ebuka
|
16066d030b | ||
|
victorAnumudu
|
b6c79303ae | ||
|
victor.ebuka
|
ada406eb3f |
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
@@ -25,14 +25,7 @@ export default function Calendar(){
|
||||
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')},
|
||||
{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 [activeCategory, setActiveCategory] = useState('1')
|
||||
|
||||
const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
|
||||
|
||||
@@ -47,11 +40,14 @@ export default function Calendar(){
|
||||
const handleAddNewEvent = () => {
|
||||
if(newEvent.title && newEvent.color){
|
||||
const eventToAdd = {...newEvent}
|
||||
setDummyEvents(prev => ([...prev, eventToAdd]))
|
||||
setDefaultCategory(prev => ([...prev, eventToAdd]))
|
||||
setNewEvent({title: '', color: ''})
|
||||
}
|
||||
}
|
||||
|
||||
const handleActiveCategory = (id) => {
|
||||
setActiveCategory(id)
|
||||
}
|
||||
|
||||
return(
|
||||
<>
|
||||
@@ -79,38 +75,54 @@ export default function Calendar(){
|
||||
:
|
||||
<>
|
||||
<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}
|
||||
|
||||
{/* <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> */}
|
||||
|
||||
{category.map((item, index) => {
|
||||
let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
|
||||
return (
|
||||
// <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
|
||||
// // draggable={false}
|
||||
// // onDragStart={() =>
|
||||
// // handleDragStart({...item})
|
||||
// // }
|
||||
// >
|
||||
// <span>{item.description}</span>
|
||||
// </div>
|
||||
<div key={index} className={`fc-event form-check ${color}`}>
|
||||
<input className="form-check-input" type="radio" value={item.cid}
|
||||
id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
|
||||
<label className={`${color} form-check-label`} htmlFor={item.cid}>
|
||||
{item.description}
|
||||
</label>
|
||||
</div>
|
||||
))} */}
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{/* <div id="external-events">
|
||||
<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 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 className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
<EventCalendar
|
||||
removeAfterDrop={removeAfterDrop}
|
||||
eventList={eventList}
|
||||
activeCategory={activeCategory}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||
|
||||
export default function EventCalendar({removeAfterDrop, eventList}) {
|
||||
export default function EventCalendar({removeAfterDrop, eventList, activeCategory}) {
|
||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||
const [currentEvents, setCurrentEvents] = useState([]);
|
||||
|
||||
@@ -79,9 +79,11 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)}))
|
||||
// let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
|
||||
let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
|
||||
console.log('newEventList', newEventList)
|
||||
setCurrentEvents(newEventList)
|
||||
},[eventList])
|
||||
},[activeCategory])
|
||||
|
||||
return (
|
||||
<div className="demo-app">
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function Comments(){
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function Contacts(){
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
|
||||
@@ -31,13 +31,14 @@
|
||||
.fc-event {
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
cursor: move;
|
||||
// cursor: move;
|
||||
font-size: 13px;
|
||||
margin: 5px 0px;
|
||||
padding: 10px 10px 10px 40px;
|
||||
text-align: left;
|
||||
position:relative;
|
||||
&:before {
|
||||
display: none;
|
||||
content:'';
|
||||
position:absolute;
|
||||
width:15px;
|
||||
|
||||
@@ -40,8 +40,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
.mail-msg{
|
||||
max-height: 747px;
|
||||
overflow: hidden;
|
||||
max-height: 500px;
|
||||
min-height: 400px;
|
||||
// max-height: 747px;
|
||||
overflow-y: auto;
|
||||
outline: none;
|
||||
@include laptop {
|
||||
max-height: 450px;
|
||||
|
||||
Reference in New Issue
Block a user