How to add a calendar appointment booking system to WordPress?

The DaySchedule calendar scheduling widget is a free WordPress plugin that allows you to add an appointment booking system to your website. This makes it easy for customers to schedule appointments with you or any other service that you offer with a payment option.

Using the scheduling widget embed on your WordPress website, you can manage your customers appointments using our responsive widget for desktop, tablet or mobiles.

Features:

  1. Free and Premium plans available
  2. Booking widget with multiple appointment slots
  3. Customizable color options
  4. Unlimited appointment booking pages and events
  5. Easy to install, setup and customize

In this article, I will show you how to add the DaySchedule plugin on your WordPress website -

Scheduling popup on WordPress

Follow these steps to add the calendar scheduling popup anywhere on your WordPress website.

Install plugin

Create appointment button

  • Click on the Add new tab to create a reusable button with shortcode, and name it something. e.g “DaySchedule popup”
  • Enter the HTML given below for the button, remember you can change the button text to anything relevant to your business.
    For example -
  1. A doctor may change the button text to: Schedule doctor appointment
  2. Or a consultant may change the button text to: Book your consulting session.
<button class="dayschedule">
	Schedule appointment
</button>

  • Go to the CSS tab to add your custom styles on .dayschedule class to match with your brand and button size.
.dayschedule {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  display: flex;
  justify-content: start;
}

  • Go to JS code tab to add the button click handler to open the popup widget
  • Do not forgot to change the url with your own scheduling page URL, if you are copying the code below
window.onload = (event) => {
     const btn = document.querySelector('.dayschedule')
     btn.addEventListener('click', function() {
	    daySchedule.initPopupWidget({
                url: 'https://meet.dayschedule.com',
	  });
    })
};

  • Go to the Include files tab and add the main dayschedule-popup.css and dayschedule-widget.js file.

JavaScript

https://cdn.dayschedule.com/widget/1.0/dayschedule-widget.js

CSS

https://cdn.dayschedule.com/widget/1.0/dayschedule-popup.css

  • Click on the update button and copy the shortcode [WP-Coder id="2"]

Book appointment button on pages

Now, the scheduling popup button is ready. We can add the book appointment button anywhere on our WordPress website pages or posts.

  • Find the Shortcode widget under the Widgets section.
  • Drag and drop on the page
  • Enter the button Shortcode from the previous step.

  • Save and open the page
  • Click on the schedule appointment button to see the preview

appointment-scheduling-wordpress-plugin

The calendar scheduling widget supports one-on-one, round-robin and group booking. It also comes with an easy-to-use payment integration that allows you to charge clients for appointments or services provided in selected currency and payment gateway.

The booking system is fully customizable with many options available to set color, logo, dynamic registration form etc.

Free for small teams

Get your personalized scheduling link to share with your customers to let them schedule meetings without back-and-forth emails.

Sign up for free →

14 days free trial