Calendar Component

A React calendar component with booking management capabilities, designed to work with the booking API.

Installation

npm install @dialiq/calendar-component

Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Usage

Basic Example

import React from 'react';
import { Calendar } from '@dialiq/calendar-component';

function App() {
  return (
    <div style={{ width: '100%', padding: '20px' }}>
      <Calendar
        businessId="acme-corp"
        title="My Calendar"
      />
    </div>
  );
}

export default App;

With Resource Filtering

import { Calendar } from '@dialiq/calendar-component';

function UserCalendar() {
  return (
    <Calendar
      businessId="acme-corp"
      resourceId="user_A"
      title="User A's Calendar"
      participants={['user_A']}
    />
  );
}

With Custom API URL

import { Calendar } from '@dialiq/calendar-component';

function App() {
  return (
    <Calendar
      businessId="acme-corp"
      title="Company Calendar"
      apiBaseUrl="https://api.example.com"
    />
  );
}

Using Environment Variables

The component reads the API URL from environment variables if not explicitly provided:

For Create React App:

Create a .env file in your project root:

REACT_APP_CALENDAR_API_URL=https://api.example.com

For other setups:

Set window.CALENDAR_API_URL in your HTML:

<script>
  window.CALENDAR_API_URL = 'https://api.example.com';
</script>

With Event Handlers

import { Calendar, Booking } from '@dialiq/calendar-component';

function App() {
  const handleBookingCreate = (booking: Booking) => {
    console.log('Booking created:', booking);
  };

  const handleBookingClick = (booking: Booking) => {
    console.log('Booking clicked:', booking);
  };

  return (
    <Calendar
      businessId="acme-corp"
      title="Interactive Calendar"
      onBookingCreate={handleBookingCreate}
      onBookingClick={handleBookingClick}
      participants={['user_A', 'room_101']}
    />
  );
}

Props

CalendarProps

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | businessId | string | Yes | - | Business ID for API requests | | resourceId | string | No | - | Filter bookings by specific resource | | title | string | No | 'Calendar' | Calendar title displayed at the top | | apiBaseUrl | string | No | From env or 'http://localhost:8080' | Base URL for API requests | | defaultView | 'month' \| 'week' \| 'day' | No | 'month' | Default calendar view (currently only month is implemented) | | onBookingCreate | (booking: Booking) => void | No | - | Callback when a booking is created | | onBookingClick | (booking: Booking) => void | No | - | Callback when a booking is clicked | | participants | string[] | No | [] | Default participants for new bookings |

Types

Booking

interface Booking {
  meeting_id: string;
  start: string;
  end: string;
  metadata?: {
    title?: string;
    description?: string;
    organizer?: string;
    [key: string]: any;
  };
  participants?: string[];
}

CreateBookingRequest

interface CreateBookingRequest {
  participants: string[];
  start: string;
  end: string;
  metadata?: {
    title?: string;
    description?: string;
    organizer?: string;
    [key: string]: any;
  };
}

API Functions

The package also exports API functions that can be used independently:

import { createBooking, getResourceSchedule, getAllBookings, getMeetingDetails } from '@dialiq/calendar-component';

const booking = await createBooking('business-id', {
  participants: ['user_A', 'room_101'],
  start: '2024-11-20T10:00:00.000Z',
  end: '2024-11-20T11:00:00.000Z',
  metadata: { title: 'Team Meeting' }
});

const schedule = await getResourceSchedule(
  'business-id',
  'user_A',
  '2024-11-01T00:00:00.000Z',
  '2024-11-30T23:59:59.000Z'
);

const allBookings = await getAllBookings(
  'business-id',
  '2024-11-01T00:00:00.000Z',
  '2024-11-30T23:59:59.000Z'
);

const meeting = await getMeetingDetails('business-id', 'meeting-id');

Features

• 📅 Monthly Calendar View: Clean, intuitive calendar interface
• ➕ Create Bookings: Built-in modal for creating new bookings
• 👥 Multi-Participant Support: Book meetings with multiple participants
• 🔍 Resource Filtering: View bookings for specific resources
• 🎨 Responsive Design: Works on desktop and mobile devices
• ⚙️ Configurable: Extensive props for customization
• 🌐 Environment Variables: Flexible API URL configuration
• 📦 Standalone Package: Can be installed and used in any React project

Development

npm install
npm run build
npm run dev

License

MIT