The release of V1.7, which brings comprehensive Internationalization (i18n) support to DayFlow. This update allows you to build calendar applications that speak your users’ languages.

1. Native Multi-language Support

DayFlow now includes built-in translations for the following languages:

• Chinese (zh)
• English (en)
• French (fr)
• German (de)
• Japanese (ja)
• Korean (ko)
• Spanish (es)

All UI elements, including buttons, dialogs, and labels, are automatically translated based on the configured locale.

2. How to Set the Locale

You can set the locale when initializing your calendar application using the useCalendarApp hook. You can provide a language code string, a built-in Locale object, or a custom Locale object.

Option A: Using a language code string This is the simplest way. DayFlow will look up the built-in translation.

const calendar = useCalendarApp({
  // ... other config
  locale: 'ja', // Set locale to Japanese
});

Option B: Using built-in Locale objects You can import locale objects directly from the package. This is useful if you want to ensure type safety or extend an existing locale.

import { ja, zh } from '@dayflow/core';
 
const calendar = useCalendarApp({
  // ... other config
  locale: ja, // Pass the Japanese locale object directly
});

Option C: Using a custom Locale object If you want to support a language not included in DayFlow or provide a full set of translations, you can pass a custom Locale object:

const customLocale = {
  code: 'it', // Italian
  messages: {
    today: 'Oggi',
    day: 'Giorno',
    week: 'Settimana',
    month: 'Mese',
    // ... all other translation keys
  },
};
 
const calendar = useCalendarApp({
  // ... other config
  locale: customLocale,
});

3. Custom Localization Messages

If you just want to override specific terms in the current locale (whether built-in or custom), you can provide customMessages directly to the DayFlowCalendar component.

const customMessages = {
  today: 'Today!',
  newEvent: 'New Appointment',
  // ... override other keys
};
 
return <DayFlowCalendar calendar={calendar} customMessages={customMessages} />;

4. examples for week view(default English): Chinese:

Japanese:

German:

French:

Korean:

Spanish:

What’s Next?

We are committed to making DayFlow the most flexible calendar toolkit. In future updates, we plan to add support for more languages and improve Right-to-Left (RTL) layout support.

Stay tuned for more updates!