Custom language for calendar block

Custom Coding
,
1

If you need to show the calendar content block in your native language you can try this code;

  1. Add to your page custom code
  2. Change the ‘calendarBlockId’ with your own
  3. Target your desired browser language to run the translation script. In this sample target language is : “es-”
  4. Script is not yet perfect, but it can get you started.
  5. If you experience trouble with calendar misconfiguration, clear your site cache session and start over.
<script>
document.addEventListener("DOMContentLoaded", function () {

    const userLocale = navigator.languages && navigator.languages.length
    ? navigator.languages[0]
    : navigator.language;

    const dictionary = {
    "\\bJanuary\\b": "Enero",
    "\\bFebruary\\b": "Febrero",
    "\\bMarch\\b": "Marzo",
    "\\bApril\\b": "Abril",
    "\\bMay\\b": "Mayo",
    "\\bJune\\b": "Junio",
    "\\bJuly\\b": "Julio",
    "\\bAugust\\b": "Agosto",
    "\\bSeptember\\b": "Septiembre",
    "\\bOctober\\b": "Octubre",
    "\\bNovember\\b": "Noviembre",
    "\\bDecember\\b": "Diciembre",
    "Today": "Hoy",
    "Month":"Mensual",
    "Week": "Semanal",
    "Day": "Diario",
    "\\bMon\\b": "Lun",
    "\\bTue\\b": "Mar",
    "\\bWed\\b": "Mie",
    "\\bThu\\b": "Jue",
    "\\bFri\\b": "Vie",
    "\\bSat\\b": "Sab",
    "\\bSun\\b": "Dom"
    };

    const ids = ['calendarBlockId1', 'calendarBlockId12', 'calendarBlockId3'];

    const translateContent = function(element) {
        Array.from(element.childNodes).forEach(function(childElement) {
            if (childElement.nodeType === 3) {
               var newWords = childElement.nodeValue;

               for(const word in dictionary) {
                  const regex = new RegExp(word, "g")
                  newWords = newWords.replace(regex, dictionary[word]);
               }

               childElement.nodeValue = newWords;
           } else if (childElement.nodeType === 1) {
               translateContent(childElement);
           }
        });
    };

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                translateContent(mutation.target);
            }
        });
    });

    if(userLocale.toLocaleLowerCase().startsWith("es-")) {
        setTimeout(function() {
            ids.forEach(function(id) {
               
                const element = document.getElementById(id);
                if (element) {
                    translateContent(element);

                    // Begin observing the changes to the targeted element
                    observer.observe(element, {attributes: false, childList: true, subtree: true, characterData: true});
                    
                }
            });
        }, 2000);
    }
});
</script>

calendar

1 Like
2

Hello,

I try to use your script on my calendar block.
I can’t get it to work

3

Check for this condition on the script, and adjust it to your language, here is defined for browsers in Spanish ‘es-’ So the script will only play when browsing in Spanish.

4

J’ai modifié par “es-” par “fr-”.

Voici le script :

<script>
document.addEventListener("DOMContentLoaded", function () {

    const userLocale = navigator.languages && navigator.languages.length
    ? navigator.languages[0]
    : navigator.language;

    const dictionary = {
    "\\bJanuary\\b": "Janvier",
    "\\bFebruary\\b": "Février",
    "\\bMarch\\b": "Mars",
    "\\bApril\\b": "Avril",
    "\\bMay\\b": "MAi",
    "\\bJune\\b": "Juin",
    "\\bJuly\\b": "Juillet",
    "\\bAugust\\b": "Août",
    "\\bSeptember\\b": "Septembre",
    "\\bOctober\\b": "Octobre",
    "\\bNovember\\b": "Novembre",
    "\\bDecember\\b": "Décembre",
    "Today": "Aujourd'hui",
    "Month":"Mois",
    "Week": "Semaine",
    "Day": "Année",
    "\\bMon\\b": "Lun",
    "\\bTue\\b": "Mar",
    "\\bWed\\b": "Mer",
    "\\bThu\\b": "Jeu",
    "\\bFri\\b": "Ven",
    "\\bSat\\b": "Sam",
    "\\bSun\\b": "Dim"
    };

    const ids = ['calendarblockid1';

    const translateContent = function(element) {
        Array.from(element.childNodes).forEach(function(childElement) {
            if (childElement.nodeType === 3) {
               var newWords = childElement.nodeValue;

               for(const word in dictionary) {
                  const regex = new RegExp(word, "g")
                  newWords = newWords.replace(regex, dictionary[word]);
               }

               childElement.nodeValue = newWords;
           } else if (childElement.nodeType === 1) {
               translateContent(childElement);
           }
        });
    };

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                translateContent(mutation.target);
            }
        });
    });

    if(userLocale.toLocaleLowerCase().startsWith("fr-")) {
        setTimeout(function() {
            ids.forEach(function(id) {
               
                const element = document.getElementById(id);
                if (element) {
                    translateContent(element);

                    // Begin observing the changes to the targeted element
                    observer.observe(element, {attributes: false, childList: true, subtree: true, characterData: true});
                    
                }
            });
        }, 2000);
    }
});
</script>```
5

It seems your const ids line lake of ]

must be

6

Thank you for your feedback.
The element should have been written as = const ids = [‘calendarblockid1’];