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 calendar component in React, you can check the React Weekly Calendar Tutorial which describes the steps needed for integration in your React application.

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.

React Monthly Calendar Tutorial (Open-Source)
React Monthly Calendar Tutorial (Open-Source)
React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
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.
React Resource Calendar with Editable Columns (Open-Source)
React Resource Calendar with Editable Columns (Open-Source)
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.
React Weekly Calendar Tutorial (Open-Source)
React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
React Calendar with Date Picker (Open-Source)
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Angular Resource Calendar (Open-Source)
Angular Resource Calendar (Open-Source)
Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.
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 Date Picker with Free/Busy Highlighting (Open-Source)
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
HTML5/JavaScript Event Calendar (Open-Source)
HTML5/JavaScript Event Calendar (Open-Source)
Weekly HTML5/JavaScript event calendar with CSS themes, drag and drop support, date navigator. Sample PHP and ASP.NET Core projects with REST backend implementation.
Vue.js Weekly Calendar Tutorial (Open-Source)
Vue.js Weekly Calendar Tutorial (Open-Source)
How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
Angular Calendar: Date Switching
Angular Calendar: Date Switching
How to integrate Angular 13 event calendar component with a date picker and navigation buttons for changing the visible week.
Angular Calendar: Day/Week/Month Views (Open-Source)
Angular Calendar: Day/Week/Month Views (Open-Source)
Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.
JavaScript confirm() Replacement
JavaScript confirm() Replacement
Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).
JavaScript prompt() Replacement
JavaScript prompt() Replacement
Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.
JavaScript alert() Replacement
JavaScript alert() Replacement
Simple helper for replacing alert() with a more flexible HTML-based modal dialog with support for CSS styling.
DayPilot.Modal: Open-Source JavaScript Modal Dialog
DayPilot.Modal: Open-Source JavaScript Modal Dialog
Open-source JavaScript modal dialog with rich features. It can display custom HTML or a standalone page. Supports drag&drop moving and automatic height adjustment.
Articles 1-20 of 29 Next