# Customize Format Culture Dialog

A tutorial showing how to customize the formatting of the culture dialog in the SpreadJS Designer Component, including UI and code examples

## Content

You can customize the Designer Component culture dialog in the cell format window. The [Spread.Common.CultureInfo](/spreadjs/api/v19/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("designerHost");
    ```
2. Get the culture info instance using the [CultureInfo](/spreadjs/api/v19/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://learn.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/v19/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:
![SpreadJS Designer demonstrates adding a German CultureInfo with locale-specific currency, accounting, date, time, and special formats to the cell format window.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/theme9.f138ae.gif?width=750)

## CJK Escape Character in Custom Number Formats

In CJK locales, the Designer Component supports the exclamation mark (`!`) as an escape character in the Custom number format input. This behavior provides an Excel-like localized input experience for Chinese, Japanese, and Korean environments.
For example, in a CJK locale, the following custom number format uses `!` to escape the decimal point:

```javascript
0!.0,"万"
```

This format is equivalent to the following format:

```auto
0\.0,"万"
```

Both formats can display `12000` as `1.2万`.
![SpreadJS Designer in a CJK locale displays 12000 as 1.2万 using the exclamation mark as an escape character in a custom number format.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260707.703617.png?width=400)
In non-CJK locales, `!` is not treated as an escape character. Use the backslash (`\`) escape character instead.

```auto
0\.0,"万"
```

![SpreadJS Designer in a non-CJK locale displays 12000 as 1.2万 using a backslash escape in the custom number format input.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260707.f11ed1.png?width=400)

>type=note
> **Note:** The `!` escape behavior applies to custom number format input in the Designer Component for CJK locales. The backslash (`\`) escape character is still supported for compatibility.