Internationalization and localization

To set a custom language you can apply default preset. The default preset automatically sets dates and times internationalization.

Additionally, you can modify all the phrases and texts inside the calendar.

All the setting is done inside the locale object inside the ZaptimeConfig.

Preset

Languages use ISO 639-1 codes (en, de, cs, sk, pl, fr, es, it, nl, pt, sv, fi, ro, ...). The preset sets the date-fns locale used for month names, weekday headers and date formatting, and selects the default texts.

Default texts are available for: English, Spanish, Polish, French, German, Czech, Slovak, Portuguese, Swedish, Dutch, Italian, Finnish, Romanian.

Your language is missing? Contact us on support@zaptime.app we will add it!

const config = {
  locale: {
    preset: "en",
  },
};

Start day of the week

You can set the start day of the week setting:

const config = {
  locale: {
    startDayOfWeek: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat",
  },
};

Headers

Name the day shortcuts inside days header

const config = {
    locale: {
         headers: {
            mon: 'Mon',
            tue: 'Tue',
            wed: 'Wed',
            thu: 'Thu',
            fri: 'Fri',
            sat: 'Sat',
            sun: 'Sun',
        };
    }
}

Calendar texts

Additional texts inside basic calendar

const config = {
    locale: {
         texts: {
            introduction: '',
            chooseDate: 'Choose date',
            noTimeSlotAvailable: 'There is no time slot available for chosen month.',
            choosePreferredTime: 'Choose preferred time',
            pickTime: 'Pick time',
            showNextMonth: 'Show next month',
        };
    }
}

Confirmation form

Texts inside the booking form, the reschedule confirmation and the error states. Field labels themselves come from the booking form in the dashboard.

const config = {
  locale: {
    confirmationForm: {
      confirmBooking: "Confirm booking",
      reschedulingEvent: "Rescheduling event",
      addGuests: "Add guest",
      slotNoLongerAvailable: "The selected time slot is no longer available.",
      rescheduleNotAllowed: "This reservation can no longer be rescheduled.",
      buttons: {
        confirmBooking: "Confirm booking",
        reschedule: "Reschedule",
        goBack: "Go back",
      },
    },
  },
};

Paid event types additionally use confirmationForm.payments for the billing form labels; see the locale reference.

Dashboard texts

Every text can also be edited per event type in the Zaptime dashboard. Local values override dashboard values key by key, so pass only what your app has to control.

Hide time preferences

When enabled, it hides setting Timezone and picking a time format.

Defaults to false

const config = {
  locale: {
    hideTimePreferences: true | false,
  },
};