Globalization

SpreadJS provides CultureInfo to support globalization.

You can modify the culture string and create a custom culture using the CultureInfo class. Add the custom culture by using the addCultureInfo method along with a culture name. Use the culture by setting the Culture method with the corresponding name.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> <div class="options-container"> <div class="option-row"> <label for="cultures">Culture: </label> </div> <div class="option-row"> <select id="cultures" style="width: 100%" @change="selectCulture"> </select> </div> </div> </div> </template> <script> import Vue from "vue"; import "@grapecity/spread-sheets-vue"; import GC from "@grapecity/spread-sheets"; import "./styles.css"; import cultureInfos from "sjs-globalization"; cultureInfos.forEach(function(cultureInfo){ GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(),cultureInfo); }) let App = Vue.extend({ name: "app", data: function () { return { spread: null }; }, methods: { initSpread: function (spread) { this.spread = spread; spread.suspendPaint(); this.initData(spread); spread.resumePaint(); this.selectCulture(); }, initData(spread) { let symbolFormat = '¥#,##0.00'; let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt'; let shortDateTimePattern = 'dddd tt'; let sheet = spread.getActiveSheet(); sheet.options.allowCellOverflow = true; let table = sheet.tables.add("Table1", 2, 2, 8, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table.highlightFirstColumn(true); sheet.setColumnWidth(0, 20); sheet.setColumnWidth(1, 20); sheet.setColumnWidth(2, 80); sheet.setColumnWidth(3, 180); sheet.setColumnWidth(4, 180); sheet.setColumnWidth(5, 200); //header sheet.setValue(2, 2, "Names"); sheet.setValue(2, 3, "Sale"); sheet.setValue(2, 4, "Buy"); sheet.setValue(2, 5, "Total"); sheet.setValue(3, 2, "Cindy"); sheet.setValue(4, 2, "Wills"); sheet.setValue(5, 2, "Sara"); sheet.setValue(6, 2, "Faith"); sheet.setValue(7, 2, "Halley"); sheet.setValue(8, 2, "Ken"); sheet.setValue(9, 2, "Newell"); sheet.setValue(3, 3, 1089468.3); sheet.setValue(4, 3, 1078758.3); sheet.setValue(5, 3, 1094684.6); sheet.setValue(6, 3, 1034683.2); sheet.setValue(7, 3, 1013685.1); sheet.setValue(8, 3, 1013468.8); sheet.setValue(9, 3, 1034686.2); sheet.getCell(3, 3).formatter(symbolFormat); sheet.getCell(4, 3).formatter(symbolFormat); sheet.getCell(5, 3).formatter(symbolFormat); sheet.getCell(6, 3).formatter(symbolFormat); sheet.getCell(7, 3).formatter(symbolFormat); sheet.getCell(8, 3).formatter(symbolFormat); sheet.getCell(9, 3).formatter(symbolFormat); sheet.setValue(3, 4, 1094682.6); sheet.setValue(4, 4, 1094683.9); sheet.setValue(5, 4, 1016856.9); sheet.setValue(6, 4, 1046858.4); sheet.setValue(7, 4, 1034685.9); sheet.setValue(8, 4, 1074851.5); sheet.setValue(9, 4, 1034682.9); sheet.getCell(3, 4).formatter(symbolFormat); sheet.getCell(4, 4).formatter(symbolFormat); sheet.getCell(5, 4).formatter(symbolFormat); sheet.getCell(6, 4).formatter(symbolFormat); sheet.getCell(7, 4).formatter(symbolFormat); sheet.getCell(8, 4).formatter(symbolFormat); sheet.getCell(9, 4).formatter(symbolFormat); sheet.getCell(3, 5).formula("=D4+E4-100.1"); sheet.getCell(4, 5).formula("=D5+E5-100.1"); sheet.getCell(5, 5).formula("=D6+E6-100.1"); sheet.getCell(6, 5).formula("=D7+E7-100.1"); sheet.getCell(7, 5).formula("=D8+E8-100.1"); sheet.getCell(8, 5).formula("=D9+E9-100.1"); sheet.getCell(9, 5).formula("=D10+E10-100.1"); sheet.getCell(3, 5).formatter(symbolFormat); sheet.getCell(4, 5).formatter(symbolFormat); sheet.getCell(5, 5).formatter(symbolFormat); sheet.getCell(6, 5).formatter(symbolFormat); sheet.getCell(7, 5).formatter(symbolFormat); sheet.getCell(8, 5).formatter(symbolFormat); sheet.getCell(9, 5).formatter(symbolFormat); let table2 = sheet.tables.add("Table2", 12, 2, 5, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table2.highlightFirstColumn(true); sheet.setValue(12, 2, "Name"); sheet.setValue(12, 3, "Birthday"); sheet.setValue(12, 5, "Date"); sheet.setValue(13, 2, "Cindy"); sheet.setValue(14, 2, "Sara"); sheet.setValue(15, 2, "Faith"); sheet.setValue(16, 2, "Nami"); sheet.addSpan(12, 3, 1, 2); sheet.addSpan(13, 3, 1, 2); sheet.addSpan(14, 3, 1, 2); sheet.addSpan(15, 3, 1, 2); sheet.addSpan(16, 3, 1, 2); let mydate = new Date(); mydate.setFullYear(1984, 1, 21); let date; date = new Date("1984/01/21 15:32:26"); sheet.setValue(13, 3, date); sheet.setValue(13, 5, date); date = new Date("1991/08/17 21:36:52"); sheet.setValue(14, 3, date); sheet.setValue(14, 5, date); date = new Date("2008/08/08 08:08:08"); sheet.setValue(15, 3, date); sheet.setValue(15, 5, date); date = new Date("2014/01/01 0:00:00"); sheet.setValue(16, 3, date); sheet.setValue(16, 5, date); sheet.getCell(13, 3).formatter(fullDateTimePattern); sheet.getCell(14, 3).formatter(fullDateTimePattern); sheet.getCell(15, 3).formatter(fullDateTimePattern); sheet.getCell(16, 3).formatter(fullDateTimePattern); sheet.getCell(13, 5).formatter(shortDateTimePattern); sheet.getCell(14, 5).formatter(shortDateTimePattern); sheet.getCell(15, 5).formatter(shortDateTimePattern); sheet.getCell(16, 5).formatter(shortDateTimePattern); }, selectCulture() { let spread = this.spread; let sheet = spread.getActiveSheet(); spread.suspendPaint(); let cultureName = document.getElementById('cultures').value; GC.Spread.Common.CultureManager.culture(cultureName); let culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName); let symbolFormat; if (culture.predefinedFormats.Currency) { symbolFormat = culture.predefinedFormats.Currency[0]; } else { symbolFormat = culture.NumberFormat.currencySymbol; symbolFormat = '"' + symbolFormat + '"' + '#,##0.00'; } for (let row = 3; row <= 9; row++) { for (let col = 3; col <= 5; col++) { sheet.getCell(row, col).formatter(symbolFormat); } } spread.resumePaint(); } }, mounted(){ let culturesEle = document.getElementById("cultures"); ['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).forEach(function (cultureInfo) { if(typeof cultureInfo === 'string'){ cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo); } var optionEle = document.createElement("option"); optionEle.innerText = cultureInfo.name()+ ": "+ cultureInfo.displayName; optionEle.setAttribute("value", cultureInfo.name()); culturesEle.appendChild(optionEle); }); culturesEle.value = 'en-US'; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script>
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/external/globalize.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/external/globalize.cultures.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-vue': 'npm:@grapecity/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', 'sjs-globalization': '$DEMOROOT$/spread/source/js/external/sjs-globalization/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);