Open-Source Calendar and Scheduler Tutorials

The free and open-source DayPilot Lite library provides calendar/scheduling components that you can use to build time management, event planning, resource scheduling, project management applications or booking systems. The library is hosted at NPM and it is available for vanilla JavaScript, Angular, React, and Vue.

It is available under a business-friendly Apache License that lets you use the library in open-source and commercial projects. 

You can use the event calendar component to create a traditional day/week/month calendar view that you know from Microsoft Outlook, Google Calendar or Apple Calendar. See the tutorials to learn how to define and integrate different calendar views, share the data and highlight the free/busy days.

You can use the resource calendar view to to display multiple resources as columns side-by-side. You can use it to schedule events, tasks and reservations for multiple resources (locations, rooms, cars, tools, production lines, employees, shift workers, etc.). If you need to scheduler tasks or appointments for multiple workers (such as car mechanics, doctors, hairdressers), you can use the resource calendar to manage shifts and location assignments of your employees.

The library includes a smart date picker component that lets you change a date of the current view and also provides a quick availability preview using the free/busy highlighting feature.

You can use the calendar/scheduler components with any kind of backend (such as PHP, ASP.NET Core, Java/Spring, Node.js, etc.). The components communicate with the backend using a REST API which returns data in JSON format. The server-side part of your application lets you store the data in a database (such as MySQL, PostgreSQL or SQL Server) and perform additional calculations and apply business rules.

To see how to use the Scheduler component in React, you can check the React Scheduler with Horizontal Timeline (Open-Source) tutorial which describes the steps needed for integration in your React application. To learn how to integrate multiple calendar components into a more complex view, see the React Calendar with Day/Week/Month Views (Open-Source) tutorial.

The Angular calendar component integrates well with Angular 12+ applications (it uses the Ivy engine). In Angular, add the <DayPilotCalendar> component to the template. Use the [config] attribute to load the configuration data and the [events] attribute to load calendar event data. Angular detects changes automatically and updates the component if needed. For a more detailed guide, please see the Angular Calendar: Day/Week/Month Views (Open-Source) tutorial.

In Vue, there is also a special component available that lets you add a calendar to your application. See the Vue.js Weekly Calendar Tutorial (Open-Source) tutorial to learn more.

If you prefer vanilla JavaScript, you can start using the components by simply importing the daypilot-all.min.js file. Add a <div> placeholder and a short initialization script and your JavaScript calendar is ready for display. To learn how to integrate the JavaScript calendar with an ASP.NET Core or PHP backend (REST API), please see the HTML5/JavaScript Event Calendar (Open-Source) tutorial.

Vue Scheduler: Undo/Redo for Drag and Drop Actions
Vue Scheduler: Undo/Redo for Drag and Drop Actions
How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.
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.
JavaScript Scheduler: Read-Only Mode
JavaScript Scheduler: Read-Only Mode
How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.
JavaScript Scheduler: Event Types
JavaScript Scheduler: Event Types
How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.
JavaScript Scheduler: Alternating Column Colors
JavaScript Scheduler: Alternating Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
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.
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.
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
React Scheduler: Rendering JSX in Events
React Scheduler: Rendering JSX in Events
How to render custom JSX in events displayed by the React Scheduler component.
JavaScript Scheduler: Splitting an Event
JavaScript Scheduler: Splitting an Event
How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
JavaScript Scheduler: Lock Events using Context Menu
JavaScript Scheduler: Lock Events using Context Menu
How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.
Using JavaScript/HTML5 Scheduler in Spring Boot (Open-Source)
Using JavaScript/HTML5 Scheduler in Spring Boot (Open-Source)
Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.
React Scheduler: Next/Previous Buttons
React Scheduler: Next/Previous Buttons
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.
JavaScript Scheduler: Find Next Free Slot
JavaScript Scheduler: Find Next Free Slot
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
Angular Calendar with Undo/Redo (Open-Source)
Angular Calendar with Undo/Redo (Open-Source)
This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.
JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.
Vue Monthly Calendar/Scheduler (Open-Source)
Vue Monthly Calendar/Scheduler (Open-Source)
How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.
Articles 1-20 of 67 Next