Topic: Is there a way to get current displayed month in Calendar plugin

bernspe priority asked 1 year ago


Expected behavior I would like to have access to the currently displayed month in MDBCalendar. How would one get this value? Actual behavior No property is known... Resources (screenshots, code snippets etc.)


Bartosz Cylwik staff answered 1 year ago


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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: MacOSX
  • Provided sample code: No
  • Provided link: No