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.