search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

DayPilot 4.3.0 with VueJS 3

Asked by NVA
1 day ago.

Hello DayPilot Team

I strictly followed your tutorial in order to display a simple calendar but it doesn’t work.

I use the latest version available on npm 4.3.0

<!-- src/components/CalendarCreche.vue -->
<script setup>
import { ref, onMounted } from "vue";
import { DayPilot, DayPilotCalendar } from "@daypilot/daypilot-lite-vue";

// Configuration du calendrier
const calendarConfig = ref({
  viewType: "Week",
  startDate: DayPilot.Date.today(),
  headerDateFormat: "dddd d MMMM",
});

// Liste des événements
const events = ref([]);

onMounted(() => {
  // Exemple d’événement
  events.value = [
    {
      id: "1",
      text: "Réunion équipe",
      start: DayPilot.Date.today().addHours(10),
      end: DayPilot.Date.today().addHours(12),
    },
  ];
});
</script>

<template>
  <div class="calendar-wrapper">
    <DayPilotCalendar
      :config="calendarConfig"
      :events="events"
      style="height: 500px; width: 100%"
    />
  </div>
</template>

<style scoped>
.calendar-wrapper {
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
}
</style>

.
vue-router.mjs:2600 ReferenceError: require is not defined at daypilot-vue.min.js:20:12551 at daypilot-vue.min.js:20:12936

triggerError@vue-router.mjs:2600(anonyme)@vue-router.mjs:2381Promise.catchpushWithRedirect@vue-router.mjs:2372push@vue-router.mjs:2308navigate@vue-router.mjs:1536(anonyme)@runtime-dom.esm-bundler.js:750callWithErrorHandling@runtime-core.esm-bundler.js:197callWithAsyncErrorHandling@runtime-core.esm-bundler.js:204callWithAsyncErrorHandling@runtime-core.esm-bundler.js:215invoker@runtime-dom.esm-bundler.js:721

Answer posted by Dan Letecky [DayPilot]
1 day ago.

Unfortunately, I’m not able to reproduce the issue.

However, I recommend using the UI Builder app to generate a Vue project with the required boilerplate. It lets you download a configured component in a Vue 3 project which is ready to run.

If it there is any problem, please let me know.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):