{event.title}
{data.start} - {data.end}
{attendees.length > 0 && (
{attendees.map((att) => (
{
e.stopPropagation();
onRemove(event.id, att, event.title);
}}
>
{att.avatar}
×
))}
)}
Drop people to assign
);
}
SchedulerEvent.propTypes = {
data: PropTypes.object.isRequired,
findConflict: PropTypes.func.isRequired,
onAssign: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onToast: PropTypes.func.isRequired,
};
function App() {
const [meetings, setMeetings] = useState(() => [
{
id: 'evt1',
title: 'Sprint Planning',
start: '2026-11-08T09:00',
end: '2026-11-08T11:00',
resource: 1,
color: '#b52db9',
attendees: [
{ id: 'emp1', name: 'Alice Martin', avatar: 'AM', color: '#e74c3c' },
{ id: 'emp2', name: 'Bob Johnson', avatar: 'BJ', color: '#3498db' },
],
},
{
id: 'evt2',
title: 'Budget Review',
start: '2026-11-08T10:00',
end: '2026-11-08T13:00',
resource: 2,
color: '#669ce2',
attendees: [],
},
{
id: 'evt3',
title: 'Client Presentation',
start: '2026-11-08T15:00',
end: '2026-11-08T18:00',
resource: 2,
color: '#88bd42',
attendees: [
{ id: 'emp3', name: 'Carol Smith', avatar: 'CS', color: '#2ecc71' },
{ id: 'emp4', name: 'David Lee', avatar: 'DL', color: '#f39c12' },
],
},
{
id: 'evt4',
title: 'Project Kickoff',
start: '2026-11-08T09:00',
end: '2026-11-08T11:00',
resource: 3,
color: '#b6962f',
attendees: [],
},
{
id: 'evt5',
title: 'New Hire Orientation',
start: '2026-11-08T13:00',
end: '2026-11-08T16:00',
resource: 4,
color: '#c864f0',
attendees: [],
},
{
id: 'evt6',
title: 'Design Review',
start: '2026-11-08T13:00',
end: '2026-11-08T15:00',
resource: 1,
color: '#c7682d',
attendees: [],
},
{
id: 'evt7',
title: 'Product Demo',
start: '2026-11-09T09:00',
end: '2026-11-09T11:00',
resource: 1,
color: '#ad2b6c',
attendees: [],
},
{
id: 'evt8',
title: 'Stakeholder Update',
start: '2026-11-09T10:00',
end: '2026-11-09T12:00',
resource: 2,
color: '#0f60ca',
attendees: [],
},
{
id: 'evt9',
title: 'Code Review',
start: '2026-11-09T10:00',
end: '2026-11-09T12:00',
resource: 3,
color: '#56a823',
attendees: [],
},
{
id: 'evt10',
title: 'Safety Training',
start: '2026-11-09T13:00',
end: '2026-11-09T16:00',
resource: 4,
color: '#aa36d8',
attendees: [],
},
{
id: 'evt11',
title: 'Retrospective',
start: '2026-11-10T09:00',
end: '2026-11-10T11:00',
resource: 1,
color: '#c45f20',
attendees: [],
},
{
id: 'evt12',
title: 'Board Briefing',
start: '2026-11-10T13:00',
end: '2026-11-10T16:00',
resource: 2,
color: '#1e58a5',
attendees: [],
},
{
id: 'evt13',
title: 'Marketing Sync',
start: '2026-11-10T10:00',
end: '2026-11-10T12:00',
resource: 3,
color: '#549e27',
attendees: [],
},
{
id: 'evt14',
title: 'API Workshop',
start: '2026-11-10T13:00',
end: '2026-11-10T16:00',
resource: 4,
color: '#7c1ca1',
attendees: [],
},
{
id: 'evt15',
title: 'Architecture Review',
start: '2026-11-11T09:00',
end: '2026-11-11T11:30',
resource: 1,
color: '#a7511c',
attendees: [],
},
{
id: 'evt16',
title: 'Quarterly Planning',
start: '2026-11-11T13:00',
end: '2026-11-11T16:00',
resource: 2,
color: '#13488d',
attendees: [],
},
{
id: 'evt17',
title: 'Hiring Debrief',
start: '2026-11-11T10:00',
end: '2026-11-11T12:00',
resource: 3,
color: '#51ac19',
attendees: [],
},
{
id: 'evt18',
title: 'Team Standup',
start: '2026-11-07T09:00',
end: '2026-11-07T11:00',
resource: 1,
color: '#e74c3c',
attendees: [],
},
{
id: 'evt19',
title: 'Daily Scrum',
start: '2026-11-07T10:00',
end: '2026-11-07T13:00',
resource: 2,
color: '#3498db',
attendees: [],
},
{
id: 'evt20',
title: 'Lunch Meeting',
start: '2026-11-07T12:00',
end: '2026-11-07T14:00',
resource: 3,
color: '#2ecc71',
attendees: [],
},
{
id: 'evt21',
title: 'Weekly Sync',
start: '2026-11-07T14:00',
end: '2026-11-07T16:00',
resource: 4,
color: '#f39c12',
attendees: [],
},
{
id: 'evt22',
title: 'Morning Briefing',
start: '2026-11-06T09:00',
end: '2026-11-06T11:00',
resource: 1,
color: '#9b59b6',
attendees: [],
},
{
id: 'evt23',
title: 'Status Update',
start: '2026-11-06T11:00',
end: '2026-11-06T14:00',
resource: 2,
color: '#1abc9c',
attendees: [],
},
{
id: 'evt24',
title: 'Client Call',
start: '2026-11-06T13:00',
end: '2026-11-06T15:00',
resource: 3,
color: '#e67e22',
attendees: [],
},
{
id: 'evt25',
title: 'End of Day Review',
start: '2026-11-06T16:00',
end: '2026-11-06T18:00',
resource: 4,
color: '#34495e',
attendees: [],
},
]);
const [isExternalDragging, setIsExternalDragging] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastColor, setToastColor] = useState('');
const [isToastOpen, setIsToastOpen] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState('');
const [isSnackbarOpen, setIsSnackbarOpen] = useState(false);
const [undoData, setUndoData] = useState(null);
const meetingsRef = useRef(meetings);
useEffect(() => {
meetingsRef.current = meetings;
}, [meetings]);
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '18:00',
timeCellStep: 30,
timeLabelStep: 30,
virtualScroll: false,
},
}),
[],
);
const findConflict = useCallback((empId, targetEventId) => {
const allMeetings = meetingsRef.current;
const target = allMeetings.find((m) => m.id === targetEventId);
if (!target) return null;
const targetStart = new Date(target.start).getTime();
const targetEnd = new Date(target.end).getTime();
for (const m of allMeetings) {
if (m.id === targetEventId) continue;
const attendees = m.attendees || [];
if (!attendees.some((a) => a.id === empId)) continue;
const mStart = new Date(m.start).getTime();
const mEnd = new Date(m.end).getTime();
if (mStart < targetEnd && mEnd > targetStart) return m;
}
return null;
}, []);
const handleAssign = useCallback((eventId, employee) => {
setMeetings((prev) => prev.map((m) => (m.id === eventId ? { ...m, attendees: [...(m.attendees || []), employee] } : m)));
}, []);
const handleRemove = useCallback((eventId, employee, eventTitle) => {
setMeetings((prev) =>
prev.map((m) => (m.id === eventId ? { ...m, attendees: (m.attendees || []).filter((a) => a.id !== employee.id) } : m)),
);
setSnackbarMessage(`${employee.name} removed from ${eventTitle}`);
setUndoData({ eventId, employee });
setIsSnackbarOpen(true);
}, []);
const showToast = useCallback((message, color) => {
setToastMessage(message);
setToastColor(color);
setIsToastOpen(true);
}, []);
const handleDragStart = useCallback(() => {
const onMove = () => {
setIsExternalDragging(true);
document.removeEventListener('pointermove', onMove);
};
const onUp = () => {
setIsExternalDragging(false);
document.removeEventListener('pointermove', onMove);
document.removeEventListener('pointerup', onUp);
};
document.addEventListener('pointermove', onMove);
document.addEventListener('pointerup', onUp);
}, []);
const snackbarButton = useMemo(
() => ({
text: 'Undo',
action: () => {
if (!undoData) return;
setMeetings((prev) =>
prev.map((m) => (m.id === undoData.eventId ? { ...m, attendees: [...(m.attendees || []), undoData.employee] } : m)),
);
showToast('Assignment restored', 'success');
},
}),
[undoData, showToast],
);
const renderEvent = useCallback(
(data) => (