Skip to content

Commit efeb94e

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request #1955 from pnp/calendarControl
Calendar control
2 parents c37e661 + b39fef7 commit efeb94e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+4689
-854
lines changed

‎docs/documentation/docs/assets/Calendar1.png

321 KB
Loading

‎docs/documentation/docs/assets/Calendar2.png

404 KB
Loading

‎docs/documentation/docs/assets/Calendar3.png

310 KB
Loading

‎docs/documentation/docs/assets/calendar4.png

311 KB
Loading

‎docs/documentation/docs/assets/calendar5.png

302 KB
Loading

‎docs/documentation/docs/assets/calendar6.png

361 KB
Loading

‎docs/documentation/docs/controls/Calendar.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# Calendar
2+
3+
## Overview
4+
5+
The Calendar Control allows users to view and manage events in a calendar interface. It supports different event views, Month, Week and Day, and customizable rendering for month, week, and day views.
6+
7+
Here is an example of the control in action:
8+
9+
![calendar](../assets/calendar1.png)
10+
![calendar](../assets/calendar2.png)
11+
![calendar](../assets/calendar3.png)
12+
![calendar](../assets/calendar4.png)
13+
![calendar](../assets/calendar5.png)
14+
![calendar](../assets/calendar6.png)
15+
16+
## Installation
17+
18+
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
19+
- Import the following modules to your component:
20+
21+
## Importing the Calendar Control
22+
23+
To use the Calendar Control in your React project, import it as follows:
24+
25+
```typescript
26+
import { Calendar } from '@pnp/spfx-controls-react/lib/calendar';
27+
import { IEvent } from '@pnp/spfx-controls-react/lib/calendar/IEvent';
28+
```
29+
30+
## Calendar Props
31+
32+
The Calendar Control accepts the following props:
33+
34+
| Property | Type | Required | Description |
35+
| ------------- | ---------------------- | -------- | ------------------------------------------------------------------- |
36+
| events | IEvent[] | Yes | List of events to display in the calendar. |
37+
| height | string \| number | No | Height of the calendar. |
38+
| theme | Theme | No | Theme to apply to the calendar. |
39+
| onMonthChange | (date: Date) => void | No | Callback function triggered when the month changes. |
40+
| onDayChange | (date: Date) => void | No | Callback function triggered when the day changes. |
41+
| onWeekChange | (date: Date) => void | No | Callback function triggered when the week changes. |
42+
| onNext | (date: Date) => void | No | Callback function triggered when navigating to the next period. |
43+
| onPrev | (date: Date) => void | No | Callback function triggered when navigating to the previous period. |
44+
| onViewChange | (view: string) => void | No | Callback function triggered when the view changes. |
45+
| onDaySlotClick | (date: Date) => void | No | Callback function triggered when an event is clicked on day slot on Month view |
46+
47+
## Event Object (IEvent)
48+
49+
Events displayed in the calendar are represented using the `IEvent` interface:
50+
51+
### Event Properties
52+
53+
| Property | Type | Required | Description |
54+
| ------------------- | ------------------------------ | -------- | -------------------------------------------------------------- |
55+
| id | string | Yes | Unique identifier for the event. |
56+
| title | string | Yes | The title of the event. |
57+
| start | string (ISO format) | Yes | The start date and time of the event. |
58+
| end | string (ISO format) | Yes | The end date and time of the event. |
59+
| isFullDay | boolean | No | Indicates if the event lasts the whole day. |
60+
| attendees | IAttendee[] | No | List of attendees for the event. |
61+
| category | string | No | The category of the event (e.g., "Meeting", "Workshop"). |
62+
| description | string | No | A brief description of the event. |
63+
| location | string | No | The event's physical or virtual location. |
64+
| importance | string | No | Importance level of the event (e.g., "High", "Normal", "Low"). |
65+
| isOrganizer | boolean | No | Indicates if the user is the event organizer. |
66+
| sensitivity | string | No | Privacy setting of the event (e.g., "Public", "Private"). |
67+
| type | string | No | Type of event (e.g., "Appointment", "Meeting"). |
68+
| isOnlineMeeting | boolean | No | Indicates if the event is an online meeting. |
69+
| onRenderInMonthView | (event: IEvent) => JSX.Element | No | Custom rendering function for month view. |
70+
| onRenderInWeekView | (event: IEvent) => JSX.Element | No | Custom rendering function for week view. |
71+
| onRenderInDayView | (event: IEvent) => JSX.Element | No | Custom rendering function for day view. |
72+
| enableOnHover | boolean | No | Whether to enable hover effects on events. |
73+
| imageUrl | string | No | URL for an event-related image. |
74+
| webLink | string | No | URL to navigate to event details. |
75+
| color | string | No | Custom color for the event. |
76+
| backgroundColor | string | No | Custom background color for the event. |
77+
78+
## Attendee Object (IAttendee)
79+
80+
The `IAttendee` interface represents an attendee of an event:
81+
82+
| Property | Type | Required | Description |
83+
| -------- | ------ | -------- | ----------------------------------- |
84+
| id | string | Yes | Unique identifier for the attendee. |
85+
| name | string | Yes | Name of the attendee. |
86+
| email | string | No | Email of the attendee. |
87+
| role | string | No | Role of the attendee in the event. |
88+
| imageUrl | string | No | URL for the attendee's image. |
89+
90+
## Usage Example
91+
92+
Here’s an example of how to integrate the Calendar Control in a React component:
93+
94+
```typescript
95+
import React from 'react';
96+
import { Calendar } from '@pnp/spfx-controls-react/lib/calendar';
97+
import { IEvent } from '@pnp/spfx-controls-react/lib/calendar/IEvent';
98+
99+
const events: IEvent[] = [
100+
{
101+
id: '1',
102+
title: 'Weekly Sync: Development Team',
103+
start: '2025-02-15T10:00:00',
104+
end: '2025-02-15T11:00:00',
105+
location: 'Microsoft Teams',
106+
attendees: [{ name: 'AJ' }, { name: 'ML' }],
107+
category: 'Meeting',
108+
isOnlineMeeting: true,
109+
},
110+
{
111+
id: '2',
112+
title: 'Project Deadline',
113+
start: '2025-02-21T23:59:00',
114+
end: '2025-02-21T23:59:00',
115+
category: 'Deadline',
116+
importance: 'High',
117+
},
118+
];
119+
120+
const MyCalendar = () => {
121+
return (
122+
<Calendar
123+
events={events}
124+
height={800}
125+
theme={theme}
126+
onViewChange={(view) => console.log(`View changed to: ${view}`)}
127+
onDayChange={(date) => console.log(`Day changed to: ${date}`)}
128+
onWeekChange={(date) => console.log(`Week changed to: ${date}`)}
129+
onMonthChange={(date) => console.log(`Month changed to: ${date}`)}
130+
onNext={(date) => console.log(`Navigated to next date: ${date}`)}
131+
onPrev={(date) => console.log(`Navigated to previous date: ${date}`)}
132+
/>
133+
);
134+
};
135+
136+
export default MyCalendar;
137+
```
138+
139+
## Conclusion
140+
141+
The Calendar Control provides a flexible and interactive way to manage events. It supports multiple views, custom rendering options, and detailed event properties to enhance the user experience.
142+
143+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Calendar)

0 commit comments

Comments
 (0)