Customized Calendar Component

A modern, elegant, and highly customizable calendar component built with React, TypeScript, and FullCalendar. Perfect for any application that needs a beautiful, flexible calendar interface.

Features

✨ Modern Design

• Clean, elegant UI with gradient accents
• Responsive layout for all screen sizes
• Customizable theme colors
• Smooth animations and transitions

📅 Multiple Views

• Month view
• Week view
• Day view

🎯 Event Management

• Color-coded events by type (SESSION, EVENT, EXAM, HOLIDAY)
• Batch information display
• Drag & drop support
• Event resizing
• Click to view/edit events

📚 Batch Support

• Display batch information for each event
• Group events by batch
• Batch-specific filtering

🎨 Customizable

• Theme color support
• Custom event colors
• Flexible styling with Tailwind CSS

Installation

NPM Package (Recommended)

npm install customized-calendar
# or
yarn add customized-calendar

Note: This component uses Tailwind CSS classes. Make sure Tailwind CSS is configured in your project. See Styling section below for setup instructions.

Manual Installation

If you prefer to copy the component files directly:

1. Copy the components/classroom-calendar folder to your project
2. Install peer dependencies:

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction react react-dom

Quick Start

Using NPM Package

import { CustomizedCalendar, CalendarEvent, EventType } from 'customized-calendar';

function MyCalendar() {
  const events: CalendarEvent[] = [
    {
      id: '1',
      title: 'Mathematics Session',
      start: new Date(),
      end: new Date(Date.now() + 90 * 60 * 1000),
      batchId: 'batch-001',
      batchName: 'Batch A - Morning',
      type: EventType.SESSION,
    },
  ];

  return (
    <CustomizedCalendar
      events={events}
      onDateClick={(date) => console.log('Date:', date)}
      onEventClick={(event) => console.log('Event:', event)}
      themeColor="#3b82f6"
    />
  );
}

Using Copied Component Files

import { CustomizedCalendar, CalendarEvent, EventType } from '@/components/classroom-calendar';

function MyCalendar() {
  const events: CalendarEvent[] = [
    {
      id: '1',
      title: 'Mathematics Session',
      start: new Date(),
      end: new Date(Date.now() + 90 * 60 * 1000),
      batchId: 'batch-001',
      batchName: 'Batch A - Morning',
      type: EventType.SESSION,
    },
  ];

  return (
    <CustomizedCalendar
      events={events}
      onDateClick={(date) => console.log('Date:', date)}
      onEventClick={(event) => console.log('Event:', event)}
      themeColor="#3b82f6"
    />
  );
}

Documentation

• NPM Publish Guide - How to publish to NPM
• Quick Integration Guide - 5-minute setup guide
• Reusable Package Guide - Use in other projects & backend integration
• Quick Start Guide - Get started in 5 minutes
• Integration Guide - Complete integration documentation
• API Contract - Backend API requirements
• Data Structure - Data models and types

Component Structure

components/classroom-calendar/
├── CustomizedCalendar.tsx      # Main calendar component
├── AddEventModal.tsx           # Add event modal
├── EventDetailsModal.tsx       # Event details modal
├── DateEventsList.tsx          # Date events list modal
├── calendar.types.ts           # TypeScript types
├── calendar.utils.ts          # Utility functions
└── index.ts                   # Exports

Props

CustomizedCalendar

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | events | CalendarEvent[] | ✅ | - | Array of calendar events | | onDateClick | (date: string) => void | ✅ | - | Callback when date is clicked | | onEventClick | (event: CalendarEvent) => void | ✅ | - | Callback when event is clicked | | height | string \| number | ❌ | 'auto' | Calendar height | | initialView | 'dayGridMonth' \| 'timeGridWeek' \| 'timeGridDay' | ❌ | 'dayGridMonth' | Initial view | | themeColor | string | ❌ | '#3b82f6' | Primary theme color (hex) | | editable | boolean | ❌ | true | Enable drag & drop | | selectable | boolean | ❌ | true | Enable date selection |

Event Types

• SESSION: Regular class sessions (Blue: #4f46e5)
• EVENT: Special events, labs, workshops (Green: #059669)
• EXAM: Examinations (Red: #dc2626)
• HOLIDAY: Holidays (Amber: #d97706)

Examples

See components/classroom-calendar/example-usage.tsx for complete examples.

Backend Integration

The component can work with any backend that provides calendar events. It's flexible and can be adapted to different API structures.

Quick Setup

1. Copy component files to your project (see QUICK_INTEGRATION.md)
2. Configure API service (see services/calendarApi.configurable.ts)
3. Connect to your backend

Backend Options

• REST API - Standard REST endpoints (see INTEGRATION_GUIDE.md)
• GraphQL - Use GraphQL queries (see REUSABLE_PACKAGE_GUIDE.md)
• Firebase/Supabase - Direct database integration (examples included)
• Custom Format - Adapt to any API structure (see examples/api-config-examples.ts)

Required Endpoints

• GET /api/calendar/events - Get events with date range
• POST /api/calendar/events - Create event
• PUT /api/calendar/events/:id - Update event
• DELETE /api/calendar/events/:id - Delete event

See API_CONTRACT.md for detailed API documentation and REUSABLE_PACKAGE_GUIDE.md for backend integration strategies.

Styling

The component uses Tailwind CSS. Ensure Tailwind is configured in your project:

// tailwind.config.js
module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/customized-calendar/dist/**/*.{js,jsx}', // Include package files
    './app/**/*.{js,ts,jsx,tsx}', // Your app files
  ],
  // ... rest of config
};

Important: The component includes inline styles for FullCalendar customization, but Tailwind CSS classes are used for layout and responsive design. Make sure your Tailwind configuration includes the package files in the content array.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Using in Other Projects

Want to use this calendar in another project? See the comprehensive guide:

• REUSABLE_PACKAGE_GUIDE.md - Complete guide for using in other projects
  • Copy component files
  • Configure for different backends
  • API service examples
  • Firebase/GraphQL/Custom backend examples

Quick start: Copy components/classroom-calendar folder and install dependencies.

Support

For issues or questions:

1. Check the Quick Integration Guide for fast setup
2. See Reusable Package Guide for backend integration
3. Review Integration Guide for complete documentation
4. Check API Contract for backend requirements
5. See example implementations in examples/ folder