meeting-calender

A comprehensive meeting calendar package for managing meetings, consultants, and scheduling with a beautiful UI.

Installation

npm install meeting-calendar-pkg

Usage

Basic Usage with Configuration

import { MeetingCalendar, CalendarConfig } from 'meeting-calendar-pkg';

// Initialize with configuration (props)
const config: CalendarConfig = {
  consultant: {
    name: 'Freddie Pritchard-Smith',
    profileImage: 'images/profile.png',
    duration: 30 // in minutes
  },
  location: '123 High Street, AB1 2CD, London',
  timezone: 'UTC +01:00 Dublin, London, Lisbon',
  selectedDate: new Date(2025, 8, 18), // September 18, 2025
  availableTimes: ['11:00', '11:30', '12:00', '14:00', '14:30', '15:00']
};

const calendar = new MeetingCalendar(config);

// Generate HTML with calendar
const htmlContent = calendar.generateHTML();
document.getElementById('calendar-container').innerHTML = htmlContent;

Add and Manage Meetings

import { MeetingCalendar, Meeting } from 'meeting-calendar-pkg';

const calendar = new MeetingCalendar(config);

// Add a meeting
const meeting: Meeting = {
  id: '1',
  title: 'Consultation Meeting',
  startTime: new Date('2025-09-18T11:00:00'),
  endTime: new Date('2025-09-18T11:30:00'),
  participants: ['John Doe', 'Freddie Pritchard-Smith']
};

calendar.addMeeting(meeting);

// Get all meetings
const allMeetings = calendar.getMeetings();
console.log(allMeetings);

// Get meetings for a specific date
const septemberMeetings = calendar.getMeetingsByDate(new Date(2025, 8, 18));
console.log(septemberMeetings);

// Remove a meeting
calendar.removeMeeting('1');

Update Configuration

// Update consultant info
calendar.updateConfig({
  consultant: {
    name: 'John Smith',
    profileImage: 'images/john.png',
    duration: 45
  }
});

// Update available times
calendar.updateConfig({
  availableTimes: ['10:00', '10:30', '13:00']
});

// Get current configuration
const currentConfig = calendar.getConfig();

Using Styles

The package includes ready-to-use CSS styles. Make sure to import them in your project:

import 'meeting-calendar-pkg/dist/calendar.css';

Or in HTML:

<link rel="stylesheet" href="node_modules/meeting-calendar-pkg/dist/calendar.css">

API Reference

CalendarConfig Interface

Configuration object for initializing the calendar:

interface CalendarConfig {
  consultant: ConsultantInfo;
  selectedDate?: Date;
  location: string;
  timezone: string;
  availableTimes: string[];
}

ConsultantInfo Interface

interface ConsultantInfo {
  name: string;
  profileImage: string;
  duration: number; // in minutes
}

Meeting Interface

interface Meeting {
  id: string;
  title: string;
  startTime: Date;
  endTime: Date;
  participants?: string[];
}

MeetingCalendar Methods

Constructor

new MeetingCalendar(config: CalendarConfig)

Initialize a new MeetingCalendar with configuration.

addMeeting(meeting: Meeting): void

Add a meeting to the calendar.

getMeetings(): Meeting[]

Get all meetings in the calendar.

removeMeeting(id: string): boolean

Remove a meeting by its ID. Returns true if successful, false otherwise.

getMeetingsByDate(date: Date): Meeting[]

Get all meetings for a specific date.

updateConfig(config: Partial<CalendarConfig>): void

Update calendar configuration with partial updates.

getConfig(): CalendarConfig

Get the current calendar configuration.

generateHTML(): string

Generate calendar HTML with current configuration and meetings.

React Example

import { useEffect, useState } from 'react';
import { MeetingCalendar } from 'meeting-calendar-pkg';
import 'meeting-calendar-pkg/dist/calendar.css';

function CalendarComponent() {
  const [html, setHtml] = useState('');

  useEffect(() => {
    const config = {
      consultant: {
        name: 'Freddie Pritchard-Smith',
        profileImage: 'images/profile.png',
        duration: 30
      },
      location: '123 High Street, AB1 2CD, London',
      timezone: 'UTC +01:00 Dublin, London, Lisbon',
      selectedDate: new Date(2025, 8, 18),
      availableTimes: ['11:00', '11:30', '12:00']
    };

    const calendar = new MeetingCalendar(config);
    setHtml(calendar.generateHTML());
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

export default CalendarComponent;

Vue Example

<template>
  <div v-html="calendarHtml"></div>
</template>

<script>
import { MeetingCalendar } from 'meeting-calendar-pkg';
import 'meeting-calendar-pkg/dist/calendar.css';

export default {
  data() {
    return {
      calendarHtml: ''
    };
  },
  mounted() {
    const config = {
      consultant: {
        name: 'Freddie Pritchard-Smith',
        profileImage: 'images/profile.png',
        duration: 30
      },
      location: '123 High Street, AB1 2CD, London',
      timezone: 'UTC +01:00 Dublin, London, Lisbon',
      selectedDate: new Date(2025, 8, 18),
      availableTimes: ['11:00', '11:30', '12:00']
    };

    const calendar = new MeetingCalendar(config);
    this.calendarHtml = calendar.generateHTML();
  }
};
</script>

License

ISC