How to Build Medical Scheduling Software with DHTMLX Scheduler

In this article, we review the core features of healthcare scheduling software and show how to implement them with the help of DHTMLX JavaScript Scheduler. Keep reading and get a 30-day trial for free.

Appointment Scheduling

JavaScript / HTML5 doctor appointment scheduling app allows booking tasks based on the calendar cells available. They may include exams, treatments, procedures or seasonal programs such as vaccinations.

Appointment booking page built with dhtmlxScheduler

The following is an example of how to add an appointment to the scheduler:

var eventId = scheduler.addEvent({
    start_date: "16-06-2019 09:00",
    end_date:   "16-06-2019 12:00",
    text:   "Meeting",
    holder: "John",  // user data
    room:   "5"      // user data
});

…and how to delete an existing event:

scheduler.parse([
   {id:1, start_date:"06/30/2009 09:00", end_date:"06/30/2009 12:00", text:"Task1"},
   {id:2, start_date:"06/30/2009 12:00", end_date:"06/30/2009 20:00", text:"Task2"}
],"json");
...
scheduler.deleteEvent(2);

dhtmlxScheduler allows developers to control the number of events per time slot. By activating the “collision” extension, you prohibit end-users from booking the appointment if some other event has already been created at that time.

Check the sample >

Several practices provide patients with the ability to self-schedule their appointments online. Thus, they can pick the best time-slot for their personal schedule. This reduces the chance they will cancel the appointment because of a time conflict.

Others operate in a read-only mode. Therefore, you can make the entire scheduler non-editable for third-parties:

scheduler.config.readonly = true;
...
scheduler.init('scheduler_here',new Date(2019, 5,11),"month");

Besides, the lightbox and event’s box can be tailored according to the requirements of the medical practice scheduling software you build. You can change buttons, add extra sections, e.g. to mention doctor or patient names, their phones, emails, and location. dhtmlxScheduler includes 29 locales and supports RTL mode.

Recurring Appointments

Standing events allow users to schedule appointments days, weeks, or months in advance if they know they will be coming to receive the same service done frequently.

Recurring appointment for the Client-side. Check the sample >

DHTMLX Scheduler supports recurring events. This feature can be enabled by including a special extension file on the page:

<script src="ext/ext/dhtmlxscheduler_recurring.js" type="text/javascript"></script>

Plus, it’s possible to change the form markup, delete unnecessary elements (e.g., the yearly repeat), and set some default values for inputs.

Multiple Views

DHTMLX Scheduler library supplies 10 customizable views, allowing developers to build medical office scheduling software of various kinds, intuitively present data and work with it.

Week view; it’s added to the scheduler by default

For example, the Scheduler PRO version provides the Units view, where the x-axis is based on some property of appointments. Having selected the scheduler view by persons, medical staff won’t have to worry about whether they have the time or resources to see any given patient. All past, present, and future appointments are right before their eyes.

Scheduler view by persons

This view type also allows displaying units for multiple days, assigning appointments to several persons (e.g., create an appointment for a surgical team consisting of 4 medical officers), and activating horizontal units scrolling.

Moreover, you can set a filtering function that will define, which appointments should be displayed in the scheduler and which shouldn’t.

scheduler.filter_week = function(id, event){
    if(event.name == 'New event')
        return false; // event will be filtered (not rendered)
        //or
        return true; // event will be rendered
}

Multiple User Access

Medical practice scheduling software provides multiple interfaces. Direct access should be allowed to patients who can book their own appointments and request medication; to doctors who may wish to modify or cancel tasks, and to management staff who assign resources and control overall performance.

Use case diagram for standard medical appointment scheduling software

DHTMLX Scheduler enables loading and showing data from different sources. You can use multiple data feeds in the same scheduler to imitate a multi-level behavior. Moreover, the same code enables users to see all the events while editing only their own ones:

//enable saving for the first data feed
var dp =  new dataProcessor("events.php?user");
dp.init(scheduler);
 
//allow edit operations only for own events
function allow_own(id){
    var ev = this.getEvent(id);
    return ev.userId == 1;
}
scheduler.attachEvent("onClick",allow_own);
scheduler.attachEvent("onDblClick",allow_own);
 
//default properties of a new event
scheduler.attachEvent("onEventCreated",function(id){
    var ev = this.getEvent(id);
    ev.userId = 1; //just for rendering on client, will not affect server data
});

Accessibility

Web accessibility is an important and necessary standard for modern applications, especially for healthcare IT. To provide easier access and interaction for users with disabilities, dhtmlxScheduler allows applying ARIA attributes and keyboard navigation.

Besides, our JavaScript Scheduler library offers two variants of high-contrast themes. They make the app’s interface more distinct and easier to see. Themes with contrasting colors are helpful for people with special or particular visual needs.

Here is how you can set a contrast black skin:

<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_contrast_black.css">

Check the sample >

… and a contrast white skin:

<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_contrast_white.css">

Check the sample >

Final thoughts

Medical scheduling software is an effective solution for daily office management, from large hospitals and clinics to family and private practices. With the help of scheduling tech, medical office staff can improve capacity planning and workforce scheduling, manage patient records and medical supply logistics. You can improve user experience and enrich your online scheduling software with multiple additional features: automatic reminders, billing & payment support, etc.

It’s also crucial to know that healthcare IT is subjected to numerous regulations. For example, U.S.-related software and data storage systems must comply with the HIPAA privacy rule. It regulates how to handle personal health information to make sure it’s accessed, stored, and transmitted securely.

As for EU-based projects, the system has to be GDPR-compliant. Thereby, you have to always make sure you have the users’ permission to do something with their personal data.

DHTMLX Scheduler fulfills all necessary GDPR and HIPAA requirements since we take care of your privacy and information security. You can trust us with building your medical scheduling software and order custom development services.