Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  •   Snippets

  • Change the Time Field to a Dropdown

  • Trigger Refresh When Integromat Completes

  • Converting an Index Match Setup to Tadabase

  • Set Link Button to Open in a New Tab

  • How to Hide Component Based on “No Records” in Table

  • Change Link Button Color CSS for Active/Hover

  • JS to Show/Hide Components Depending on Multiple Data Fields

  • Google Charts Integration

  • Change the Background Color of 2 Cards if the Numbers Match

  • Save IP Address of Logged in User to the Record

  • Add Logged in User's IP Address to Form

  • Enlarge Thumbnail Images

  • Link Button Pop-up

  • Field Title Language - Based on Logged in Users' Language

  • Filter Tab - Background Color

  • IF 2 Card Component Value's Match - Change Background Colors to Match

  • Show Progress Based on Field Value

  • Export Multiple Tables in a Single File

  • Specify Size of Image Model Popup

  • Refresh Entire Page after Form is Submitted

  • Change Labels Language

  • Run Basic Math in Real Time on a Form

  • Set your Data Table to Auto-Refresh

  • CSS Color Gradient

  • Embed Your App in a Webpage Without iFrame or Embed Code

  • CSS for Table Component Title Text

  • Vertical Text in Columns and Fields

  • Mobile Menu Logo - When Menu is Closed

  • View Record Details on Parent Page

  • Show loading GIF while Action Links Run

  • Show columns based on the Users Role

  • Change Checkbox Size

  • Quick and Easy PDF Preview

  • Card Component - Display Sales - Today vs. Yesterday

  • A Multi-Company Project Management Tool

  • Multi-Item Select for Form Input

  • Set "Inputmode" on a Currency Field to a Decimal

  • Remove Link from Signature Fields in Details Components

  • Change Sub Menu Background Color and Text on Hover

  • Change Image Thumbnail Sizes

  • Change the Default Record Count Text

  • Copy Text on Click

  • Delete Connected Child Records Along with the Parent Record

  • Limit Text- Show more

  • Pause a Redirect of the Form

  • Display Addresses in a Single Line in Table Components

  • CSS Option for Connection Fields in a Form Component.

  • Generate Static Map Image

  • Delete Link on Child Page

  • Convert your Calendar's Language

  • Include “Add New” Text Button When Using "table-style-2"

  • Keep Columns Horizontally side by side on Mobile Devices

  • Using Javascript to Manipulate Records Without Tadabase REST API

  • Hide Columns Based on User Role

  • Add Speech Recognition to Your Form

  • Create an Anchor Link Button

  • Refresh all Tables When Form is Submitted

  • Customize Pagination Colors

  • Keep Active Menu Item Highlighted

  • Remove Background Color on Menu Item Hover and Focus

  • Hide Submit Button Unless all Radio Options are “Yes”

  • Set a date based on a Quarter and Year

  • Hover text - Buttons

  • How to use (space) delimiters in an input-field for numbers in text-field

  • Back Button

  • Customize the Form Submission Dialog Box.

  • Change Theme Button Colors

  • Fire Confetti🎉 When Submitting a Form

  • How to Add Checkboxes to Your Table and Add Logic to Them!

  • Photos in Gallery Display

  • Use Buttons to Search a Date Within a Range

  • Link highlighting Without Underline

  • Hide the Refresh Box and Records Display in a Table.

  • Move Form “Save” Button to Top of Form Page

  • Card Component Enhancement

  • Apply CSS class to PDF Print/Download Button

  • How to Hide Arrows from Input Number

  • Only Show Component if it’s the First Week of the Month

  • Hide Components when there are no Records

  • Multi-Step Background and Number/Icon Text Color

  • Use a Custom Icon in Card

  • Left Align Radio Buttons

  • Table Thumbnail Image Percentage Related Sizing

  • How to Round Filter Tabs

  • Table Style 2

  • Table Style 3

  • Table Style 4

  • Table Style 5

  • Details Style 1

  • Form Style One

  • Form Style 2

  • Form Style 3

  • Form Style Three

  • Form Style 4

  • Form Style 5

  • Animated Save Button - Grab Attention

  • Trigger Submit Button of the Other Form

  • Mask Sensitive Form Values

  • Capitalize First Letter in Fields

  • Change Header Size - Resource Component

  • Wrap Navigation Tabs for Mobile

  • Custom Print

  • Run JavaScript from an HTML Button Onclick Event

  • Record Validation for a Specific Word.

  • Remove "Years" from a Date Formatted as Age

  • Create a Record Entry Alternative to Using a QR Code Scan

  • JSChart Custom Component

  • Concatenate Multi-Select Connections

  • Add Freshdesk for Certain Roles or Pages

  • Hide Specific Part of a Menu Based on Logged in User Status/Role

  • Simple Scraper Setup

  • Validation rule - Validate against a connected field using a pipe

  • Change Button Based on Record Value

  • Hide Menu Links Based on Roles, Status or Logged in Users

  • How to add Delete Functionality Inside a Modal

  • Add a 360 tour to a Page.

  • Create X Amount of Connected Records Based on a Number Field

  • Pre Populate & Disable Date Range

  • Covert Action button to Text when Pushed

  • Access Data Table Records from JS

  • Concat Multiple Checkboxes While Filtering Duplicates

  • Read Receipts for When User Views the Details Page.

  • Number Count in Badge With Extra Filters

  • How to Customize the Language of your Tadabase Charts

  • Save records to Google in batches

  • Override Action Link with Confirmation Popup

  • How to Add Custom Themes to your Tadabase Charts

Categories
Snippets
Convert your Calendar'...

Convert your Calendar's Language

2022-09-14_00-22-38.png

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.”

image

 

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

image

Here’s the code for Spanish as an example:

2022-09-14_00-41-14.png

<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

How did we do ?

Previous Article
Delete Link on Child Page
Next Article
Include “Add New” Text Button When Using "table-style-2"
Article Navigation
  • 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 calenda
  • Furthermore, if you want to update the calendar locale language setting for the date picker, you may
  • Original Community Post:
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational