Scheduling Widget

DaySchedule's appointment scheduling widget to take online bookings for your services directly through your website. Just add a few lines of code to integrate the booking calendar on your website.

Step 1: Install the Prerequisites

Install the widget package from NPM or use the CDN version

Install dayschedule-widget package from NPM

npm i dayschedule-widget

Or, add the JavaScript into your website header from jsdelivr CDN

<script src="https://cdn.jsdelivr.net/npm/dayschedule-widget@latest/dist/dayschedule-widget.min.js" defer></script>

Step 2: Generate the initialize code

Customize the widget appearance and behavior

Integration Examples

Find fully functional, open-source examples of how to embed the scheduling widget across platforms and front-end frameworks. Whether you're using React, Angular, Vue, or plain HTML/JavaScript, these examples help you quickly integrate appointment scheduling into your website to go live in few minutes.

React

React example to embed DaySchedule

View Example

Angular

Angular 16 example to embed DaySchedule

View Example

Vue.js

Vue.js example to embed DaySchedule

View Example

Nuxt.js

Nuxt.js framework example to embed DaySchedule

View Example

Next.js

Next.js React framework for building static website with dayschedule appointments

View Example

Node.js

Node.js example to open appointment popup on button click

View Example

HTML

Simple HTML 5 example to add appointment booking popup on static HTML

View Example

WordPress

WordPress plugin to add dayschedule appointment widget with shortcode

View Example

Popup widget

Open your main appointment scheduling page in a popup

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com'
});

Inline widget

Embed the calendar scheduling page on your website

<dayschedule-widget url='https://meet.dayschedule.com' options='{ "color": {
    "primary": "#0f0980",
    "secondary": "#afeefe"
}}'> 
</dayschedule-widget>

See demo

Customize color

Match the calendar scheduling popup widget with your website or brand

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com',
    color: {
        primary: '#f44336',
        secondary: '#fbbdb8'
    }
});

Pre-fill questions

Pre-fill customer details for better appointment scheduling experience

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com/product-demo',
    questions: {
        name: 'Vikash Rathee',
        email: 'vikash.rathee@dayschedule.com'
    }
});

Booking calendar

Open the single event calendar view directly, instead the main events list page to view available slots.

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com/product-demo'
});

Custom date selection

Specify date parameter to pass selected date for calendar to show the available spots for an event directly when popup opened.

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com/product-demo?date=2025-05-18'
});

Hide headers

To hide the scheduling popup header from main appointment page. It will hide the DaySchedule logo as well to white-label on your website.

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com/product-demo',
    hideHeader: true
});

Hide event details

To hide the event name, description and logo from appointment scheduling page to display the calendar only.

daySchedule.initPopupWidget({
    url: 'https://meet.dayschedule.com/product-demo',
    hideEvent: true
});

Frequently Asked Questions

What is the calendar scheduling widget?

The DaySchedule Calendar scheduling widget is a small JavaScript code to add on any website. The main purpose of this widget is to allow visitors to book an appointment with you directly from your website.

How do I make a booking calendar for my website?

Follow these steps to make a booking calendar

Create your scheduling page
Create your booking calendar using event or services
Connect with your Google calendar
Use the form above to generate code
Embed the code on your website

Can I add the appointment booking widget on my Wordpress website?

Yes, you can add the appointment booking widget on Wordpress, Joomla, Wix, Shopify or any other CMS. For Wordpress, just install our free plugin and add the shortcode on any post or page.

[dayschedule url="https://meet.dayschedule.com" type="popup"]

Can I white-label the appointment booking software on my website?

Yes, you can remove the DaySchedule logo, set your own brand color to white-label the complete appointment booking system.

How to use advanced options in inline scheduling widget?

You can set the options attribute with values as JSON string to set custom options. For example, to hide the calendar header -

<dayschedule-widget options='{"hideHeader": true}' url='https://meet.dayschedule.com'>
</dayschedule-widget>

Can I use the widget in Free/Basic plan?

Yes, the widget is inclusive in the Free plan. You may use our free appointment scheduler to add booking calendar widget on your website