Calendar Component Tutorials

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.

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

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

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

How to create an integrated day, week, and month calendar view with a shared data source in Next.js.

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.

How to detect mobile device rotation and switch the Angular Calendar view accordingly.

Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.

Learn how to enable drag and drop column reordering and resizing for the JavaScript resource calendar component.

How to mark selected days as disabled and prevent adding, moving, and resizing events. You can use this technique to disable days in the past, weekends, holidays or other dates.

How to use the native HTML5 drag and drop API to extend the calendar functionality and allow dragging an all-day event to a selected calendar cell.