You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Each event object in the `data` array should have the following structure:
48
+
49
+
```typescript
50
+
{
51
+
id: string|number; // Unique identifier
52
+
title: string; // Event title (or use custom titleField)
53
+
start: string|Date; // Start date/time (ISO string or Date)
54
+
end?:string|Date; // End date/time (optional)
55
+
allDay?:boolean; // Whether it's an all-day event
56
+
color?:string; // Event color (hex or CSS color)
57
+
[key: string]: any; // Any other custom data
58
+
}
59
+
```
60
+
61
+
## Examples
62
+
63
+
### Month View with Color Mapping
64
+
65
+
```json
66
+
{
67
+
"type": "calendar-view",
68
+
"className": "h-[600px] border rounded-lg",
69
+
"view": "month",
70
+
"colorField": "type",
71
+
"colorMapping": {
72
+
"meeting": "#3b82f6",
73
+
"deadline": "#ef4444",
74
+
"event": "#10b981"
75
+
},
76
+
"data": [
77
+
{
78
+
"id": 1,
79
+
"title": "Team Standup",
80
+
"start": "2026-01-13T09:00:00.000Z",
81
+
"end": "2026-01-13T09:30:00.000Z",
82
+
"type": "meeting"
83
+
},
84
+
{
85
+
"id": 2,
86
+
"title": "Project Deadline",
87
+
"start": "2026-01-20T00:00:00.000Z",
88
+
"type": "deadline",
89
+
"allDay": true
90
+
}
91
+
]
92
+
}
93
+
```
94
+
95
+
## View Modes
96
+
97
+
### Month View
98
+
Displays a full month calendar grid with events shown as colored bars on their respective dates. Perfect for getting a high-level overview of the month.
99
+
100
+
### Week View
101
+
Shows a week at a time with each day in a column. Events display with their times, ideal for detailed weekly planning.
102
+
103
+
### Day View
104
+
Displays a single day with hourly time slots from 12 AM to 11 PM. Events are positioned at their scheduled times, great for detailed daily schedules.
105
+
106
+
## Events & Callbacks
107
+
108
+
The calendar view supports several event callbacks through the `onAction` mechanism:
109
+
110
+
-`event_click`: Triggered when an event is clicked
111
+
-`date_click`: Triggered when a date cell is clicked
112
+
-`view_change`: Triggered when the view mode changes
113
+
-`navigate`: Triggered when navigating between dates
114
+
115
+
## Styling
116
+
117
+
The calendar view is fully styled with Tailwind CSS and supports custom styling through the `className` prop.
118
+
119
+
## Integration with ObjectQL
120
+
121
+
When used with ObjectQL, the calendar view can automatically fetch and display records from your database.
0 commit comments