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