Beginner Question: How to add events?!

[miatemma]

Hi all,
thanks a lot for providing this beautiful framework!
Unfortunately I'm struggling a bit with the docs. I guess I must be blind because I just couldn't figure out how to add events to the calendar. I tried to simplify the "day-header with day-body"- from the docs but somehow it didn't work out. I tried to figure it out from the Playground, but I couldn't find the source code for that one too...

So in simple words, for a simple "hello world" example, how can I display an event like this one in the calendar?

data() { return { /* .... */ events: [{ date: "2021-04-11", time: "10:00", duration: 60, title: "meeting" }], };

to the calendar?

<q-calendar v-model="selectedDate" ref="calendar" view="month" locale="de" animated transition-prev="slide-right" transition-next="slide-left" v-touch-swipe.mouse.left.right="handleSwipe" />

Sorry for this super basic question and thanks a lot in advance!
Mia

[hawkeye64]

@miatemma You have two choices: 1) use the "day" slot, or 2) use the "week" slot. The "week" slot is a bit more complicated, but once you get the hang of things, it should get easier. For now, we'll stick with the "day" slot.

As each calendar cell is drawn, it calls the "day" slot. The slotted data contains { timestamp }. timestamp.date has the date in the form YYYY-MM-DD. You use this information to get your data and return it so it can be drawn in-place in the day slot.

As a side note, if you were fetching data from a server, you would use the @change emit, which contains start and end (which is beginning and end of each calendar month). Then fetch the data from the server between and including these dates).

In the example, it uses this code:

<template #day="{ timestamp }">

That is how the timestamp is deconstructed out of the passed data.

The next phase is to get all the events for that date. Because there could be more than one, we loop through it with this code:

<template v-for="(event, index) in getEvents(timestamp.date)">

The getEvents method above just returns an array of events.

Then for each event returned, the following code is drawn into the calendar cell:

          <q-badge
            :key="index"
            style="width: 100%; cursor: pointer; height: 16px; max-height: 16px"
            :class="badgeClasses(event, 'day')"
            :style="badgeStyles(event, 'day')"
          >
            <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon><span class="ellipsis">{{ event.title }}</span>
          </q-badge>

Hope that helps...

[miatemma]

Hi Jeff,
yes it was helpful indeed, thanks a lot!!

[adgower]

This was very helpful in explaining the concept.

I had to make some modifications to get it working

<template #day="{scope:{timestamp}}">

then just simple getEvents function

const getEvents = (date) => {
  return events.filter((event) => event.timestamp === date)
}

Example array of events

const events = [
  {
    id: 1,
    title: 'Event 1',
    details: 'Details 1',
    timestamp: '2022-09-01',
    bgcolor: 'red',
  },
  {
    id: 2,
    title: 'Event 2',
    details: 'Details 2',
    timestamp: '2022-09-02',
    bgcolor: 'green',
  },
  {
    id: 3,
    title: 'Event 3',
    details: 'Details 3',
    timestamp: '2022-09-03',
    bgcolor: 'blue',
  },
  {
    id: 4,
    title: 'Event 4',
    details: 'Details 4',
    timestamp: '2022-09-04',
    bgcolor: 'yellow',
  },
  {
    id: 5,
    title: 'Event 5',
    details: 'Details 5',
    timestamp: '2022-09-05',
    bgcolor: 'orange',
  },
  {
    id: 6,
    title: 'Event 6',
    details: 'Details 6',
    timestamp: '2022-09-06',
    bgcolor: 'purple',
  },
  {
    id: 7,
    title: 'Event 7',
    details: 'Details 7',
    timestamp: '2022-09-07',
    bgcolor: 'pink',
  },
  {
    id: 8,
    title: 'Event 8',
    details: 'Details 8',
    timestamp: '2022-09-08',
    bgcolor: 'brown',
  },
  {
    id: 9,
    title: 'Event 9',
    details: 'Details 9',
    timestamp: '2022-09-09',
    bgcolor: 'grey',
  },
  {
    id: 10,
    title: 'Event 10',
    details: 'Details 10',
    timestamp: '2022-09-01',
    bgcolor: 'black',
  },
]

[adgower]

why is the "week" slot so complicated?

https://fullcalendar.io/docs/recurring-events