Flexible Calendar UI

A highly customizable React calendar component with monthly and yearly views.

Installation

npm install flexible-calendar-ui
# or
yarn add flexible-calendar-ui

Usage

import { Calendar, YearCalendar, CalendarContainer } from 'flexible-calendar-ui';
import 'flexible-calendar-ui/dist/styles.css';

// Use with default theme
const MyCalendar = () => {
  return (
    <CalendarContainer>
      <Calendar />
    </CalendarContainer>
  );
};

// Use with custom theme
const MyCustomCalendar = () => {
  const customTheme = {
    primaryColor: '#ff5722',
    secondaryColor: '#e91e63',
    textColor: '#333',
    presentColor: '#4caf50',
    absentColor: '#f44336',
    leaveColor: '#ff9800',
    holidayColor: '#9c27b0',
    dayOffColor: '#607d8b',
    inactiveColor: '#f5f5f5',
  };

  return (
    <CalendarContainer theme={customTheme}>
      <Calendar />
    </CalendarContainer>
  );
};

Features

• Monthly and yearly calendar views
• Customizable styles and themes
• Support for marking attendance status (present, absent, leave, etc.)
• Holiday indicators
• Responsive design

Customization

You can customize the calendar by providing a theme object to the ThemeProvider component.

const customTheme = {
  primaryColor: '#3f51b5',      // Main accent color
  secondaryColor: '#2196f3',    // Secondary accent color
  textColor: '#212121',         // Default text color
  presentColor: '#4caf50',      // Color for present status
  absentColor: '#f44336',       // Color for absent status
  leaveColor: '#ff9800',        // Color for leave status
  holidayColor: '#9c27b0',      // Color for holidays
  dayOffColor: '#607d8b',       // Color for days off
  inactiveColor: '#f5f5f5',     // Color for inactive or future dates
  headerBgColor: '#0070bf',     // Header background color
  borderRadius: '8px',          // Border radius for UI elements
  headerTextColor: '#ffffff',   // Header text color
};

Data Configuration

You can provide custom attendance data, holidays, and status information:

import { Calendar, CalendarContainer } from 'flexible-calendar-ui';

const MyCalendar = () => {
  const attendanceData = [
    { date: "2024-05-25", status: "absent" },
    { date: "2024-05-15", status: "leave" },
    // Add more data as needed
  ];

  const holidayData = {
    "2024-05-01": "Labor Day",
    "2024-12-25": "Christmas",
    // Add more holidays as needed
  };

  return (
    <CalendarContainer>
      <Calendar attendance={attendanceData} holidays={holidayData} />
    </CalendarContainer>
  );
};

API Reference

CalendarContainer Props

| Prop | Type | Description | |------|------|-------------| | theme | Object | Custom theme object | | children | ReactNode | Child components |

Calendar Props

| Prop | Type | Description | |------|------|-------------| | attendance | Array | Array of attendance records | | holidays | Object | Object mapping dates to holiday names | | initialDate | Date/String | Initial date to display | | onDateClick | Function | Callback when a date is clicked |

YearCalendar Props

| Prop | Type | Description | |------|------|-------------| | attendance | Array | Array of attendance records | | holidays | Object | Object mapping dates to holiday names | | initialYear | Number | Initial year to display | | onDateClick | Function | Callback when a date is clicked |

For Contributors

Local Development

1. Clone the repository
2. Install dependencies

   cd flexible-calendar-ui
   npm install

3. Start the development build

   npm run dev

Building the Package

npm run build

This will create a dist folder with the compiled package.

Publishing to NPM

1. Update the version in package.json
2. Make sure you're logged in to npm

   npm login

3. Build and publish

   npm publish

License

MIT