Role-Based Access
The following example demonstrates how to implement role-based permissions in a calendar by simulating a logged in user. The selected user determines which role and permissions are applied:
- Project manager (Full access) - can manage all tasks
- Employees (Limited access) - can only edit their own tasks
- Clients (Read-only) - can view the schedule without making changes
The demo uses an outside control to simulate logging in as a specific user. Based on the chosen role, the calendar applies the corresponding permissions conditionally.
This approach shows how you could pass the logged in user's role from your authentication system and dynamically configure what actions are allowed in the timeline.
Demo
Simulate logged in user
const initialEvents = [{
start: '2026-10-22T11:00',
end: '2026-10-22T15:00',
title: 'Task 1',
resource: 1
}, {
start: '2026-10-22T14:00',
end: '2026-10-22T17:00',
title: 'Task 2',
resource: 3
}, {
start: '2026-10-22T12:00',
end: '2026-10-22T14:00',
title: 'Task 3',
resource: 4
}, {
start: '2026-10-23T10:00',
end: '2026-10-23T15:00',
title: 'Task 4',
resource: 1
}, {
start: '2026-10-23T11:00',
end: '2026-10-23T13:00',
title: 'Task 5',
resource: 2
}, {
start: '2026-10-23T14:00',
end: '2026-10-23T17:00',
title: 'Task 6',
resource: 2
}, {
start: '2026-10-23T12:00',
end: '2026-10-23T15:00',
title: 'Task 7',
resource: 3
}, {
start: '2026-10-23T17:00',
end: '2026-10-23T20:00',
title: 'Task 8',
resource: 3
}, {
start: '2026-10-23T08:00',
end: '2026-10-23T11:30',
title: 'Task 9',
resource: 4
}, {
start: '2026-10-23T12:00',
end: '2026-10-23T14:00',
title: 'Task 10',
resource: 4
}, {
start: '2026-10-23T10:00',
end: '2026-10-23T13:00',
title: 'Task 11',
resource: 5
}, {
start: '2026-10-23T14:00',
end: '2026-10-23T16:00',
title: 'Task 12',
resource: 5
}, {
start: '2026-10-23T16:30',
end: '2026-10-23T19:00',
title: 'Task 13',
resource: 5
}, {
start: '2026-10-24T11:00',
end: '2026-10-24T14:00',
title: 'Task 14',
resource: 2
}, {
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Task 15',
resource: 5
}];
const initialResources = [{
id: 1,
name: 'Jude Chester',
color: '#af2ec3'
}, {
id: 2,
name: 'Willis Cane',
color: '#cccc39'
}, {
id: 3,
name: 'Derek Austyn',
color: '#56ca2c'
}, {
id: 4,
name: 'Merv Kenny',
color: '#af2424'
}, {
id: 5,
name: 'Fred Waldez',
color: '#256ebc'
}]
function App() {
const user = useMemo(() => ({
JSXTSXCSS
import { Eventcalendar, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const initialEvents = [
{
start: '2026-10-22T11:00',
end: '2026-10-22T15:00',
title: 'Task 1',
resource: 1,
},
{
start: '2026-10-22T14:00',
end: '2026-10-22T17:00',
title: 'Task 2',
resource: 3,
},
{
start: '2026-10-22T12:00',
end: '2026-10-22T14:00',
title: 'Task 3',
resource: 4,
},
{
start: '2026-10-23T10:00',
end: '2026-10-23T15:00',
title: 'Task 4',
resource: 1,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T13:00',
title: 'Task 5',
resource: 2,
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T17:00',
title: 'Task 6',
resource: 2,
},
{
start: '2026-10-23T12:00',
end: '2026-10-23T15:00',
title: 'Task 7',
resource: 3,
},
{
start: '2026-10-23T17:00',
end: '2026-10-23T20:00',
title: 'Task 8',
resource: 3,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T11:30',
title: 'Task 9',
resource: 4,
},
{
start: '2026-10-23T12:00',
end: '2026-10-23T14:00',
title: 'Task 10',
resource: 4,
},
{
start: '2026-10-23T10:00',
end: '2026-10-23T13:00',
title: 'Task 11',
resource: 5,
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T16:00',
title: 'Task 12',
resource: 5,
},
{
start: '2026-10-23T16:30',
end: '2026-10-23T19:00',
title: 'Task 13',
resource: 5,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T14:00',
title: 'Task 14',
resource: 2,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Task 15',
resource: 5,
},
];
const initialResources = [
{ id: 1, name: 'Jude Chester', color: '#af2ec3' },
{ id: 2, name: 'Willis Cane', color: '#cccc39' },
{ id: 3, name: 'Derek Austyn', color: '#56ca2c' },
{ id: 4, name: 'Merv Kenny', color: '#af2424' },
{ id: 5, name: 'Fred Waldez', color: '#256ebc' },
];
function App() {
const [isToastOpen, setToastOpen] = useState(false);
const user = useMemo(() => ({ id: 2, name: 'Willis Cane', role: 'limited' }), []);
/* Other user examples
const user = useMemo(() => ({ name: 'Client', role: 'readonly' }), []);
const user = useMemo(() => ({ name: 'Project Manager', role: 'full' }), []); */
const editEvents = useMemo(() => user.role !== 'readonly', [user]);
const toastMessage = useMemo(() => {
if (user.role === 'readonly') {
return 'Client with read-only access logged in';
}
if (user.role === 'limited') {
return 'User ' + user.name + ' with limited access logged in';
}
return 'User with full access logged in';
}, [user]);
const myView = useMemo(
() => ({
timeline: {
type: 'week',
startTime: '08:00',
endTime: '20:00',
},
}),
[],
);
const myEvents = useMemo(
() =>
initialEvents.map((task) => {
if (user.role === 'readonly') {
return { ...task, editable: false, color: '#af2ec3' };
}
if (user.role === 'limited') {
return { ...task, editable: task.resource === user.id, color: task.resource !== user.id ? '#6a6a6a' : '#af2424' };
}
return task;
}),
[user],
);
const myResources = useMemo(
() => initialResources.map((res) => (user.role === 'limited' && res.id !== user.id ? { ...res, eventCreation: false } : res)),
[user],
);
const getDefaultEvent = useCallback(
() => ({
color: user.role === 'limited' ? '#af2424' : '',
}),
[user.role],
);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
const timer = setTimeout(() => {
setToastOpen(true);
});
return () => clearTimeout(timer);
}, []);
return (
<>
<Eventcalendar
className="mds-role-based-timeline"
view={myView}
data={myEvents}
resources={myResources}
clickToCreate={editEvents}
dragToCreate={editEvents}
dragToMove={editEvents}
dragToResize={editEvents}
eventDelete={editEvents}
extendDefaultEvent={getDefaultEvent}
/>
<Toast message={toastMessage} isOpen={isToastOpen} onClose={handleCloseToast} />
</>
);
}
export default App;
import {
Eventcalendar,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions,
Toast ,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const initialEvents: MbscCalendarEvent[] = [
{
start: '2026-10-22T11:00',
end: '2026-10-22T15:00',
title: 'Task 1',
resource: 1,
},
{
start: '2026-10-22T14:00',
end: '2026-10-22T17:00',
title: 'Task 2',
resource: 3,
},
{
start: '2026-10-22T12:00',
end: '2026-10-22T14:00',
title: 'Task 3',
resource: 4,
},
{
start: '2026-10-23T10:00',
end: '2026-10-23T15:00',
title: 'Task 4',
resource: 1,
},
{
start: '2026-10-23T11:00',
end: '2026-10-23T13:00',
title: 'Task 5',
resource: 2,
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T17:00',
title: 'Task 6',
resource: 2,
},
{
start: '2026-10-23T12:00',
end: '2026-10-23T15:00',
title: 'Task 7',
resource: 3,
},
{
start: '2026-10-23T17:00',
end: '2026-10-23T20:00',
title: 'Task 8',
resource: 3,
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T11:30',
title: 'Task 9',
resource: 4,
},
{
start: '2026-10-23T12:00',
end: '2026-10-23T14:00',
title: 'Task 10',
resource: 4,
},
{
start: '2026-10-23T10:00',
end: '2026-10-23T13:00',
title: 'Task 11',
resource: 5,
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T16:00',
title: 'Task 12',
resource: 5,
},
{
start: '2026-10-23T16:30',
end: '2026-10-23T19:00',
title: 'Task 13',
resource: 5,
},
{
start: '2026-10-24T11:00',
end: '2026-10-24T14:00',
title: 'Task 14',
resource: 2,
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Task 15',
resource: 5,
},
];
const initialResources: MbscResource[] = [
{ id: 1, name: 'Jude Chester', color: '#af2ec3' },
{ id: 2, name: 'Willis Cane', color: '#cccc39' },
{ id: 3, name: 'Derek Austyn', color: '#56ca2c' },
{ id: 4, name: 'Merv Kenny', color: '#af2424' },
{ id: 5, name: 'Fred Waldez', color: '#256ebc' },
];
const App: FC = () => {
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const user = useMemo(() => ({ id: 2, name: 'Willis Cane', role: 'limited' }), []);
/* Other user examples
const user = useMemo(() => ({ name: 'Client', role: 'readonly' }), []);
const user = useMemo(() => ({ name: 'Project Manager', role: 'full' }), []); */
const editEvents = useMemo<boolean>(() => user.role !== 'readonly', [user]);
const toastMessage = useMemo(() => {
if (user.role === 'readonly') {
return 'Client with read-only access logged in';
}
if (user.role === 'limited') {
return 'User ' + user.name + ' with limited access logged in';
}
return 'User with full access logged in';
}, [user]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: {
type: 'week',
startTime: '08:00',
endTime: '20:00',
},
}),
[],
);
const myEvents = useMemo<MbscCalendarEvent[]>(
() =>
initialEvents.map((task) => {
if (user.role === 'readonly') {
return { ...task, editable: false, color: '#af2ec3' };
}
if (user.role === 'limited') {
return { ...task, editable: task.resource === user.id, color: task.resource !== user.id ? '#6a6a6a' : '#af2424' };
}
return task;
}),
[user],
);
const myResources = useMemo<MbscResource[]>(
() => initialResources.map((res) => (user.role === 'limited' && res.id !== user.id ? { ...res, eventCreation: false } : res)),
[user],
);
const getDefaultEvent = useCallback(
() => ({
color: user.role === 'limited' ? '#af2424' : '',
}),
[user.role],
);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
const timer = setTimeout(() => {
setToastOpen(true);
});
return () => clearTimeout(timer);
}, []);
return (
<>
<Eventcalendar
className="mds-role-based-timeline"
view={myView}
data={myEvents}
resources={myResources}
clickToCreate={editEvents}
dragToCreate={editEvents}
dragToMove={editEvents}
dragToResize={editEvents}
eventDelete={editEvents}
extendDefaultEvent={getDefaultEvent}
/>
<Toast message={toastMessage} isOpen={isToastOpen} onClose={handleCloseToast} />
</>
);
};
export default App;
.mds-role-based-timeline .mbsc-schedule-event:not(.mbsc-readonly-event) .mbsc-schedule-event-background {
border: 2px solid currentColor;
}
.mds-role-based-timeline .mbsc-schedule-event .mbsc-schedule-event-background::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.6);
}