Header Component

Description

The HeaderComponent defines how the large banner at the top of the calendar appears. It can include as many or as few controls as you want.

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

Example (DefaultHeader)

import 'schedulely/dist/index.css';
import { DefaultHeader } from './HeaderExample';

export default function App() {
    return (
      //wrapper div so example works correctly
      <div className="schedulely" style={{border: '1px dashed black'}}>
        <DefaultHeader 
          month={'January'}
          year={2008}
          isCurrentMonth={false}
          onNextMonth={()=>console.log('next month')} 
          onNextYear={()=>console.log('next year')}
          onPrevMonth={()=>console.log('prev month')}
          onPrevYear={()=>console.log('prev year')}
        />
    </div>
    )
}

Open Sandbox

Component Props

export interface HeaderProps {
  month: string;
  year: number;
  isCurrentMonth: boolean;
  onNextMonth: () => void;
  onNextYear: () => void;
  onPrevMonth: () => void;
  onPrevYear: () => void;
}

Property	Type	Description
month	`string`	The current month the calendar is displaying
year	`number`	The current year the calendar is displaying
isCurrentMonth	`boolean`	True if the selected month is the same as the current month
onNextMonth	`() => void`	Calling this functions moves to the next month
onNextYear	`() => void`	Calling this functions moves to the same month of the next year
onPrevMonth	`() => void`	Calling this functions moves to the previous month
onPrevYear	`() => void`	Calling this functions moves to the same month of the previous year

Event Component 🎨 Themes