From ad21d8a4b45030bbe43d1a52b76b396177b6dbf7 Mon Sep 17 00:00:00 2001 From: ikrammt <145692307+ikrammt@users.noreply.github.com> Date: Fri, 26 Apr 2024 15:35:04 +0100 Subject: [PATCH 1/3] feat: add japanese language support --- stories/demos/exampleCode/cultures.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/stories/demos/exampleCode/cultures.js b/stories/demos/exampleCode/cultures.js index accdb30dd..db0e9096e 100644 --- a/stories/demos/exampleCode/cultures.js +++ b/stories/demos/exampleCode/cultures.js @@ -9,8 +9,9 @@ require('globalize/lib/cultures/globalize.culture.en-GB') require('globalize/lib/cultures/globalize.culture.es') require('globalize/lib/cultures/globalize.culture.fr') require('globalize/lib/cultures/globalize.culture.ar-AE') +require('globalize/lib/cultures/globalize.culture.ja') -const cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE'] +const cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE', 'ja'] const lang = { en: null, 'en-GB': null, @@ -50,6 +51,19 @@ const lang = { showMore: (total) => `+${total} إضافي`, }, + ja: { + // Add Japanese translations here + week: '週間', // Week + work_week: '勤務週', // Work week + day: '日', // Day + month: '月', // Month + previous: '前', // Previous + next: '次', // Next + today: '今日', // Today + agenda: '予定表', // Agenda + + showMore: (total) => `+${total} 件`, // Show more (total items) + }, } export default function CulturesDemo({ localizer }) { From 7c97b3b11e1a8b2c09f03461ef46267922800527 Mon Sep 17 00:00:00 2001 From: ikrammt <145692307+ikrammt@users.noreply.github.com> Date: Sat, 4 May 2024 13:31:22 +0100 Subject: [PATCH 2/3] feat: update localization support guide --- stories/demos/exampleCode/cultures.js | 16 +----------- stories/guides/localizer.stories.mdx | 37 ++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 16 deletions(-) diff --git a/stories/demos/exampleCode/cultures.js b/stories/demos/exampleCode/cultures.js index db0e9096e..accdb30dd 100644 --- a/stories/demos/exampleCode/cultures.js +++ b/stories/demos/exampleCode/cultures.js @@ -9,9 +9,8 @@ require('globalize/lib/cultures/globalize.culture.en-GB') require('globalize/lib/cultures/globalize.culture.es') require('globalize/lib/cultures/globalize.culture.fr') require('globalize/lib/cultures/globalize.culture.ar-AE') -require('globalize/lib/cultures/globalize.culture.ja') -const cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE', 'ja'] +const cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE'] const lang = { en: null, 'en-GB': null, @@ -51,19 +50,6 @@ const lang = { showMore: (total) => `+${total} إضافي`, }, - ja: { - // Add Japanese translations here - week: '週間', // Week - work_week: '勤務週', // Work week - day: '日', // Day - month: '月', // Month - previous: '前', // Previous - next: '次', // Next - today: '今日', // Today - agenda: '予定表', // Agenda - - showMore: (total) => `+${total} 件`, // Show more (total items) - }, } export default function CulturesDemo({ localizer }) { diff --git a/stories/guides/localizer.stories.mdx b/stories/guides/localizer.stories.mdx index d6885676c..dc51c13ad 100644 --- a/stories/guides/localizer.stories.mdx +++ b/stories/guides/localizer.stories.mdx @@ -1,3 +1,9 @@ +--- +runme: + id: 01HX1RNX7ZHQWDAHRJ00A65BJ6 + version: v3 +--- + import { Meta } from '@storybook/addon-docs' import LinkTo from '@storybook/addon-links/react' @@ -5,7 +11,7 @@ import LinkTo from '@storybook/addon-links/react' # What is a Localizer? -You have probably noticed that your Big Calendar implementations require a localizer prop. The `localizer` is needed for applying formatting and culture (i18n) to your date displays throughout the Calendar. +You have probably noticed that your Big Calendar implementations require a localizer prop. The `localizer` is needed for applying formatting and culture (i18n) to your date displays throughout the Calendar. Now the `localizer` also handles all internal date math, utilizing the `localizer` you provide. This is how the [moment](https://momentjs.com/) and [Luxon](https://moment.github.io/luxon/#/) localizers handle timezones, and how all of them handle things like Daylight Savings Time. Most components receive the `localizer` as a prop, meaning that your override components can also take advantage of these features. Each `localizer`, when created, creates an instance of `DateLocalizer` class, and each one has a normalized group of functions and props available for manipulating dates. @@ -48,3 +54,32 @@ Each `localizer`, when created, creates an instance of `DateLocalizer` class, an Many of these methods are used by Big Calendar in the background for determining layout. You can create your own custom `localizer`, to utilize some other library, as long as they implement these methods. The `DateLocalizer` class defaults these methods to methods from the [date-arithmetic](https://www.npmjs.com/package/date-arithmetic) package. For examples of building your own custom `localizer` take a look at the [currently implemented localizers](https://github.com/jquense/react-big-calendar/blob/master/src/localizers). If you do build your own `localizer`, please consider publishing it to [npm](https://npmjs.org). We suggest a common naming convention like `rbc-addon-mylocalizername`. + +### Customizing with Locale Files + +Each localizer library allows for defining custom translations for various calendar elements like weekdays, months, navigation buttons (Previous, Next, Today), and more. You can leverage these libraries to provide translations for your desired language. + +##### Example: Adding Japanese Support + +Here's a basic example demonstrating how to include Japanese translations using the `globalize` library: + +```javascript {"id":"01HX1RTAKN8WKEHMV5FASGABYV"} +require('globalize/lib/cultures/globalize.culture.ja'); + +const cultures = ['ja']; +const lang = { + ja: { + week: '週間', // Week + work_week: '勤務週', // Work week + day: '日', // Day + month: '月', // Month + previous: '前', // Previous + next: '次', // Next + today: '今日', // Today + agenda: '予定表', // Agenda + showMore: (total) => `+${total} 件`, // Show more (total items) + }, +}; +``` + +In this example, we import the Japanese culture definition for the `globalize` library. We then define a `lang` object containing translations for various calendar elements in Japanese. Finally, we can use this `lang` object with the chosen localizer library to render the calendar in Japanese. From 295df9d48a91e66c17c3955b23289ed74edab5f3 Mon Sep 17 00:00:00 2001 From: ikrammt <145692307+ikrammt@users.noreply.github.com> Date: Tue, 7 May 2024 20:57:53 +0100 Subject: [PATCH 3/3] feat: update japanese language support --- stories/guides/localizer.stories.mdx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/stories/guides/localizer.stories.mdx b/stories/guides/localizer.stories.mdx index dc51c13ad..b58f8beae 100644 --- a/stories/guides/localizer.stories.mdx +++ b/stories/guides/localizer.stories.mdx @@ -1,8 +1,3 @@ ---- -runme: - id: 01HX1RNX7ZHQWDAHRJ00A65BJ6 - version: v3 ---- import { Meta } from '@storybook/addon-docs' import LinkTo from '@storybook/addon-links/react'