Day Component

Description

The DayComponent is used to display individual days on the calendar grid. Various properties are used to control the color, indicators, and text of the calendar day.

The following example displays how to create a custom Day component. You aren't required to create a DayComponent unless you want to override the default version.

Example (DefaultDay)

import 'schedulely/dist/index.css';
import { DefaultDay } from './DayExample';

export default function App() {
    return (
      //wrapper div so example works correctly
      <div className="schedulely" style={{width: '5em', height: '5em', border: '1px dashed black'}}>
        <DefaultDay 
          isCurrentMonth={false} 
          isToday={false} 
          date={new Date()} 
          isOverflowed={true}
          onMoreEventsClick={()=>console.log('clicked event!')}
          onDayClick={()=>console.log('clicked day!')}
          events={[]}
        />
    </div>
    )
}

Open Sandbox

Dealing with hidden events

Once one or more events overflow the DayComponent container, isOverflowed will be set to true and the UI updated to show the additional events indicator, presuming you are using the default Day component.

Once events overflow the day container, they will also begin being hidden. All events are contained within the events array, with the visible property indicating the visibility of each event on that day.

Component Props

export interface DayComponentProps<T extends object = {}> {
  isCurrentMonth: boolean;
  date: Date;
  isToday: boolean;
  isOverflowed: boolean;
  events: InternalCalendarEvent<T>[];
  onMoreEventsClick: (event: InternalCalendarEvent<T>[]) => void;
  onDayClick: (day: Date) => void;
}

Property	Type	Description
isCurrentMonth	`boolean`	True if this date occurs in the current visible month
isToday	`boolean`	True is this date is equal to today's date
date	`Date`	JS Date object for the day
events	`InternalCalendarEvent<T>[]`	Array of all events that occur or span this date (both hidden and visible)
isOverflowed	`boolean`	True if the date has more events than can visible fit. (Some events are hidden)
onMoreEventsClick	`(event: InternalCalendarEvent<T>[]) => 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

Custom Day Component

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

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

🔧 Components Event Component