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

bernspe priority asked 8 months 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 8 months 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

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

<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" && === 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(() => {

Please insert min. 20 characters.


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



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