CalendarEventNodeEditor Documentation

Overview

The CalendarEventNodeEditor is a custom editor component designed to facilitate the creation of calendar events in popular services like Google Calendar and Outlook. It mirrors the functionality of Google's calendar quick-add popover, providing users an intuitive interface for adding event details such as title, date, time, location, attendees, and video conferencing options. This component enhances user experience by streamlining the process of event creation, ensuring that all necessary information is captured in an accessible format.

Purpose

The primary purpose of the CalendarEventNodeEditor is to allow users to input and configure settings for calendar events quickly. It presents options for multi-day events, time zone specifications, and integrations with online meeting services. Through this component, users can efficiently manage their scheduling and enhance collaboration.

Settings

The CalendarEventNodeEditor includes several settings that dictate how it behaves and what data it captures. Below is an exhaustive breakdown of each setting:

1. Summary

• Input Type: String
• Description: This field captures the title of the event. Users can enter a brief, descriptive title that represents the purpose of the event.
• Default Value: Empty string ('').

2. Start Date and Time

• Input Type: Date (for date) and Dropdown (for time)
• Description: This setting allows users to set the start date and time for the event. The date is selected from a date picker, and the time is selected from dropdown options that represent half-hour intervals (e.g., 9:00 AM, 9:30 AM).
• Default Value: Current date for the date picker and empty string for time.

3. End Date and Time

• Input Type: Date (for date) and Dropdown (for time)
• Description: Similar to the start date and time, this setting captures the ending date and time for the event. For multi-day events, this can be adjusted to reflect the conclusion of the event.
• Default Value: The same as the start date (if not specified).

4. Timezone

• Input Type: String
• Description: This field allows users to specify the timezone of the event, accommodating participants in different time zones. Input is expected in standard format (e.g., America/New_York).
• Default Value: Empty string ('').

5. Location

• Input Type: String
• Description: This field is used to specify the location where the event will take place. It can be a physical address or a virtual meeting link.
• Default Value: Empty string ('').

6. Attendees

• Input Type: String
• Description: This setting enables users to add email addresses of guests who will receive invitations to the event. Multiple addresses should be separated by commas.
• Default Value: Empty string ('').

7. Video Meeting Integration

• Input Type: Boolean
• Description: This setting allows users to enable or disable video conferencing for the event. Depending on the calendar service selected (Google or Outlook), users can toggle the integration for Google Meet or Microsoft Teams.
• Default Value: false.

8. Multi-day Event

• Input Type: Toggle (Button)
• Description: This feature allows users to easily mark the event as a multi-day occurrence. If set, it adjusts the end date to the following day.
• Default Value: false.

How It Works

The CalendarEventNodeEditor operates as follows:

• Users map out their event details using the various fields.
• When the user types in the summary, adjusts the dates/times, or specifies the location, the component updates its internal state.
• The meeting integration toggles activate or deactivate the inclusion of virtual meeting links based on the selected calendar service (either Google or Outlook).
• Changes are communicated back to the parent component via the updateField function, allowing for dynamic updates and correct event configuration.

Data Expectations

The component expects the following data from its config prop:

• summary: String representing the title of the event.
• startDateTime: DateTime string representing the start of the event.
• endDateTime: DateTime string representing the end of the event.
• timeZone: String representing the time zone for the event.
• location: String for the event's location.
• attendees: String containing comma-separated email addresses.
• meetingField: Boolean determining whether Google Meet or Teams is added.

Use Cases & Examples

Use Case 1: Corporate Meeting Scheduling

A project manager needs to schedule a meeting with team members across different time zones. The CalendarEventNodeEditor allows them to set the meeting's title, date, time, and the virtual platform for joining the call.

Use Case 2: Multi-Day Conference

An organizer is responsible for a multi-day conference taking place in a specific city. They can use the editor to input the event details, ensuring proper guest invitations and location settings.

Example Configuration

Scenario: A user wants to create a multi-day project kickoff meeting that includes a Google Meet link and invites team members.

Configuration Data:

{
  "summary": "Project Kickoff Meeting",
  "startDateTime": "2023-11-01T09:00",
  "endDateTime": "2023-11-03T17:00",
  "timeZone": "America/New_York",
  "location": "Conference Room A",
  "attendees": "user1@example.com, user2@example.com",
  "addGoogleMeet": true
}

In this example, the project manager configures the event to start on November 1st, end on November 3rd, sets the participants, and includes video conferencing options for easy remote access.