DayPilotHow to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.
Jan 21, 2025
The following Vue tutorials show how to use Vue calendar and scheduler components from DayPilot Pro to create a single-page scheduling application.
Vue.js is a popular JavaScript framework that offers a middle ground between Angular and React, combining the simplicity and flexibility of both. Unlike Angular, which is a full-featured framework with a steeper learning curve, Vue is lightweight and easier to learn while still supporting complex applications. Compared to React, which primarily uses JSX and external state management libraries, Vue provides a more intuitive template syntax and has built-in solutions like Vuex for state management.
All JavaScript UI components that are available in DayPilot Pro for JavaScript are available for Vue.js (Daily Calendar, Weekly Calendar, Monthly Calendar, Scheduler, Gantt Chart, Kanban).
If you are looking for an open-source Vue calendar component, you may want to check the Vue.js Weekly Calendar Tutorial (Open-Source) tutorial.
To see how to use Vue templates to define the content of UI elements, you can check the Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source) tutorial.
For a quick introduction to using the Vue Scheduler component (which displays a timeline for multiple resources), please see the Vue Scheduler: Build a Reservation Application in 5 Minutes tutorial.
If you want to start with a quick testing project, you can use UI Builder online application to configure the Vue.js components and generate a new project including all dependencies.
Also, you can explore our Composition API calendar/scheduling tutorials.
