Interactive event modal

A plugin for displaying an interactive modal for adding, editing and removing events.

This is a premium plugin which requires an active license to be used. Learn more at Schedule-X premium.

Features & demo

Adding, updating and deleting events
Click to create
Recurring events
Validation

Go to Demo

2. Install the packages

2.1 Set up premium auth (only once)

Follow the instructions for setting up an .npmrc

2.2 Install

npm i @sx-premium/interactive-event-modal

Usage

import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal } from "@sx-premium/interactive-event-modal";
 
import '@sx-premium/interactive-event-modal/index.css'
 
const eventsService = createEventsServicePlugin()
 
const eventModal = createInteractiveEventModal({
  // dependency needed to add events
  eventsService,
 
  // (Optional): Available people for the event form
  availablePeople: ['John Doe', 'Jane Doe'],
 
  // (Optional): callback for when an event is added
  onAddEvent: (event) => {
    console.log(event)
  },
 
  // (Optional): callback for when an event is updated
  onDeleteEvent: (eventId) => {
    console.log(eventId)
  },
 
  // (Optional): callback for when an event start property is updated
  onStartUpdate(start) {
    console.log(start)
  },
 
  // (Optional): callback for when an event end property is updated
  onEndUpdate(end) {
    console.log(end)
  },
 
  // (Optional): callback which is invoked before opening the modal. Return false to prevent the modal from opening
  canOpenModal: (event) => {
    return event.calendarId === 'calendar-1';
  },
 
  // (Optional): configure the time picker to use 12-hour format
  has12HourTimeFormat: true,
 
  // (Optional): add a gray "move-bar" bar at the top of the modal, which can be used to move the modal
  movable: true,
 
  // (Optional): configuration for the field "title"
  fields: {
    title: {
      label: 'Event Title',
      name: 'event-title',
      validator: (value) => {
        return {
          isValid: !!value && value.length >= 3,
          message: 'Title must be at least 3 characters long'
        }
      }
    },
    description: {},
  }
})
 
const calendar = createCalendar({
  // ...other configuration
  plugins: [
    eventModal,
    eventsService,
  ],
 
  callbacks: {
    onDoubleClickDateTime(dateTime) {
      eventModal.clickToCreate(dateTime, {
        id: 'some-event-id',
      })
    }
  }
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))

Public methods

`openEventCreationModal(id: string | number, start?: string, otherEventProperties?: Partial<CalendarEvent>)`

Method for programmatically opening the event creation modal. The id parameter is used for setting an id of the event that will be created, if the user chooses to click save.

Parameters

id - id of the event that will be created
start - start date or datetime of the event that will be created
otherEventProperties - additional properties that will be added to the event that will be created

`clickToCreate: (start: string, otherEventProperties?: Partial<CalendarEvent>) => void`

Method for adding an event and opening the event editing modal. Preferably used with the onDoubleClickDateTime and onDoubleClickDate callbacks, to add events by clicking.

`fields` configuration option

Please note, that by default, all fields are displayed.

If you, however, configure one of them, the rest will be hidden by default. Date and time pickers are an exception here, since these are required at least when adding an event. For adding a field but without custom configuration, simply add it with an empty object like so:

fields: {
  description: {}
  // other fields
}

Available fields

Field name	Notes
title
description
startDate	Cannot have validator callback. Use `minDate` & `maxDate` instead
startTime	Cannot have validator callback. Use `minDate` & `maxDate` instead
endDate	Cannot have validator callback. Use `minDate` & `maxDate` instead
endTime	Cannot have validator callback. Use `minDate` & `maxDate` instead
rruleFrequency	Cannot have validator callback.
rruleUntil	Cannot have validator callback.
people
calendarId

Custom fields

Additional to the default fields, you can add custom fields to a customFields property. The fields of this property follow the same structure as the default fields, but additionally you need to add one of the supported types: text, textarea, select or combobox. For example:

import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal } from "@sx-premium/interactive-event-modal";
 
import '@sx-premium/interactive-event-modal/index.css'
 
const eventsService = createEventsServicePlugin()
 
const eventModal = createInteractiveEventModal({
  eventsService,
 
  fields: {
    title: {},
  },
 
  customFields: {
    additionalNotes: { // will correspond to an event property "additionalNotes"
      label: 'Additional notes',
      name: 'additional-notes',
      type: 'textarea',
      validator: (value) => {
        return {
          isValid: !!value && value.length >= 3,
          message: 'Custom field must be at least 3 characters long'
        }
      }
    },
 
    locationSelect: { // will correspond to an event property "locationSelect"
      label: 'Location',
      type: 'select',
      items: [
        { label: 'Lake view office', value: 'lake-view' },
        { label: 'City center office', value: 'city-center' },
        { label: 'Home office', value: 'home' },
      ]
    },
  }
})

If you need to display these custom fields in the view mode of the modal, you can write a custom component for interactiveModalAdditionalFields, which then receives calendarEvent as a prop. View the docs for your framework (Vue, React etc.) to learn how custom components work in Schedule-X.

Changelog

See changelog page.

Event Modal ⭐ Sidebar