Calendar Tutorials and Examples

You can use the zoom feature in the Calendar to define custom magnification levels. Users can zoom using a slider or the [-] and [+] buttons.

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

How to configure DayPilot JavaScript Calendar to create a custom view that displays a yearly calendar where each column represents one month, and each cell represents one day.

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

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.

HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.

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.

Adding touch-friendly controls to the JavaScript event calendar using active areas - move handle, resize handle, delete button, and context menu with SVG icons.

How to select and highlight calendar columns on header click.

Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.

ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).

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

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 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.

This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.

How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.

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.

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.

Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.