Appointment Schedule Calendar

This library was generated with Angular CLI version 12.2.0.

Table of Contents

• Introduction
• Installation
• Usage
• Configuration
• API
• Author

Introduction

Appointment Schedule Calendar is an Angular library that provides a highly customizable component for appointment scheduling. This library enables users to select dates, configure the calendar's appearance, and manage events with ease.

Installation

Install the library using npm:

npm install appointment-schedule-calendar --save

Usage

Import the library module into your Angular application's module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppointmentScheduleCalendarModule } from 'appointment-schedule-calendar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppointmentScheduleCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use the component in your template:

<appointment-schedule-calendar [calendarConfig]="calendarConfig" (onCalendarChange)="onCalendarChange($event)"></appointment-schedule-calendar>

Configure your calendar in the component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<appointment-schedule-calendar [calendarConfig]="calendarConfig" (onCalendarChange)="onCalendarChange($event)"></appointment-schedule-calendar>`
})
export class AppComponent {
  calendarConfig = {
    selectedDates: ['2023-05-17'],
    formField: {
      fieldType: 'Outline',
      placeholder: 'Select a date'
    },
    date: {
      multipleSelect: true,
      minDate: '2023-01-01',
      maxDate: '2023-12-31',
      dateFormat: 'yyyy-MM-dd'
    },
    editCalendar: true,
    displaySelectedDate: true,
    displayEditButton: true,
    disableIfDateNotPresent: true,
    event: [
      {
        placeholder: 'Meeting',
        preFilledDate: ['2023-05-17'],
        color: 'green',
        key: 'event1',
        isSelected: true
      }
    ],
    selectedDateColor: 'blue',
    buttonConfig: {
      label: 'Submit'
    },
    autoCloseCalendar: true
  };

  onCalendarChange(event: any) {
    console.log('Calendar changed:', event);
  }
}

Configuration

The calendarConfig object allows you to customize the calendar. Here are the options available:

• selectedDates: string[]: Array of selected dates.
• formField?: { fieldType: 'Outline' | 'Material'; placeholder: string; }: Configuration for the form field.
• date: { multipleSelect?: boolean; minDate?: string; maxDate?: string; dateFormat: string; }: Date-related settings.
• editCalendar: boolean: Enable or disable calendar editing.
• displaySelectedDate: boolean: Display the selected date.
• displayEditButton?: boolean: Show or hide the edit button.
• event: CanCalendarEvent[]: Array of events.
• selectedDateColor: 'green' | 'red' | 'blue' | 'grey': Color for the selected date.
• buttonConfig?: { label: string; }: Configuration for the button.
• autoCloseCalendar: boolean: Automatically close the calendar after selection.
• disableIfDateNotPresent: boolean : disable date if date not present in dates provided

API

Components

AppointmentScheduleCalendarComponent The main calendar component.

<appointment-schedule-calendar [calendarConfig]="calendarConfig" (onCalendarChange)="onCalendarChange($event)"></appointment-schedule-calendar>

Input

• calendarConfig: CalendarConfig - Configuration object for the calendar.

Output

• onCalendarChange: EventEmitter<any> - Event emitted when the calendar changes.

Types

CalendarConfig Configuration object for the calendar.

interface CalendarConfig {
  selectedDates: string[];
  formField?: {
    fieldType: 'Outline' | 'Material';
    placeholder: string;
  };
  date: {
    multipleSelect?: boolean;
    minDate?: string;
    maxDate?: string;
    dateFormat: string;
  };
  editCalendar: boolean;
  displaySelectedDate: boolean;
  disableIfDateNotPresent?: boolean;
  displayEditButton?: boolean;
  event: CanCalendarEvent[];
  selectedDateColor: 'green' | 'red' | 'blue' | 'grey';
  buttonConfig?: {
    label: string;
  };
  autoCloseCalendar: boolean;
}

CanCalendarEvent

Event object for the calendar.

interface CanCalendarEvent {
  placeholder: string;
  preFilledDate: string[];
  color: 'green' | 'red' | 'blue' | 'grey';
  key: string;
  isDisabled?: boolean;
  isSelected: boolean;
}

Author

Globalbees Brands