Localization

English (en-US) is built into @dayflow-scheduler/core. Any other language comes from the shared localization plugin, which is the same package used by DayFlow Calendar; the namespace option is what points it at the scheduler's message set.

Installation

npm install @dayflow/plugin-localization

Usage

import { useSchedulerApp, DayflowScheduler } from '@dayflow-scheduler/react';
import { createLocalizationPlugin, zh, ja } from '@dayflow/plugin-localization';

export function MyScheduler() {
  const app = useSchedulerApp({
    resources,
    events,
    locale: 'zh-CN',
    plugins: [
      createLocalizationPlugin({ locales: [zh, ja], namespace: 'scheduler' }),
    ],
  });

  return <DayflowScheduler app={app} />;
}

import { useSchedulerApp } from '@dayflow-scheduler/vue';
import { createLocalizationPlugin, zh, ja } from '@dayflow/plugin-localization';

const app = useSchedulerApp({
  resources,
  events,
  locale: 'zh-CN',
  plugins: [
    createLocalizationPlugin({ locales: [zh, ja], namespace: 'scheduler' }),
  ],
});

import { SchedulerApp } from '@dayflow-scheduler/angular';
import { createLocalizationPlugin, zh, ja } from '@dayflow/plugin-localization';

app = new SchedulerApp({
  resources: this.resources,
  events: this.events,
  locale: 'zh-CN',
  plugins: [
    createLocalizationPlugin({ locales: [zh, ja], namespace: 'scheduler' }),
  ],
});

import { createSchedulerApp } from '@dayflow-scheduler/svelte';
import { createLocalizationPlugin, zh, ja } from '@dayflow/plugin-localization';

const app = createSchedulerApp({
  resources,
  events,
  locale: 'zh-CN',
  plugins: [
    createLocalizationPlugin({ locales: [zh, ja], namespace: 'scheduler' }),
  ],
});

Options

Option	Type	Default	Description
`locales`	`DayflowLocale[]`	Required	Locale objects to register.
`namespace`	`string`	`'scheduler'`	Message namespace to load. The plugin infers `'scheduler'` when it detects a scheduler locale registry, but passing it explicitly is safer.

Available Locales

Export	Language	Locale code
`zh`	Chinese	`zh-CN`
`ja`	Japanese	`ja-JP`
`ko`	Korean	`ko-KR`
`fr`	French	`fr-FR`
`de`	German	`de-DE`
`es`	Spanish	`es-ES`

English needs no registration.

Switching Language at Runtime

app.setLocale('ja-JP');

const { locale } = app.getState();

The scheduler re-renders with the new strings immediately, provided that locale was registered at construction time.

Custom Locales

For a language the package does not ship, pass a DayflowLocale object with scheduler strings under packages.scheduler:

import { createLocalizationPlugin } from '@dayflow/plugin-localization';
import type { DayflowLocale } from '@dayflow/plugin-localization';

const ptBR: DayflowLocale = {
  code: 'pt-BR',
  // Calendar namespace: only needed if the same locale also serves a calendar.
  messages: { today: 'Hoje' },
  packages: {
    scheduler: {
      today: 'Hoje',
      tomorrow: 'Amanhã',
      previousPeriod: 'Período anterior',
      nextPeriod: 'Próximo período',
      day: 'Dia',
      week: 'Semana',
      month: 'Mês',
      quarter: 'Trimestre',
      year: 'Ano',
      resources: 'Recursos',
      search: 'Pesquisar',
      noResults: 'Nenhum evento encontrado',
      // …remaining SchedulerMessages keys
    },
  },
};

createLocalizationPlugin({ locales: [ptBR], namespace: 'scheduler' });

The packages.scheduler object implements SchedulerMessages, which covers navigation labels, view names, the search panel, the event detail editor, and style-picker labels. Copy a built-in locale as a starting point to see every key:

import { zh } from '@dayflow/plugin-localization';

const keys = Object.keys(zh.packages.scheduler);

Missing keys fall back to English rather than rendering blank.

useSchedulerApp: the locale config option and setLocale.
Plugins Overview: installing and accessing plugins.

On this page