Skip to main content

Displaying events

  • events are plain objects which are passed to component using a events prop.
  • the only requirement for an event is id, startDate and endDate in order to display it in the calendar
  • If you want to display it in the resource then also a resource id is needed
  • events data change can be handled internaly in mhcalend or externaly using a reactive state
  • you can set title and despription,
interface IMHCalendarEvent {
  id: string;
  startDate: Date;
  endDate: Date;
  title?: string;
  allDay?: boolean;
  description?: string;
  isHidden?: boolean;
  color?: string;
  resourceId?: string;
  draggingToggle?: boolean;
  [key: string]: unknown;
}

Requirements​

  • Each event require an uniq id, this is crucial for internal manipulation.
  • startDate and endDate are Date object from javascript. In order to display it in the timeline view the date require also a time

Colors​

By default all events have color set by default property 'eventBackgroundColor'. But this can be overwritten by a color property

Dragging block​

  • if you want to block certian event from being draggable then you can set draggingToggle to false. This will overwrite the global config option

Hidding an event​

you can also hide the event with isHidden

Event change handling​

Either imperative or external state.