Calendar events are used for scheduling appointments, birthdays, and other important dates in the MKing Admin dashboard.
Event Object
Unique identifier for the event
Event description or notes
Event start date/time (ISO 8601 format)
Event end date/time (ISO 8601 format)
Whether the event is an all-day event (default: false)
Event color for calendar display (hex color code)
Display mode for the event (e.g., “auto”, “block”, “background”)
List Events
curl -X GET "${VITE_BASE_URL}/events?start=2024-01-01&end=2024-12-31" \
-H "Authorization: Bearer <token>"
Query Parameters
Start date for filtering events (ISO 8601 format)
End date for filtering events (ISO 8601 format)
Response
Array of event objects (see Event Object schema above)
{
"data": [
{
"id": "1",
"title": "Team Meeting",
"description": "Monthly team sync",
"start": "2024-03-15T10:00:00Z",
"end": "2024-03-15T11:00:00Z",
"allDay": false,
"color": "#1976d2"
},
{
"id": "2",
"title": "John's Birthday",
"description": "Employee birthday celebration",
"start": "2024-03-20",
"end": "2024-03-20",
"allDay": true,
"color": "#ff9800"
}
]
}
Create Event
curl -X POST "${VITE_BASE_URL}/events" \
-H "Authorization: Bearer <token>" \
-H "Content-Type: application/json" \
-d '{
"title": "Client Meeting",
"description": "Product demo with new client",
"start": "2024-03-25T14:00:00Z",
"end": "2024-03-25T15:00:00Z",
"color": "#4caf50"
}'
Request Body
Event description or notes
Event start date/time (ISO 8601 format)
Event end date/time (ISO 8601 format)
Whether the event is an all-day event
Event color (hex color code)
Response
The created event object with assigned ID
{
"data": {
"id": "3",
"title": "Client Meeting",
"description": "Product demo with new client",
"start": "2024-03-25T14:00:00Z",
"end": "2024-03-25T15:00:00Z",
"allDay": false,
"color": "#4caf50"
}
}
Update Event
curl -X PUT "${VITE_BASE_URL}/events/3" \
-H "Authorization: Bearer <token>" \
-H "Content-Type: application/json" \
-d '{
"title": "Client Meeting - Rescheduled",
"start": "2024-03-26T14:00:00Z",
"end": "2024-03-26T15:00:00Z"
}'
Path Parameters
Request Body
All fields from the Event Object are optional. Only provided fields will be updated.
Response
{
"data": {
"id": "3",
"title": "Client Meeting - Rescheduled",
"description": "Product demo with new client",
"start": "2024-03-26T14:00:00Z",
"end": "2024-03-26T15:00:00Z",
"allDay": false,
"color": "#4caf50"
}
}
Delete Event
curl -X DELETE "${VITE_BASE_URL}/events/3" \
-H "Authorization: Bearer <token>"
Path Parameters
Response
Success confirmation message
{
"message": "Event deleted successfully"
}
Integration
Service Functions
The event service (src/services/event.service.ts) provides TypeScript functions for working with calendar events:
import { getEvents, createEvent, updateEvent, deleteEvent, CalendarEvent } from '@/services/event.service';
// List events with date range
const response = await getEvents('2024-01-01', '2024-12-31');
// Create event
const newEvent: CalendarEvent = {
title: 'Team Meeting',
start: new Date('2024-03-15T10:00:00Z'),
end: new Date('2024-03-15T11:00:00Z'),
color: '#1976d2'
};
await createEvent(newEvent);
// Update event
await updateEvent('1', { title: 'Updated Meeting Title' });
// Delete event
await deleteEvent('1');
FullCalendar Integration
Events are displayed using FullCalendar with Spanish localization (src/pages/Calendar/Calendar.tsx:18-42).
The calendar supports drag-and-drop event rescheduling, which automatically calls the update API.
Employee birthdays are automatically displayed on the calendar and show a celebration modal with confetti animation when clicked.
Calendar Feature
Learn about the calendar user interface
Employees
Employee birthdays appear on the calendar