f-react-agenda

f-react-agenda is a simple agenda component for React.

Documentation and examples

Setup

Install package:

npm install f-react-agenda

Import component:

import { Agenda } from 'f-react-agenda';

Use React-Agenda:

<Agenda
    startTime={600}
    endTime={900}
    firstDay={1}
    daysNumber={7}
    locale="en-US"
/>

Features overview

• Multiple views: day, week or custom range of days.
• Timeslot: from one minute to sixty.
• Events: shows events in the agenda based on a day and a time range.
• Resources: enables separate lanes in the agenda (e.g.: rooms, collaborators, etc..)
• Actions callback: click on timeslot, event or change date event.
• Locale: dates format based on locale.
• Timezone: converts date and time in selected timezone.

Possible future steps

• Overlap events: manage events with the same day and time that overlaps.
• Multi-days event: manage events that fits multiple days.
• Drag&Drop: move event card from one timeslot or day to another. Adjust time length.
• Color for resource: Display different color of the card, header or day column based on the resource.
• ...: ...
• ...: ...