Localization

Localization allows you to present the interface of the Gantt chart in the language you'd like: English, Spanish, French, etc. By default, dhtmlxGantt provides support for the English locale.

Activating a locale

To implement the Gantt chart in non-English language, you need to include the locale file on the page. Gantt has the predefined locales for main languages. All locale files are stored in sources/locale folder as sources/locale/locale_{name}.js

<script src="../codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="../codebase/dhtmlxgantt.css">
 
<script src="../codebase/locale/locale_fr.js" charset="utf-8"></script>

Make sure that you use charset="utf-8", because all locales are stored as UTF-8 text.

Related sample:  Localization

Predefined locales

Language Locale file Translation status
Arabic locale_ar.js partial
Belarusian locale_be.js full
English locale.js full
Catalan locale_ca.js partial
Chinese locale_cn.js partial
Croatian locale_hr.js full
Czech locale_cs.js partial
Danish locale_da.js partial
Dutch locale_nl.js partial
Finnish locale_fi.js partial
French locale_fr.js full
German locale_de.js full
Greek locale_el.js partial
Hebrew locale_he.js partial
Hungarian locale_hu.js partial
Indonesian locale_id.js partial
Italian locale_it.js partial
Japanese locale_jp.js partial
Korean locale_kr.js partial
Norwegian locale_no.js partial
Norwegian Bokmål locale_nb.js partial
Persian locale_fa.js full
Polish locale_pl.js partial
Portuguese locale_pt.js partial
Romanian locale_ro.js partial
Russian locale_ru.js full
Slovak locale_sk.js partial
Slovenian locale_si.js partial
Spanish locale_es.js partial
Swedish locale_sv.js partial
Turkish locale_tr.js partial
Ukrainian locale_ua.js partial

Creating a custom locale

Note,

  • Locale is created in a separate js file named as "locale_[xx]", where [xx] is a two-letter language code.
  • You can send your custom locale file to support@dhtmlx.com - so we will include it in the next release.

The easiest way to create a custom locale is to make a copy of the default (English) locale - gantt/sources/locale/locale.js, and translate all strings from it into the required language.

  • monthFull - the full names of months starting from January;
  • monthShort - the short names of months starting from January;
  • dayFull - the full names of week days starting from Sunday;
  • dayShort - the short names of week days starting from Sunday.

Creating a French (France) locale. The "locale_fr.js" file

gantt.locale = {
    date: {
        month_full: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", 
            "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
        month_short: ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", 
            "Juil", "Aôu", "Sep", "Oct", "Nov", "Déc"],
        day_full: ["Dimanche", "Lundi", "Mardi", "Mercredi", 
            "Jeudi", "Vendredi", "Samedi"],
        day_short: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]
    },
    labels:{
        new_task:"Tâche neuve",
        icon_save:"Enregistrer",
        icon_cancel:"Annuler",
        icon_details:"Détails",
        icon_edit:"Modifier",
        icon_delete:"Effacer",
        confirm_closing:"",//Vos modifications seront perdus, êtes-vous sûr ?
        confirm_deleting:"L'événement sera effacé sans appel, êtes-vous sûr ?",
 
        section_description:"Description",
        section_time:"Période",
        section_type:"Type",
 
        /* grid columns */
 
        column_text :  "Tâche neuve",
        column_start_date : "Date initiale",
        column_duration : "Durée",
        column_add : "",
 
 
        /* link confirmation */
 
        confirm_link_deleting:"seront supprimées",
        link_start: "(début)",
        link_end: "(fin)",
 
        type_task: "Task",
        type_project: "Project",
        type_milestone: "Milestone",
 
 
        minutes: "Minutes",
        hours: "Heures",
        days: "Jours",
        weeks: "Semaine",
        months: "Mois",
        years: "Années"
    }
};
  • If the confirm_closing or confirm_deleting label is not defined - the related confirm dialog will not be shown at all (auto-confirm);
  • The section_{name} label refers to the lightbox section of the related name.
  • The new_task label defines the default text of a new event.
Back to top