Getting Started

The fastest way to get started using Schedulely is to just add the NPM package to your React project, and create an instance of Schedulely.

📦 Installation

npm install schedulely
## or
yarn install schedulely

🔨 Basic Usage

This example initializes the calendar with default components, using the included NativeJS DateAdapter as the date library.

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

export default function App() {
    return <Schedulely events={[]} />
}

Open Sandbox

optional

The default theme uses the Roboto font, so it should be loaded prior to initializing Schedulely to avoid flickering. Add the following to the <head> section of your application to preload the Roboto font

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>

Component Props

export interface SchedulelyProps {
  dateAdapter?: DateTimeAdapter;
  schedulelyComponents?: Partial<SchedulelyComponents>;
  events: CalendarEvent[];
  additionalClassNames?: string[];
  theme?: string;
  actions?: Partial<ActionState>;
  initialDate?: string;
  eventPriority: EventPriority;
}

Property	Type	Description
dateAdapter	`DateTimeAdapter?`	Override the default Date/date-fns adapter with a custom implementation
schedulelyComponents	`Partial<SchedulelyComponents>?`	Override individual components with custom ones
events	`CalendarEvent[]`	List of events that will be displayed
additionalClassNames	`string[]?`	Any additional class names you want applied to the root element
theme	`string?`	Name of theme to apply to Schedulely
actions	`Partial<ActionState>?`	Override component actions
initialDate	`string?`	Schedulely will start on the current month, unless overridden with this property
eventPriority	`EventPriority?`	Choose if short or long events should respectively push other event types off first

Schedulely 🔧 Components