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
Advertisement
Answer
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.