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 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.
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.
Vue.js Scheduler: Changing Visible Date
Vue.js Scheduler: Changing Visible Date
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
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.
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.
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.
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.
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.
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.
Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Articles 1-10 of 10