How to embed appointment booking calendar on Angular?

Angular appointment booking widget to embed on your website from GitHub or install from NPM. The dayschedule appointment picker is designed to display available time-slots on your Angular website.

Angular is an open-source web framework, which means anyone can use, share, or contribute to its code for free. It helps developers build fast and reliable apps. Maintained by Google, Angular provides tools and libraries to make app development easier, especially for large and scalable projects such as Gmail, Forbes, Google Ads and more.

Now that your Angular website is up and running, it’s time to enhance it by integrating an appointment scheduling widget to accept online appointments.

Appointment picker in Angular1407×762 96.8 KB

In this article, I will show you how to use our JavaScript widget to embed the, and bonus point - I will be using Bootstrap for template styling for a better and responsive booking button.

Setup

Step 1 :Install Angular

npm install -g @angular/cli

Step 2: import bootstrap

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Step 3: dayschedule-widget dependency to setup your project.

npm i dayschedule-widget

Angular Component

This is the Angular component that will render the booking button and open the DaySchedule popup when clicked.

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'dayschedule-widget/dist/dayschedule-widget.js';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
  <div class="m-3">
    <h1>Hello, welcome {{ name }}!</h1>
    <p class="lead">Click on the buttoon below to book an appointment</p>
    <button class="btn btn-primary" (click)="openDaySchedule()">
  Book an Appointment 
    </button>
  <div>
  `,
})
export class App {
  name = 'Angular';

  openDaySchedule() {
    const ds = (window as any)['daySchedule'];
    ds.initPopupWidget({ url: 'https://meet.dayschedule.com' });
  }
}

bootstrapApplication(App);

• Imports necessary libraries (zone.js, dayschedule-widget.js) and sets up the Angular component.

• Defines a method openDaySchedule() to initialize the dayschedule popup for appointment booking.

• Bootstraps the Angular application using bootstrapApplication(App).

• The component uses a template that displays a welcome message and a “Book an Appointment” button.

• The button triggers the openDaySchedule() method when clicked, which loads the appointment scheduling widget.

• The widget is initialized with a URL (https://meet.dayschedule.com) to open the booking interface in a popup.

• Bootstrap classes (btn btn-primary) are used to style the button in the template.

Usage

Here’s how you can create and use the openDaySchedule() method in Angular.
Follow these steps to use it in your app:

import { Component } from '@angular/core';
import 'dayschedule-widget/dist/dayschedule-widget.js';

• The openDaySchedule() method is a custom function that gets triggered (likely by a user action like a button click).

• const ds = (window as any)['daySchedule']; accesses the global daySchedule object on the window, bypassing TypeScript’s type checking with as any.

• ds.initPopupWidget({ url: 'https://meet.dayschedule.com' }); initializes and opens a popup for scheduling or starting a meeting at the given URL.

export class App {
  name = 'Angular';
  openDaySchedule() {
    const ds = (window as any)['daySchedule'];
    ds.initPopupWidget({ url: 'https://meet.dayschedule.com' });

  }

}

Appointment booking widget in Angular1435×763 92.1 KB

Full code

Check out the complete example code for easy implementation and testing.

• Stackblitz