Event Component

Description

The EventComponent how events are displayed within Schedulely. The EventComponent itself is purely concerned with display, it's overall length is determined internally based on the start/end of the event. The hover effect is also handled internally, so all you need to do is describe what action should be taken if the event happens to be hovered.

Example (DefaultEvent)

import 'schedulely/dist/index.css';
import { DefaultEvent } from './EventExample';

export default function App() {
    return (
      //wrapper div so example works correctly
      <div className="schedulely">
        <DefaultEvent 
          event={{
            id: 1,
            color: 'lightblue',
            summary: 'example event'
          }}
          isHovered={false}
          onClick={()=>console.log('event clicked!')}
        />
    </div>
    )
}

Custom Event Component

The EventComponent also has an optional generic parameter that can be used to enforce strong-typing of the data property. This can be leveraged if writing your own custom EventComponent.

More information can be found on the Custom Event Data Page.

Extra Event Data

Additional data can be passed in by utilizing the data property on the CalendarEvent type. If using Typescript, you can passing the generic parameter to get strong-typing in your components. This isn't strictly necessary, but it is helpful if you are creating a custom Event component.

Component Props

export interface EventComponentProps<T extends object = {}> {
  event: InternalCalendarEvent<T>;
  isHovered: boolean;
  onClick: (event: InternalCalendarEvent<T>) => void;
}