Setup of i18next

package.json

@@ -7,9 +7,11 @@
     "@grafana/ui": "^10.1.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "dayjs": "^1.11.10",
+    "i18next": "^23.6.0",
     "react": "18.2.0",
     "react-big-calendar": "^1.8.4",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.3.1",
     "react-virtualized-auto-sizer": "^1.0.20",
     "tslib": "^2.6.2"
   },

src/@types/i18next.d.ts

@@ -0,0 +1,8 @@
+import { defaultNS, resources } from '../i18n';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: typeof resources.en;
+  }
+}

src/constants/default.ts

@@ -1,10 +1,10 @@
-import { CalendarOptions, CalendarType, View } from '../types';
+import { CalendarOptions, CalendarType, SupportedLanguage, View } from '../types';
 import { AnnotationsType, Colors } from './options';
 
 /**
- * Language
+ * Default Language
  */
-export const DefaultLanguage = 'en-US';
+export const DefaultLanguage: SupportedLanguage = 'en';
 
 /**
  * Default Options

src/hooks/useLocalizer.ts

@@ -7,9 +7,8 @@ import zhLocale from 'dayjs/locale/zh';
 import { useEffect, useMemo, useState } from 'react';
 import { dayjsLocalizer } from 'react-big-calendar';
 import { getLocaleData } from '@grafana/data';
-import { config } from '@grafana/runtime';
-import { DefaultLanguage, LanguageMessages } from '../constants';
-
+import { LanguageMessages } from '../constants';
+import { getUserLanguage } from '../utils';
 /**
  * Dayjs locales per each grafana language
  * Dynamic import is not needed until there is too many locales
@@ -28,13 +27,12 @@ const dayjsLocales = {
  */
 export const useLocalizer = () => {
   const localeDate = getLocaleData();
-  const language = config.bootData.user.language || DefaultLanguage;
-  const localeName = language.split('-')[0];
+  const language = getUserLanguage();
   const [dayjsLocale, setDayjsLocale] = useState(dayjsLocales.en);
 
   useEffect(() => {
-    setDayjsLocale(dayjsLocales[localeName as keyof typeof dayjsLocales] || dayjsLocales.en);
-  }, [localeName]);
+    setDayjsLocale(dayjsLocales[language as keyof typeof dayjsLocales] || dayjsLocales.en);
+  }, [language]);
 
   return useMemo(() => {
     /**
@@ -56,6 +54,6 @@ export const useLocalizer = () => {
     (localizer.formats as any).yearWeekFormat = 'dd';
     (localizer.formats as any).yearDateFormat = 'D';
 
-    return { localizer, messages: LanguageMessages[localeName] };
-  }, [dayjsLocale, localeDate, localeName]);
+    return { localizer, messages: LanguageMessages[language] };
+  }, [dayjsLocale, localeDate, language]);
 };

src/i18n/config.ts

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { resources } from './translations';
+import { getUserLanguage } from '../utils';
+
+/**
+ * Default Namespace
+ */
+export const defaultNS = 'translation';
+
+/**
+ * Init i18next
+ */
+i18next.use(initReactI18next).init({
+  lng: getUserLanguage(),
+  debug: true,
+  resources,
+  defaultNS,
+});
+
+/**
+ * I18Next instance
+ */
+export { i18next };

src/i18n/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * Formats
+ */
+export const Formats = {
+  dateWithTime: {
+    dateStyle: 'short',
+    timeStyle: 'medium',
+  },
+};

src/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './constants';
+export * from './translations';

src/i18n/translations/en.json

@@ -0,0 +1 @@
+{}

src/i18n/translations/index.ts

@@ -0,0 +1,16 @@
+import en from './en.json';
+
+/**
+ * Translation Resources
+ */
+export const resources = {
+  /**
+   * English
+   */
+  en: {
+    /**
+     * Translation
+     */
+    translation: en,
+  },
+} as const;

src/module.ts

@@ -1,4 +1,5 @@
 import { Field, FieldConfigProperty, FieldType, PanelPlugin } from '@grafana/data';
+import './i18n';
 import { CalendarPanel, MultiFieldEditor } from './components';
 import {
   AnnotationsOptions,

src/types/panel.ts

@@ -1,6 +1,11 @@
 import { AnnotationsType, Colors } from '../constants';
 import { CalendarType, View } from './calendar';
 
+/**
+ * Supported Language
+ */
+export type SupportedLanguage = 'en' | 'es' | 'fr' | 'de' | 'zh';
+
 /**
  * Calendar Options
  */

src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './annotations';
 export * from './hooks';
 export * from './time';
 export * from './calendarEvents';
+export * from './locale';

src/utils/locale.ts

@@ -0,0 +1,29 @@
+import { config } from '@grafana/runtime';
+import { DefaultLanguage } from '../constants';
+import { SupportedLanguage } from '../types';
+
+/**
+ * Get User Language
+ * @param fallback
+ */
+export const getUserLanguage = (fallback = DefaultLanguage): SupportedLanguage => {
+  const locale = config.bootData.user.language;
+  const lang = locale?.split('-')?.[0];
+
+  /**
+   * Validate supported languages
+   */
+  switch (lang) {
+    case 'en':
+    case 'es':
+    case 'fr':
+    case 'de':
+    case 'zh': {
+      return lang;
+    }
+
+    default: {
+      return fallback;
+    }
+  }
+};