Localization

<script lang="ts">
  import { Scheduler } from '@sv5ui/scheduler';
  import { vi } from '@sv5ui/scheduler/locales';
</script>

<!-- locale formats dates, times and numbers through Intl.
     labels is the text of the interface. They are independent. -->
<Scheduler bind:events locale="vi-VN" labels={vi} hour12={false} weekStartsOn={1} />

// Each pack is a named export, so the bundler keeps only what you import
import { en, vi, ja } from '@sv5ui/scheduler/locales';

const packs = { en, vi, ja };
const labels = packs[user.language] ?? en;

// Or load one when the language is picked. The entry is one module, so
// this defers all thirteen together rather than one at a time.
const { de } = await import('@sv5ui/scheduler/locales');

<!-- Any subset. Missing keys fall back to English; announce merges key by key -->
<Scheduler bind:events labels={{ today: 'Now', newEvent: 'Untitled' }} />

<!-- Override on top of another pack -->
<Scheduler bind:events locale="vi-VN" labels={{ ...vi, today: 'Bây giờ' }} />

<!-- Change what a screen reader hears -->
<Scheduler
  bind:events
  labels={{ announce: { moved: (event, start) => `${event.title} is now at ${start}` } }}
/>

// src/lib/locales/sv.ts, or wherever your app keeps translations.
// Nothing registers it: you import it and pass it to labels.
import type { SchedulerLabels } from '@sv5ui/scheduler';

// A complete pack, typed so a missing key is a compile error.
export const sv: SchedulerLabels = {
  today: 'Idag',
  previous: 'Föregående',
  next: 'Nästa',
  month: 'Månad',
  week: 'Vecka',
  day: 'Dag',
  agenda: 'Agenda',
  year: 'År',
  allDay: 'Heldag',
  views: 'Vy',
  menu: 'Visa eller dölj sidopanelen',
  sidebar: 'Kalender',
  actions: 'Fler åtgärder',
  noEvents: 'Inga händelser',
  calendars: 'Mina kalendrar',
  searchEvents: 'Sök händelser',
  unscheduled: 'Oplanerat',
  newEvent: 'Ny händelse',
  createEvent: 'Skapa händelse',
  openEvent: 'Öppna detaljer',
  close: 'Stäng',
  deleteEvent: 'Ta bort händelse',
  // Counts are functions, so a language can handle plurals its own way
  more: (count) => `+${count} till`,
  dayCell: (date, count) => (count === 0 ? `${date}, inga händelser` : `${date}, ${count} händelser`),
  holidayDate: (date, holiday) => `${date}, ${holiday}`,
  weekNumber: (week) => `V${week}`,
  weekNumberLabel: (week) => `Vecka ${week}`,
  eventCount: (count) => `${count} händelser`,
  duration: (hours, minutes) => [hours > 0 ? `${hours} h` : '', minutes > 0 ? `${minutes} min` : ''].filter(Boolean).join(' '),
  grid: (view) => `Kalender, ${view}`,
  event: (event, start, end) => `${event.title}, ${start} till ${end}`,
  announce: {
    created: (event) => `Skapade ${event.title}`,
    moved: (event, start) => `Flyttade ${event.title} till ${start}`,
    resized: (event, end) => `${event.title} slutar nu ${end}`,
    deleted: (event) => `Tog bort ${event.title}`,
    updated: (event) => `Uppdaterade ${event.title}`,
    selected: (event) => `Valde ${event.title}`,
    cancelled: 'Avbrutet',
    reverted: (event) => `Kunde inte spara ${event.title}, ändringen ångrades`,
    conflict: (event) => `${event.title} ändrades någon annanstans`,
    notEditable: (event) => `${event.title} kan inte ändras`
  }
};

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { Scheduler } from '@sv5ui/scheduler';
  import { sv } from '$lib/locales/sv';
</script>

<Scheduler bind:events locale="sv-SE" labels={sv} />

<script lang="ts">
  import { mergeLabels, CalendarList, SearchBox, DateNavigator } from '@sv5ui/scheduler';
  import { vi } from '@sv5ui/scheduler/locales';

  // The standalone parts read a few keys each; hand them a complete set
  const labels = mergeLabels({ ...vi, searchEvents: 'Tìm nhanh' });
</script>

<DateNavigator {date} onSelect={(day) => (date = day)} {labels} locale="vi-VN" />
<SearchBox bind:value={search} {labels} />
<CalendarList {calendars} bind:hiddenCalendars {labels} />