JavaScript Calendar and Scheduler Tutorials

This page lists tutorials that show how to create a scheduling web application for various fields, such as internal company use (timesheetproductionshift planning, shared resource reservation), services (doctor appointment schedulinghotel room reservation), and project management.

Beginners can start with basic tutorials that explain the basic concepts like installation and initial configuration of the the components (e.g. HTML5 Scheduler). Experienced users can continue with more advanced projects that show how to use the Scheduler in a real-world scenario. There are also tutorials that demonstrate specific features of the scheduler and calendar components (dynamic loadingPDF exportinfinite scrolling). If you are looking for a specific use case which is missing, you can drop us a note in the forum.

All calendar and scheduler tutorials include a downloadable project with source code. You can use the project source code to start your own implementation and save some time with the initial setup and configuration. The tutorial text explains the key areas of the code and shows different views and options using screenshots.

The projects use HTML5 and plain JavaScript interface for the frontend (UI). Most of the tutorial use PHP as the server-side technology for the backend (REST API), but there are also tutorials for other server-side technologies (ASP.NET CoreSpring Boot).

There is also an online configurator tool available that lets you customize selected properties of the components. It shows the changes immediately using a live preview. You can use it to create a quick proof-of-concept project - the configurator will generate a downloadable project that includes the dependencies and the selected component configuration.

In addition to vanilla JavaScript and TypeScript, DayPilot also supports popular JavaScript client-side frameworks, including AngularReact, and Vue.js.

ASP.NET Core Restaurant Table Reservation (Tutorial)
ASP.NET Core Restaurant Table Reservation (Tutorial)
Learn how to use the visual Scheduler component to build a restaurant table reservation application in ASP.NET Core. Create an intuitive UI that makes it easy to assign reservation requests to available tables.
Vue Scheduler: Using Cell Templates to Show Slot Prices
Vue Scheduler: Using Cell Templates to Show Slot Prices
How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.
Cell Templates in Vue Calendar: Display Slot Start Times, Sunrise & Sunset (Open-Source)
Cell Templates in Vue Calendar: Display Slot Start Times, Sunrise & Sunset (Open-Source)
Use Vue templates to add custom content to calendar cells: text, icons, or even Vue components. Use v-if to display content only in the cells you choose.
Workforce Scheduling in ASP.NET Core: Queue, Drag-and-Drop Resource Allocation, and Task Checklists
Workforce Scheduling in ASP.NET Core: Queue, Drag-and-Drop Resource Allocation, and Task Checklists
How to build an ASP.NET Core application for visual workforce scheduling. Integrate a queue of unscheduled orders and a scheduling calendar that displays staff as columns.
JavaScript Scheduler: Using Split Resources to Manage Task Priorities
JavaScript Scheduler: Using Split Resources to Manage Task Priorities
How to configure the JavaScript Scheduler component to display a dedicated sub-row for each priority level. This allows you to group tasks with the same priority and display them at the same position within a row.
React Scheduler: Visually Connect Tasks using Links
React Scheduler: Visually Connect Tasks using Links
Links can be used to display relationships between tasks in the React Scheduler UI component. Learn about the most common use cases and configuration options.
ASP.NET Core Scheduler (.NET 9)
ASP.NET Core Scheduler (.NET 9)
How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in an ASP.NET Core web application.
Vue Scheduler with Vertical Timeline
Vue Scheduler with Vertical Timeline
How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.
HTML5 Scheduler
HTML5 Scheduler
HTML5 scheduler with drag and drop support. It displays a timeline for multiple resources grouped by category. PHP project with REST API backend and MySQL/SQLite storage is available for download.
React Yearly Scheduling Calendar
React Yearly Scheduling Calendar
Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.
Vue Scheduler: Row Header Templates
Vue Scheduler: Row Header Templates
How to customize row headers of the Vue Scheduler component using Vue templates - add icons, buttons, or Vue components.
Vue Calendar: Day/Week/Month Views (Open-Source)
Vue Calendar: Day/Week/Month Views (Open-Source)
Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)
Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)
Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
How to Add Interactive Elements to Vue Scheduler Events Using Templates
How to Add Interactive Elements to Vue Scheduler Events Using Templates
Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.
JavaScript Calendar in Read-Only Mode (Open-Source)
JavaScript Calendar in Read-Only Mode (Open-Source)
How to implement a toggle that switches between the read-only and edit modes of the JavaScript Calendar. Read-only events are marked with a padlock icon in the upper-right corner.
Using JavaScript Scheduler in Salesforce (LWC)
Using JavaScript Scheduler in Salesforce (LWC)
How to create a new LWC component with DayPilot Scheduler and deploy it to your Salesforce org.
ASP.NET Core Field Service Scheduling: Tasks, Routes, and Travel Time
ASP.NET Core Field Service Scheduling: Tasks, Routes, and Travel Time
How to implement a field service scheduling application in ASP.NET Core, with visual representation of travel time, route planning, and real-time constraint enforcement.
React Shift Scheduling Application (PHP/MySQL Backend)
React Shift Scheduling Application (PHP/MySQL Backend)
React application that lets you visually schedule shifts at multiple locations. The backend REST API is implemented using PHP and MySQL.
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
Articles 1-20 of 181 Next