Open-Source Calendar and Scheduler Tutorials

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.

How to select and highlight calendar columns on header click.

Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.

How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

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.

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.

How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.

How to render custom JSX in events displayed by the React Scheduler component.

How to use diagonal cell overlays in a JavaScript date picker to highlight full and partial day occupancy, common in hospitality reservation and availability views.

How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).

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.

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.

Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.

Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.

How to use a popup date picker to select a date displayed by the React Calendar component.

Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.