Getting undefined timestamp and index in column-header-after slot.

[mszeftel]

Hi, I'm trying to reproduce the example in Column header count but the slot shows empty. And I think it's because the timestamp and index in the slot are coming as undefined.

This is my basic code to reproduce this.

<template>
  <div style="max-width: 800px; width: 100%;">
    <q-calendar v-model="selectedDate" :column-header-after="true" :column-count="3"
      view="day" locale="en-us" style="height: 400px;">
      <template #column-header-after="{ timestamp, index }">
        <div>
          This is the timestamp:
          {{ timestamp }}
          for index
          {{ index }}
        </div>
      </template>
    </q-calendar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const selectedDate = ref('');
</script>

Any idea what I'm doing wrong?

These are the dependencies I'm using.

"dependencies": { "@quasar/extras": "^1.0.0", "axios": "^1.2.1", "pinia": "^2.0.11", "quasar": "^2.6.0", "vue": "^3.0.0", "vue-router": "^4.0.0" }, "devDependencies": { "@quasar/app-vite": "^1.0.0", "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.16", "@types/node": "^12.20.21", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", "autoprefixer": "^10.4.2", "eslint": "^8.10.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-vue": "^9.0.0", "prettier": "^2.5.1", "typescript": "^4.5.4" },

Thank you!
Mat

[mszeftel]

Ok, I think I figure it out.
In version 4 of QCalendar the context for the slot should be {scope} and there you have scope.timestamp and scope.columnIndex.

     <template #column-header-after="{ scope }">
        <div>
          This is the timestamp:
          {{ scope.timestamp }}
          for index
          {{ scope.columnIndex }}
        </div>
      </template>