# Customize Format Culture Dialog

## Content

You can customize the Designer Component culture dialog in the cell format window. The [Spread.Common.CultureInfo](/spreadjs/api/v16/classes/GC.Spread.Common.CultureInfo) class can help in defining new culture options through properties such as locale ID, display name, and pre-defined formats (currency, accounting, date, time, special).

1. Initialize the designer instance.

    ```JavaScript
    // Initialize the designer component
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
    ```
2. Get the culture info instance using the [CultureInfo](/spreadjs/api/v16/classes/GC.Spread.Common.CultureInfo#_ctor) constructor method. It represents the custom culture class.

    ```JavaScript
    // Get the culture info instance
    var cultureInfo = new GC.Spread.Common.CultureInfo()
    ```
3. Set the culture info properties to specify in the format window. Refer to [Microsoft Locale ID definition](https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-lcid/63d3d639-7fd2-4afb-abbe-0d5b5551eef8) to know about all the available locale IDs.

    ```JavaScript
    // Set new culture info for German
    cultureInfo.displayName = "German (Germany)"
    cultureInfo.name = function () { return "de-DE" }
    cultureInfo.id = 0x407;
    cultureInfo.predefinedFormats.Accounting = '_-* #,##0. [$€-407]_-;-* #,##0. [$€-407]_-;_-* "-". [$€-407]_-;_-@_-';
    cultureInfo.predefinedFormats.Currency = [
        "#,##0. [$€-407]",
        "#,##0. [$€-407];[Red]#,##0. [$€-407]",
        "#,##0. [$€-407];-#,##0. [$€-407]",
        "#,##0. [$€-407];[Red]-#,##0. [$€-407]"
    ];
    cultureInfo.predefinedFormats.Date = [
        "yyyy-mm-dd;@",
        "d.m;@",
        "d.m.yy;@",
        "dd.mm.yy;@",
        "[$-407]d. mmm.;@",
        "[$-407]d. mmm. yy;@",
        "[$-407]d. mmm yy;@",
        "[$-407]mmm. yy;@",
        "[$-407]mmmm yy;@",
        "[$-407]d. mmm yy;@",
        "[$-409]d/m/yy h:mm AM/PM;@",
        "d.m.yy h:mm;@",
        "[$-407]mmmmm;@",
        "[$-407]mmmmm yy;@",
        "d.m.yyyy;@",
        "[$-407]d. mmm. yyyy;@"
    ]
    cultureInfo.predefinedFormats.Time = [
        "h:mm;@",
        "[$-409]h:mm AM/PM;@",
        "h:mm:ss;@",
        "[$-409]h:mm:ss AM/PM;@",
        "mm:ss.0;@",
        "[h]:mm:ss;@",
        "[$-409]d/m/yy h:mm AM/PM;@",
        "d.m.yy h:mm;@"
    ]
    cultureInfo.predefinedFormats.Special = {
        "Postleitzahl": "00000",
        "Postleitzahl (A)": "\A-00000",
        "Postleitzahl (CH)": "C\H-00000",
        "Postleitzahl (D)": "\D-00000",
        "Postleitzahl (L)": "L-00000",
        "Versicherungsnachweis-Nr. (D)": "\[@\]",
        "Sozialversicherungsnummer (A)": "0000-00 00 00",
        "Sozialversicherungsnummer (CH)": "000\.00\.000\.000",
        "ISBN-Format (ISBN x-xxx-xxxxx-x)": "I\S\B\N #-###-#####-#",
        "ISBN-Format (ISBN x-xxxx-xxxx-x)": "I\S\B\N #-####-####-#",
        "ISBN-Format (ISBN x-xxxxx-xxx-x)": "I\S\B\N #-#####-###-#"
    }
    ```
4. Add the new culture info object using the [addCultureInfo](/spreadjs/api/v16/classes/GC.Spread.Common.CultureManager#addCultureInfo) method.

    ```JavaScript
    // Add new culture info
    GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(), cultureInfo);
    ```

The below output will be generated:

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/designer-component-cultureinfo.gif)