calendar fix started
This commit is contained in:
victorAnumudu
+5
-2
@@ -3,6 +3,11 @@
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/react": "^6.1.15",
|
||||
"@fullcalendar/timegrid": "^6.1.15",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@reduxjs/toolkit": "^2.4.0",
|
||||
"@tanstack/react-query": "^5.62.3",
|
||||
@@ -12,11 +17,9 @@
|
||||
"apexcharts": "^4.1.0",
|
||||
"axios": "^1.7.9",
|
||||
"bootstrap": "^5.3.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"formik": "^2.4.6",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-big-calendar": "^1.17.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-redux": "^9.1.2",
|
||||
|
||||
@@ -6,19 +6,15 @@ import EventCalendar from "./EventCalendar";
|
||||
export default function Calendar(){
|
||||
|
||||
const [draggedEvent, setDraggedEvent] = useState('undroppable')
|
||||
const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
|
||||
const handleDragStart = (event) => {
|
||||
setDraggedEvent(event)
|
||||
}
|
||||
|
||||
// const dummyEvents = [
|
||||
// {id: '1', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2024-12-18'), end: new Date('2024-12-18'), isAllDay: false, resource: ''},
|
||||
// {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2024-12-19'), end: new Date('2024-12-19'), isAllDay: false, resource: ''},
|
||||
// {id: '3', title: 'Client Call', color: 'fc-event-danger', start: new Date('2024-12-20'), end: new Date('2024-12-20'), isAllDay: false, resource: ''},
|
||||
// {id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), isAllDay: false, resource: ''}
|
||||
// ]
|
||||
const dummyEvents = [
|
||||
{id: '1', title: 'Family Vacation', color: 'fc-event-primary', isAllDay: false},
|
||||
{id: '2', title: 'Meeting In Office', color: 'fc-event-warning', isAllDay: false},
|
||||
{id: '3', title: 'Client Call', color: 'fc-event-danger', isAllDay: false},
|
||||
{id: '4', title: 'Interview', color: 'fc-event-success', isAllDay: false}
|
||||
{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(
|
||||
@@ -63,6 +59,7 @@ export default function Calendar(){
|
||||
</div>
|
||||
<div className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
||||
<EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,130 +1,131 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { Calendar, dayjsLocalizer } from 'react-big-calendar'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||||
|
||||
|
||||
|
||||
const localizer = dayjsLocalizer(dayjs)
|
||||
|
||||
const DnDCalendar = withDragAndDrop(Calendar)
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { formatDate } from '@fullcalendar/core';
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
const myEventsList = []
|
||||
const [myEvents, setMyEvents] = useState(myEventsList)
|
||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||
const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
|
||||
|
||||
const moveEvent = useCallback(
|
||||
({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
|
||||
// const { isAllDay } = event
|
||||
// if (!allDay && droppedOnAllDaySlot) {
|
||||
// event.allDay = true
|
||||
// }
|
||||
// if (allDay && !droppedOnAllDaySlot) {
|
||||
// event.allDay = false;
|
||||
// }
|
||||
|
||||
setMyEvents((prev) => {
|
||||
const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
return [...filtered, { ...existing, start, end, allDay: event.allDay }]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
)
|
||||
const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
|
||||
|
||||
|
||||
const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
|
||||
|
||||
const customOnDragOverFromOutside = useCallback(
|
||||
(dragEvent) => {
|
||||
// check for undroppable is specific to this example
|
||||
// and not part of API. This just demonstrates that
|
||||
// onDragOver can optionally be passed to conditionally
|
||||
// allow draggable items to be dropped on cal, based on
|
||||
// whether event.preventDefault is called
|
||||
if (draggedEvent !== 'undroppable') {
|
||||
console.log('preventDefault')
|
||||
dragEvent.preventDefault()
|
||||
}
|
||||
},
|
||||
[draggedEvent]
|
||||
)
|
||||
function handleWeekendsToggle() {
|
||||
setWeekendsVisible(!weekendsVisible);
|
||||
}
|
||||
|
||||
function handleDateSelect(selectInfo) {
|
||||
let title = prompt('Please enter a new title for your event');
|
||||
// let calendarApi = selectInfo.view.calendar;
|
||||
|
||||
const eventPropGetter = useCallback(
|
||||
(event) => ({
|
||||
...(event.isDraggable
|
||||
? { className: 'isDraggable' }
|
||||
: { className: 'nonDraggable' }),
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
const newEvent = useCallback(
|
||||
(event) => {
|
||||
setMyEvents((prev) => {
|
||||
const idList = prev.map((item) => item.id)
|
||||
const newId = Math.max(...idList) + 1
|
||||
// return [...prev, { ...event, id: newId }]
|
||||
return [...prev, { ...event}]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
)
|
||||
|
||||
const onDropFromOutside = useCallback(
|
||||
({ start, end, allDay: isAllDay }) => {
|
||||
if (draggedEvent === 'undroppable') {
|
||||
setDraggedEvent(null)
|
||||
return
|
||||
}
|
||||
|
||||
const { title, id } = draggedEvent
|
||||
const event = {
|
||||
title: title,
|
||||
start,
|
||||
end,
|
||||
isAllDay,
|
||||
id
|
||||
}
|
||||
setDraggedEvent(null)
|
||||
newEvent(event)
|
||||
},
|
||||
[draggedEvent, setDraggedEvent, newEvent]
|
||||
)
|
||||
|
||||
const resizeEvent = useCallback(
|
||||
({ event, start, end }) => {
|
||||
setMyEvents((prev) => {
|
||||
const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
return [...filtered, { ...existing, start, end }]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
// calendarApi.unselect(); // clear date selection
|
||||
|
||||
if (title) {
|
||||
// calendarApi.addEvent({
|
||||
// id: createEventId(),
|
||||
// title,
|
||||
// start: selectInfo.startStr,
|
||||
// end: selectInfo.endStr,
|
||||
// allDay: selectInfo.allDay,
|
||||
// });
|
||||
let newEvent = {
|
||||
id: createEventId(),
|
||||
title,
|
||||
start: selectInfo.startStr,
|
||||
end: selectInfo.endStr,
|
||||
allDay: selectInfo.allDay,
|
||||
}
|
||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||
}
|
||||
}
|
||||
|
||||
// const onDrop = useCallback(
|
||||
// (event) => {
|
||||
// // if (draggedEvent === 'undroppable') {
|
||||
// // setDraggedEvent(null)
|
||||
// // return
|
||||
// // }
|
||||
|
||||
// // let calendarApi;
|
||||
|
||||
// // calendarApi.unselect(); // clear date selection
|
||||
|
||||
// // calendarApi.addEvent({
|
||||
// // id: createEventId(),
|
||||
// // allDay: selectInfo.allDay,
|
||||
// // end: selectInfo.endStr,
|
||||
// // start: selectInfo.startStr,
|
||||
// // title,
|
||||
// // ...draggedEvent
|
||||
// // });
|
||||
|
||||
// // setDraggedEvent(null)
|
||||
// console.log('EVENT', event)
|
||||
// },
|
||||
// [draggedEvent]
|
||||
// )
|
||||
|
||||
const onDrop =
|
||||
(dropInfo) => {
|
||||
console.log('dropInfo', dropInfo)
|
||||
}
|
||||
|
||||
function handleEventClick(clickInfo) {
|
||||
if (
|
||||
confirm(
|
||||
`Are you sure you want to delete the event '${clickInfo.event.title}'`
|
||||
)
|
||||
) {
|
||||
clickInfo.event.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function handleEvents(events) {
|
||||
// setCurrentEvents(events);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<DnDCalendar
|
||||
dragFromOutsideItem={
|
||||
displayDragItemInCell ? dragFromOutsideItem : null
|
||||
}
|
||||
eventPropGetter={eventPropGetter}
|
||||
// draggableAccessor="isDraggable"
|
||||
localizer={localizer}
|
||||
events={myEvents}
|
||||
startAccessor="start"
|
||||
endAccessor="end"
|
||||
style={{ height: 500 }}
|
||||
// onEventResize={resizeEvent}
|
||||
resizable
|
||||
onEventDrop={moveEvent}
|
||||
onDropFromOutside={onDropFromOutside}
|
||||
// onDragOverFromOutside={customOnDragOverFromOutside}
|
||||
<div className="demo-app">
|
||||
<div className="demo-app-main">
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
headerToolbar={{
|
||||
left: 'prev next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||
}}
|
||||
initialView="dayGridMonth"
|
||||
editable={true}
|
||||
selectable={true}
|
||||
selectMirror={true}
|
||||
dayMaxEvents={true}
|
||||
weekends={weekendsVisible}
|
||||
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
||||
events={currentEvents}
|
||||
select={handleDateSelect}
|
||||
eventContent={renderEventContent} // custom render function
|
||||
eventClick={handleEventClick}
|
||||
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
||||
/* you can update a remote database when these fire:
|
||||
eventAdd={function(){}}
|
||||
eventChange={function(){}}
|
||||
eventRemove={function(){}}
|
||||
*/
|
||||
|
||||
dropAccept= '.fc-event'
|
||||
droppable= {true} // this allows things to be dropped onto the calendar
|
||||
drop= {onDrop}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function renderEventContent(eventInfo) {
|
||||
return (
|
||||
<>
|
||||
{/* <b>{eventInfo.timeText}</b> */}
|
||||
<i>{eventInfo.event.title}</i>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
// import React, { useCallback, useState } from 'react'
|
||||
// import { Calendar, dayjsLocalizer } from 'react-big-calendar'
|
||||
// import dayjs from 'dayjs'
|
||||
|
||||
// import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||||
|
||||
|
||||
|
||||
// const localizer = dayjsLocalizer(dayjs)
|
||||
|
||||
// const DnDCalendar = withDragAndDrop(Calendar)
|
||||
|
||||
// export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
// const myEventsList = []
|
||||
// const [myEvents, setMyEvents] = useState(myEventsList)
|
||||
|
||||
// const moveEvent = useCallback(
|
||||
// ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
|
||||
// // const { isAllDay } = event
|
||||
// // if (!allDay && droppedOnAllDaySlot) {
|
||||
// // event.allDay = true
|
||||
// // }
|
||||
// // if (allDay && !droppedOnAllDaySlot) {
|
||||
// // event.allDay = false;
|
||||
// // }
|
||||
|
||||
// setMyEvents((prev) => {
|
||||
// const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
// const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
// return [...filtered, { ...existing, start, end, allDay: event.allDay }]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
// const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
|
||||
|
||||
|
||||
// const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
|
||||
|
||||
// const customOnDragOverFromOutside = useCallback(
|
||||
// (dragEvent) => {
|
||||
// // check for undroppable is specific to this example
|
||||
// // and not part of API. This just demonstrates that
|
||||
// // onDragOver can optionally be passed to conditionally
|
||||
// // allow draggable items to be dropped on cal, based on
|
||||
// // whether event.preventDefault is called
|
||||
// if (draggedEvent !== 'undroppable') {
|
||||
// console.log('preventDefault')
|
||||
// dragEvent.preventDefault()
|
||||
// }
|
||||
// },
|
||||
// [draggedEvent]
|
||||
// )
|
||||
|
||||
|
||||
// const eventPropGetter = useCallback(
|
||||
// (event) => ({
|
||||
// ...(event.isDraggable
|
||||
// ? { className: 'isDraggable' }
|
||||
// : { className: 'nonDraggable' }),
|
||||
// }),
|
||||
// []
|
||||
// )
|
||||
|
||||
// const newEvent = useCallback(
|
||||
// (event) => {
|
||||
// setMyEvents((prev) => {
|
||||
// const idList = prev.map((item) => item.id)
|
||||
// const newId = Math.max(...idList) + 1
|
||||
// // return [...prev, { ...event, id: newId }]
|
||||
// return [...prev, { ...event}]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
|
||||
// const onDropFromOutside = useCallback(
|
||||
// ({ start, end, allDay: isAllDay }) => {
|
||||
// if (draggedEvent === 'undroppable') {
|
||||
// setDraggedEvent(null)
|
||||
// return
|
||||
// }
|
||||
|
||||
// const { title, id } = draggedEvent
|
||||
// const event = {
|
||||
// title: title,
|
||||
// start,
|
||||
// end,
|
||||
// isAllDay,
|
||||
// id
|
||||
// }
|
||||
// setDraggedEvent(null)
|
||||
// newEvent(event)
|
||||
// },
|
||||
// [draggedEvent, setDraggedEvent, newEvent]
|
||||
// )
|
||||
|
||||
// const resizeEvent = useCallback(
|
||||
// ({ event, start, end }) => {
|
||||
// setMyEvents((prev) => {
|
||||
// const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
// const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
// return [...filtered, { ...existing, start, end }]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
|
||||
// return (
|
||||
// <div className='w-100'>
|
||||
// <DnDCalendar
|
||||
// dragFromOutsideItem={
|
||||
// displayDragItemInCell ? dragFromOutsideItem : null
|
||||
// }
|
||||
// eventPropGetter={eventPropGetter}
|
||||
// // draggableAccessor="isDraggable"
|
||||
// localizer={localizer}
|
||||
// events={myEvents}
|
||||
// startAccessor="start"
|
||||
// endAccessor="end"
|
||||
// style={{ height: 500 }}
|
||||
// // onEventResize={resizeEvent}
|
||||
// resizable
|
||||
// onEventDrop={moveEvent}
|
||||
// onDropFromOutside={onDropFromOutside}
|
||||
// // onDragOverFromOutside={customOnDragOverFromOutside}
|
||||
// />
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
import React from 'react'
|
||||
|
||||
export default function EventCalendar() {
|
||||
return (
|
||||
<div>EventCalendar</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
let eventGuid = 0;
|
||||
let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
|
||||
|
||||
export const INITIAL_EVENTS = [
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'All-day event',
|
||||
start: new Date('2025-01-19'),
|
||||
end: new Date('2025-01-20'),
|
||||
// color: 'blue'
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'Timed event',
|
||||
start: todayStr + 'T12:00:00',
|
||||
// color: 'red'
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'Timed event 2',
|
||||
start: new Date('2025-01-25'),
|
||||
start: new Date('2025-01-26'),
|
||||
// color: 'blue'
|
||||
},
|
||||
];
|
||||
|
||||
export function createEventId() {
|
||||
return String(eventGuid++);
|
||||
}
|
||||
+20
-24
@@ -91,9 +91,6 @@ $btn-bg: #8e54e9;
|
||||
$btn-border: #8e54e9;
|
||||
$event-padding: 10px;
|
||||
|
||||
@import 'react-big-calendar/lib/sass/styles';
|
||||
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD
|
||||
|
||||
.extraProductCard{
|
||||
background-color: aliceblue;
|
||||
border-radius: 5px;
|
||||
@@ -125,30 +122,29 @@ $event-padding: 10px;
|
||||
|
||||
|
||||
/* CALENDER STYLE HERE */
|
||||
// .rbc-today{
|
||||
// background-color: '#fcf8e3' !important;
|
||||
// }
|
||||
.rbc-toolbar button {
|
||||
background: #eceef3;
|
||||
.fc-next-button.fc-button, .fc-prev-button.fc-button,
|
||||
.fc-timeGridWeek-button.fc-button, .fc-timeGridDay-button.fc-button, .fc-dayGridMonth-button.fc-button {
|
||||
background: #eceef3!important;
|
||||
border: none;
|
||||
color: #a6a9b7 !important;
|
||||
text-transform: capitalize;
|
||||
box-shadow: none!important;
|
||||
text-shadow: none!important;
|
||||
border-radius: 3px!important;
|
||||
margin: 0 3px!important;
|
||||
padding: 6px 12px!important;
|
||||
height: auto!important;
|
||||
text-transform: capitalize !important;
|
||||
// box-shadow: none!important;
|
||||
// text-shadow: none!important;
|
||||
// border-radius: 3px!important;
|
||||
// margin: 0 3px!important;
|
||||
// padding: 6px 12px!important;
|
||||
// height: auto!important;
|
||||
}
|
||||
.rbc-toolbar-label{
|
||||
color: black !important;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
// .rbc-month-view{
|
||||
// border: .5px solid #e8edf1!important;
|
||||
// }
|
||||
.rbc-toolbar button.rbc-active, .rbc-toolbar button:active, .rbc-toolbar button:hover{
|
||||
|
||||
.fc-today-button.fc-button,
|
||||
.fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
|
||||
color: #fff!important;
|
||||
border: none;
|
||||
background-color: #8E54E9!important;
|
||||
}
|
||||
|
||||
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
|
||||
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event{
|
||||
padding: 10px 2px !important;
|
||||
}
|
||||
/* END OF CALENDER STYLE */
|
||||
Reference in New Issue
Block a user