Is there a way to get current displayed month in Calendar pl

Hi! We do not provide a method / event that would return the current month but we can get that value from the calendar-heading container.

To get the current value, everytime it changes, we can use a mutation observer that will update, for example, a ref value.

Checkout the code bellow

<template>
  <MDBCalendar ref="basicCalendar" :events="basicEvents" />
  <p>
    Current month is <strong>{{ currentMonth }}</strong>
  </p>
</template>

<script setup lang="ts">
import { MDBCalendar } from "mdb-vue-calendar";
import { onMounted, onUnmounted, ref } from "vue";

const basicCalendar = ref(null);

const basicEvents = ref([]);

const currentMonth = ref("");

const observer = new MutationObserver(function (mutations) {
  const target = getTarget();
  mutations.forEach(function (mutation) {
    if (
      mutation.type === "childList" &&
      mutation.target === target &&
      mutation.addedNodes.length > 0
    ) {
      currentMonth.value = mutation.addedNodes[0].textContent?.split(" ")[0];
    }
  });
});

const getTarget = () => document.querySelector(".calendar-heading");

onMounted(() => {
  const target = getTarget();
  currentMonth.value = target.textContent?.split(" ")[0];

  const config = { childList: true, subtree: true };

  observer.observe(target, config);
});

onUnmounted(() => {
  observer.disconnect();
});
</script>