Changes

resources/js/app.js

@@ -9,6 +9,8 @@ import VueApexCharts from 'vue3-apexcharts';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import VCalendar from 'v-calendar';
+import 'v-calendar/style.css';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -19,6 +21,8 @@ createInertiaApp({
         return createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)
+            // Register v-calendar with a 'V' prefix so we get <VDatePicker> and <VCalendar>
+            .use(VCalendar, { componentPrefix: 'V' })
             .use(VueApexCharts)
             .component('vue-date-picker', VueDatePicker)
             .component('FontAwesomeIcon', FontAwesomeIcon)