Convert your Calendar's Language

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Here is code you can use to update every button and text in the Calendar component to Spanish.

Step 1

Find your Calendar component ID. In this example, you can see that the Calendar ID is “component_3.”

Step 2

Below is the JavaScript to copy and paste into the JavaScript section of your page where the calendar is located. Please change ‘YOUR_COMPONENT_ID’ on the first line to your calendar component ID.

var componentId = 'YOUR_COMPONENT_ID';
var months = {
    "Jan": {
        "spanish": "enero",
        "german": "Januar",
        "name": "January",
        "germanShort": "Jän.",
        "spanishShort": "enero",
        "short": "Jan"
    },
    "Feb": {
        "spanish": "febrero",
        "german": "Februar",
        "name": "February",
        "germanShort": "Feb.",
        "spanishShort": "feb.",
        "short": "Feb"
    },
    "Mar": {
        "spanish": "marzo",
        "german": "März",
        "name": "March",
        "germanShort": "März",
        "spanishShort": "marzo",
        "short": "Mar"
    },
    "Apr": {
        "spanish": "abril",
        "german": "April",
        "name": "April",
        "germanShort": "Apr.",
        "spanishShort": "abr.",
        "short": "Apr"
    },
    "May": {
        "spanish": "mayo",
        "german": "Mai",
        "name": "May",
        "germanShort": "Mai",
        "spanishShort": "mayo",
        "short": "May"
    },
    "Jun": {
        "spanish": "junio",
        "german": "Juni",
        "name": "June",
        "germanShort": "Juni",
        "spanishShort": "jun.",
        "short": "Jun"
    },
    "Jul": {
        "spanish": "julio",
        "german": "Juli",
        "name": "July",
        "germanShort": "Juli",
        "spanishShort": "jul.",
        "short": "Jul"
    },
    "Aug": {
        "spanish": "agosto",
        "german": "August",
        "name": "August",
        "germanShort": "Aug.",
        "spanishShort": "agosto",
        "short": "Aug"
    },
    "Sep": {
        "spanish": "septiembre",
        "german": "September",
        "name": "September",
        "germanShort": "Sept.",
        "spanishShort": "sept.",
        "short": "Sep"
    },
    "Oct": {
        "spanish": "octubre",
        "german": "Oktober",
        "name": "October",
        "germanShort": "Okt.",
        "spanishShort": "oct.",
        "short": "Oct"
    },
    "Nov": {
        "spanish": "noviembre",
        "german": "November",
        "name": "November",
        "germanShort": "Nov.",
        "spanishShort": "nov.",
        "short": "Nov"
    },
    "Dec": {
        "spanish": "diciembre",
        "german": "Dezember",
        "name": "December",
        "germanShort": "Dez.",
        "spanishShort": "dic.",
        "short": "Dec"
    }
};
var daysOfTheWeek = {
    "Sun": {
        "spanish": "domingo",
        "german": "Sonntag",
        "name": "Sunday",
        "germanShort": "So",
        "spanishShort": "Do",
        "short": "Sun"
    },
    "Mon": {
        "spanish": "lunes",
        "german": "Montag",
        "name": "Monday",
        "germanShort": "Mo",
        "spanishShort": "Lu",
        "short": "Mon"
    },
    "Tue": {
        "spanish": "martes",
        "german": "Dienstag",
        "name": "Tuesday",
        "germanShort": "Di",
        "spanishShort": "Ma",
        "short": "Tue"
    },
    "Wed": {
        "spanish": "miércoles",
        "german": "Mittwoch",
        "name": "Wednesday",
        "germanShort": "Mi",
        "spanishShort": "Mi",
        "short": "Wed"
    },
    "Thu": {
        "spanish": "jueves",
        "german": "Donnerstag",
        "name": "Thursday",
        "germanShort": "Do",
        "spanishShort": "Ju",
        "short": "Thu"
    },
    "Fri": {
        "spanish": "viernes",
        "german": "Freitag",
        "name": "Friday",
        "germanShort": "Fr",
        "spanishShort": "Vi",
        "short": "Fri"
    },
    "Sat": {
        "spanish": "sábado",
        "german": "Samstag",
        "name": "Saturday",
        "germanShort": "Sa",
        "spanishShort": "Sa",
        "short": "Sat"
    }
};
var updateTextForShortMonthTitle = function() {
    for (var month in months) {
        if ($('.fc-center h2').text().contains(months[month].short) && $('.fc-center h2').text().indexOf(months[month].spanish) === -1) {
            $('.fc-center h2').text($('.fc-center h2').text().replace(months[month].short, months[month].spanishShort));
        }
        if ($('.fc-list-heading-main').text().contains(months[month].short)) {
            $('.fc-list-heading-main').text(($('.fc-list-heading-main').text().replace(months[month].short, months[month].spanishShort)));
        }
        if ($('.fc-list-heading-alt').text().contains(months[month].short)) {
            $('.fc-list-heading-alt').text(($('.fc-list-heading-alt').text().replace(months[month].short, months[month].spanishShort)));
        }
    }
};
var updateTextForLongDayOfTheWeek = function() {
    for (var day in daysOfTheWeek) {
        if ($('.fc-list-heading-main').text().contains(daysOfTheWeek[day].name)) {
            $('.fc-list-heading-main').text(($('.fc-list-heading-main').text().replace(daysOfTheWeek[day].name, daysOfTheWeek[day].spanish)));
        }
        if ($('.fc-list-heading-alt').text().contains(daysOfTheWeek[day].name)) {
            $('.fc-list-heading-alt').text(($('.fc-list-heading-alt').text().replace(daysOfTheWeek[day].name, daysOfTheWeek[day].spanish)));
        }
    }
};
var updateTextForShortDaysOfTheWeek = function() {
    $('.fc-sun span').text(daysOfTheWeek["Sun"].spanishShort);
    $('.fc-mon span').text(daysOfTheWeek["Mon"].spanishShort);
    $('.fc-tue span').text(daysOfTheWeek["Tue"].spanishShort);
    $('.fc-wed span').text(daysOfTheWeek["Wed"].spanishShort);
    $('.fc-thu span').text(daysOfTheWeek["Thu"].spanishShort);
    $('.fc-fri span').text(daysOfTheWeek["Fri"].spanishShort);
    $('.fc-sat span').text(daysOfTheWeek["Sat"].spanishShort);

    $('hit-date-time-picker small[aria-label="Sunday"]').text(daysOfTheWeek["Sun"].spanishShort);
    $('hit-date-time-picker small[aria-label="Monday"]').text(daysOfTheWeek["Mon"].spanishShort);
    $('hit-date-time-picker small[aria-label="Tuesday"]').text(daysOfTheWeek["Tue"].spanishShort);
    $('hit-date-time-picker small[aria-label="Wednesday"]').text(daysOfTheWeek["Wed"].spanishShort);
    $('hit-date-time-picker small[aria-label="Thursday"]').text(daysOfTheWeek["Thu"].spanishShort);
    $('hit-date-time-picker small[aria-label="Friday"]').text(daysOfTheWeek["Fri"].spanishShort);
    $('hit-date-time-picker small[aria-label="Saturday"]').text(daysOfTheWeek["Sat"].spanishShort);
};
var setTextForMonthTitle = function() {
    for (var month in months) {
        if ($('.fc-center h2').text().contains(months[month].name) && $('.fc-center h2').text().indexOf(months[month].spanish) === -1) {
            $('.fc-center h2').text($('.fc-center h2').text().replace(months[month].name, months[month].spanish));
        }
        if ($('.fc-list-heading-main').text().contains(months[month].name)) {
            $('.fc-list-heading-main').text(($('.fc-list-heading-main').text().replace(months[month].name, months[month].spanish)));
        }
        if ($('.fc-list-heading-alt').text().contains(months[month].name)) {
            $('.fc-list-heading-alt').text(($('.fc-list-heading-alt').text().replace(months[month].name, months[month].spanish)));
        }

        if ($('hit-date-time-picker strong').text().contains(months[month].name)) {
            $('hit-date-time-picker strong').text($('hit-date-time-picker strong').text().replace(months[month].name, months[month].spanish));
        }
    }
};
var setTextForButtons = function() {
    var textOptions = {
        "spanish": {
            "today": "Hoy",
            "refresh": "Actualizar",
            "calendar": "Calendario",
            "list": "Lista",
            "month": "Mes",
            "week": "Semana",
            "day": "Día",
            "emptyList": "No hay eventos para mostrar",
            "clear": "Claro",
            "close": "Cerrar",
        },
        "german": {
            "today": "Heute",
            "refresh": "Aktualisieren",
            "calendar": "Kalender",
            "list": "Aufführen",
            "month": "Monat",
            "week": "Woche",
            "day": "Tag",
            "emptyList": "Es sind keine Ereignisse zu zeigen",
            "clear": "klar",
            "close": "Schließen",
        }
    }
    setTimeout(function() {
        $('.fc-today-button').html(textOptions.spanish.today);
        $('.fc-refreshEvent-button').html(textOptions.spanish.refresh);
        $('.fc-myCalendar-button').html(textOptions.spanish.calendar);
        $('.fc-myList-button').html(textOptions.spanish.month);
        $('.fc-myMonth-button').html(textOptions.spanish.week);
        $('.fc-myWeek-button').html(textOptions.spanish.day);
        $('.fc-myDay-button').html(textOptions.spanish.today);
        $('.fc-list-empty').text(textOptions.spanish.emptyList);

        $('hit-date-time-picker button[ng-class="getClass(\'today\')"]').html(textOptions.spanish.today);
        $('hit-date-time-picker button[ng-class="getClass(\'clear\')"]').html(textOptions.spanish.clear);
        $('hit-date-time-picker button[ng-class="getClass(\'close\')"]').html(textOptions.spanish.close);

    }, 250);
};
var triggerAllUpdates = function() {
    setTextForButtons();
    setTextForMonthTitle();
    updateTextForShortDaysOfTheWeek();
    updateTextForLongDayOfTheWeek();
    updateTextForShortMonthTitle();
};
$(function() {
    $('.fc-button').on('click', function() {
        setTimeout(function() {
            triggerAllUpdates();
        }, 250);
        $('.fc-list-heading-main').on('click', function() {
            setTimeout(function() {
                triggerAllUpdates();
            }, 250);
        });
        $('.fc-list-heading-alt').on('click', function() {
            setTimeout(function() {
                triggerAllUpdates();
            }, 250);
        });
    });
    TB.render(componentId, function(data) {
        $('[ng-click="$ctrl.openCalendar($event)"]').on('click', function() {
            setTimeout(function() {
                triggerAllUpdates();
            }, 250);
        });
    });

    triggerAllUpdates();
});

Furthermore, if you want to update the calendar locale language setting for the date picker, you may add the correct JavaScript into the Custom Footer code.

A list of all locales can be found here: https://github.com/angular/angular.js/tree/master/src/ngLocale 3

Here’s how that would look

Here’s the code for Spanish as an example:

<script>
'use strict';
angular.module("ngLocale", [], ["$provide", function($provide) {
var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"};
$provide.value("$locale", {
  "DATETIME_FORMATS": {
    "AMPMS": [
      "a. m.",
      "p. m."
    ],
    "DAY": [
      "domingo",
      "lunes",
      "martes",
      "mi\u00e9rcoles",
      "jueves",
      "viernes",
      "s\u00e1bado"
    ],
    "ERANAMES": [
      "antes de Cristo",
      "despu\u00e9s de Cristo"
    ],
    "ERAS": [
      "a. C.",
      "d. C."
    ],
    "FIRSTDAYOFWEEK": 0,
    "MONTH": [
      "enero",
      "febrero",
      "marzo",
      "abril",
      "mayo",
      "junio",
      "julio",
      "agosto",
      "septiembre",
      "octubre",
      "noviembre",
      "diciembre"
    ],
    "SHORTDAY": [
      "dom.",
      "lun.",
      "mar.",
      "mi\u00e9.",
      "jue.",
      "vie.",
      "s\u00e1b."
    ],
    "SHORTMONTH": [
      "ene.",
      "feb.",
      "mar.",
      "abr.",
      "may.",
      "jun.",
      "jul.",
      "ago.",
      "sept.",
      "oct.",
      "nov.",
      "dic."
    ],
    "STANDALONEMONTH": [
      "enero",
      "febrero",
      "marzo",
      "abril",
      "mayo",
      "junio",
      "julio",
      "agosto",
      "septiembre",
      "octubre",
      "noviembre",
      "diciembre"
    ],
    "WEEKENDRANGE": [
      5,
      6
    ],
    "fullDate": "EEEE, d 'de' MMMM 'de' y",
    "longDate": "d 'de' MMMM 'de' y",
    "medium": "d MMM y H:mm:ss",
    "mediumDate": "d MMM y",
    "mediumTime": "H:mm:ss",
    "short": "d/M/yy H:mm",
    "shortDate": "d/M/yy",
    "shortTime": "H:mm"
  },
  "NUMBER_FORMATS": {
    "CURRENCY_SYM": "\u20ac",
    "DECIMAL_SEP": ",",
    "GROUP_SEP": ".",
    "PATTERNS": [
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 3,
        "minFrac": 0,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "",
        "posPre": "",
        "posSuf": ""
      },
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 2,
        "minFrac": 2,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "\u00a0\u00a4",
        "posPre": "",
        "posSuf": "\u00a0\u00a4"
      }
    ]
  },
  "id": "es-es",
  "localeID": "es_ES",
  "pluralCat": function(n, opt_precision) {  if (n == 1) {    return PLURAL_CATEGORY.ONE;  }  return PLURAL_CATEGORY.OTHER;}
});
}]);
    
</script>

Original Community Post:

Convert your calendar language - Community Discussions / Tips and Tricks - Tadabase Community