Why MutationObserver does not work for title change in FullCalendar?

Question

I need to know the current title of a FullCalendar. The title could be changed after clicking the navigation buttons.

I did not find any FullCalendar native way how to get the title so I was looking for other ways to find out. I thought that MutationObserver would work.. But it does not work when changing the text through the buttons. If the change is done via JavaScript

 var Calendar = FullCalendar.Calendar;
 var calendarEl = document.getElementById('calendar');
 
 calendar = new Calendar(calendarEl, {
         
 })
   
 calendar.render()
   
 //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
//var target = document.getElementsByClassName('ffc-toolbar-title')[0]
var target = document.getElementsByClassName('fc-toolbar-title')[0]
//var target = document.getElementById('1')
  console.log(target.innerText);  


// create an observer instance
//var observer = new WebKitMutationObserver(function(mutations) {
var observer = new MutationObserver(function(mutations) {
  console.log(target.innerText);   
  console.log("comming from obeserver")
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);

setInterval(function(){
  //  target.innerText = ('hello world ' + Math.random() + '!!!');
},1000); 

then the MutationObserver works.

Any idea how to fix that? Working jsFiddle

Answer 1

I was able to observe the changes resulting from clicks on the month increment/decrement buttons by adding subtree: true to the config.

From MDN's page on "MutationObserver.characterData":

Note that this doesn't monitor content of an HTMLElement, even if it only contains text inside, as it only monitors text nodes themselves. So either pass directly a text node to the observe() method or you need to also set subtree: true.