react-tailwind-calendar

A flexible and customizable big calendar component for React built with Tailwind CSS.

🌐 Demo

Check out the live demo: https://react-tailwind-calendar-nu.vercel.app/

Installation

npm install react-tailwind-calendar
# or
yarn add react-tailwind-calendar
# or
pnpm add react-tailwind-calendar

Requirements

This package requires the following dependencies:

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0
• date-fns ^3.0.0
• @remixicon/react ^4.0.0

Tailwind CSS

This component uses Tailwind CSS classes and requires Tailwind CSS to be configured in your project. Make sure you have:

• tailwindcss installed and configured
• Tailwind CSS classes available in your project

Required Tailwind Configuration

The component uses custom Tailwind colors and text sizes. You need to configure these in your tailwind.config.js:

Custom Colors:

• bg-information-lighter, bg-warning-lighter, bg-away-lighter, bg-success-lighter, bg-error-lighter
• bg-bg-white-0, bg-bg-weak-50
• text-text-strong-950, text-text-sub-600, text-text-soft-400
• border-stroke-soft-200

Custom Text Sizes:

• text-label-xs, text-label-sm
• text-subheading-2xs
• text-paragraph-xs

Custom CSS

The component automatically injects the required CSS styles when imported. The .calendar-disabled-hour class is used for styling disabled time slots and is automatically available - no manual import needed!

If you need to customize the disabled hour styling, you can override the CSS variable:

:root {
  --stroke-soft-200: 220 13% 91%; /* Default gray color */
}

Usage

import {BigCalendar, type CalendarData} from 'react-tailwind-calendar';

const events: CalendarData[] = [
  {
    id: '1',
    startDate: new Date('2024-11-04T09:00:00'),
    endDate: new Date('2024-11-04T10:00:00'),
    title: 'Meeting',
    type: 'meeting',
  },
];

function App() {
  return (
    <BigCalendar
      defaultStartDate={new Date('2024-11-04T00:00:00')}
      events={events}
      onSlotClick={(data) => console.log('Slot clicked:', data)}
      onEventClick={(event, date) => console.log('Event clicked:', event, date)}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultStartDate | Date | required | The starting date for the calendar view | | events | CalendarData[] | required | Array of calendar events to display | | totalShowingDays | number | 6 | Number of days to show in the calendar | | className | string | - | Custom CSS class for the calendar container | | showAllHours | boolean | false | Show all 24 hours regardless of events | | timeFormat | '12h' \| '24h' | '12h' | Time display format | | onSlotClick | (data: SlotClickData) => void | - | Callback when an empty slot is clicked | | onEventClick | (event: CalendarData, date: Date) => void | - | Callback when an event is clicked | | workingHours | WorkingHoursConfig | - | Configuration for working hours | | shifts | ShiftData[] | - | Array of shift data to display | | dayLabels | DayLabels | English labels | Custom day labels for localization | | weekStartsOn | WeekStartsOn | - | Day the week starts on (0=Sunday, 1=Monday, etc.) | | avatarComponent | AvatarComponent | - | Custom avatar component | | avatarGroupComponent | AvatarGroupComponent | - | Custom avatar group component |

Localization (Day Labels)

You can customize the day labels for different languages:

import { BigCalendar, DayLabels } from 'react-tailwind-calendar';

// Turkish day labels
const turkishDayLabels: DayLabels = {
  sunday: 'Paz',
  monday: 'Pzt',
  tuesday: 'Sal',
  wednesday: 'Çar',
  thursday: 'Per',
  friday: 'Cum',
  saturday: 'Cmt',
};

<BigCalendar
  defaultStartDate={new Date()}
  events={events}
  dayLabels={turkishDayLabels}
/>

Week Start Day

You can configure which day the week starts on:

import { BigCalendar } from 'react-tailwind-calendar';

// Week starts on Monday
<BigCalendar
  defaultStartDate={new Date()}
  events={events}
  weekStartsOn={1}  // 0=Sunday, 1=Monday, 2=Tuesday, etc.
  totalShowingDays={7}
/>

| Value | Day | |-------|-----| | 0 | Sunday | | 1 | Monday | | 2 | Tuesday | | 3 | Wednesday | | 4 | Thursday | | 5 | Friday | | 6 | Saturday |

When weekStartsOn is set, the calendar will automatically adjust to start from that day of the week, regardless of what defaultStartDate is.