DayPilotDayPilot
Products
Support
DayPilot Code
JavaScript
Angular
React
Vue
ASP.NET
ASP.NET Core
PHP
Spring Boot
Open-Source

Composition API - Vue Calendar/Scheduling Tutorials

Welcome to our compilation of tutorials focused on the application of Vue.js Composition API in building calendar and scheduling applications. This cutting-edge Vue API offers a more flexible and logical way to organize code, particularly for complex applications, which makes it an ideal choice for such projects.

Our tutorials provide step-by-step guides on how to leverage the Composition API to create intuitive, efficient, and responsive calendars or scheduling systems. Whether you're a beginner just getting your feet wet in Vue.js, or a seasoned developer looking to dive deeper into the Composition API, you'll find valuable resources here.

Learn how to effectively encapsulate logic, improve code reuse and testing, and manage state in a more predictable way. Also, get insights on best practices for improving the performance and user experience of your application. Enjoy exploring, learning, and creating!

Vue Scheduler: Availability/Utilization Histogram
Vue Scheduler: Availability/Utilization Histogram
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
vuejsschedulerutilizationavailabilityjavascriptcomposition-apivue3
Jun 22, 2026
Vue Timesheet
Vue Timesheet
Learn how to use the Vue Scheduler component to add a drag-and-drop timesheet UI to your Vue application, calculate daily totals and style the timesheet using CSS.
vuejstimesheetrow-header-columnsschedulerjavascriptvue3composition-api
May 14, 2026
Vue.js Scheduler: Changing Visible Date
Vue.js Scheduler: Changing Visible Date
How to switch the visible date range displayed by the Vue.js Scheduler using Previous and Next buttons.
vuejsschedulerjavascriptnavigationcomposition-apivue3open-source
Apr 17, 2026
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.
vuejsnavigatordate-pickeropen-sourcejavascriptfree-busycomposition-apivue3
Jan 25, 2026
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.
vuejscalendarjavascriptopen-sourcecontext-menumonthcomposition-apivue3
Jan 19, 2026
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.
vuejsjavascriptevent-calendarappointmentopen-sourcecomposition-apivue3week
Jan 9, 2026
Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
vuejsresource-calendaropen-sourcejavascriptcomposition-apivue3free-busy
Jan 6, 2026
Vue Calendar: Day/Week/Month Views (Open-Source)
Vue Calendar: Day/Week/Month Views (Open-Source)
Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
vuejsvue3javascriptdayweekmonthopen-sourceevent-calendarcomposition-api
Sep 11, 2025
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
vuejsschedulerjavascriptreservationvue3composition-api
Oct 1, 2024
Vue Scheduler: How to Display Holidays
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
vuejsschedulerholidaysjavascriptvue3composition-api
Jul 12, 2024
Vue Scheduler: Components in Events
Vue Scheduler: Components in Events
Learn how to enhance Vue Scheduler events with custom Vue components. Add dynamic content, interactive elements and apply custom styling.
vuejsschedulerjavascriptvue3composition-api
Jan 2, 2024
Articles 1-11 of 11

Products

Resources

Tools

About Us

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.