Actions

While Schedulely expects developers to implement their own components to achieve their desired goals, we have provided clear interfaces for how actions should be handled. The ActionProvider is used under the hood to take in functions as arguments and pass them in to the calendar components. This makes state management within Schedulely simple, and ensures we are re-rendering the bare minimum. If you are creating custom calendar components, these actions are available to you on each components respective interface, and can be implemented(or not implemented) however you choose.

⚠️

By default, all actions return () => null unless explicitly overridden. This equates to a no-op, so any event handlers can be considered disabled unless expressly defined.

Provided Actions

By default, the actions will print their target Events in to the javascript console.

Action	Signature	Description
onEventClick	`(event: InternalCalendarEvent) => void`	This function runs any time an individual event is clicked
onMoreEventsClick	`(event: InternalCalendarEvent[]) => void`	This function should be called whenever the 'More Events' indicator is clicked
onDayClick	`(day: Date) => void`	This function should be called whenever a Day Component is clicked on
onMonthChangeClick	`(firstOfMonth: Date, lastOfMonth: Date) => void`	This function is called whenever the month is changed

Setting Custom Actions

Action behavior can be easily set by passing in a function for the desired action when initializing Schedulely.

This simple example replaces the default () => null action action with alert.

const events = [...generateEvents(100), ...generateEvents(100, 0, 1, 100)];
 
render(
  <Schedulely
    events={events}
    dark={localStorage.getItem('theme') === 'dark'}
    actions={{
      onEventClick: (event) => alert(JSON.stringify(event, null, 2)),
      onMoreEventsClick: (events) => alert(JSON.stringify(events, null, 2)),
    }}
  />
);

Similarly, you could also print info to the console:

const events = [...generateEvents(100), ...generateEvents(100, 0, 1, 100)];
 
render(
  <Schedulely
    events={events}
    dark={localStorage.getItem('theme') === 'dark'}
    actions={{
      onEventClick: (event) => console.log(event),
      onMoreEventsClick: (events) => console.log(events),
    }}
  />
);

This principal could easily be expanded upon to display an information modal with more details about that particular event. We leave this implementation up to you.

Custom Components and Actions

When creating custom components, you are not required to use the ActionProvider interface to deal with behavior though you should if possible. If you choose to bypass the ActionProvider (ie don't use functions passed in through the interfaces), make sure you remember to memoize them to prevent unnecessary rerenders.

Dark Mode Date Time