The booking widget is in English out-of-the-box, but you can change the language in most parts of the widget with some additional settings. It's relatively easy if you have a few coding skills, and even if you don't, we'll do our best to walk you through it.

In this article, we'll be translating it all to Spanish 🇪🇸 (pardon my horrible language skills)

Note: we recommend that you read this introduction article to code customizations of the booking widget before you begin.

Changing time and date format

We offer a shorthand setting that defines some sane defaults across all timestamps in the widget:

ui: {
  time_date_format: '12h-mdy-sun'
}

It supports two different preset formats:

12h-mdy-sun - US-style 12-hour clock with weekdays starting on Sunday and dates displayed in month-day-year
24h-dmy-mon - European-style 24-hour clock with weekdays starting on Mondays and dates displayed in day-month-year

If none of these applies to your context, you can override the specifics - please see the source code for reference.

Changing text strings

Submit button text, success message and messages shown in the timezone helper can be modified too. Here's how:

ui: {
  localization: {
    allocated_resource_prefix: 'con',
    submit_button: 'Reservar',
    success_message: 'Gracias por reservar!'
  }
}

Changing form field names

The form fields on the confirm/booking page have labels in English by default. You can change these like this: (only the "name" field is shown here, use the same approach for other fields)

customer_fields: {
  name: {
    title: 'Nombre'
  }
}

The booking widget relies on a JavaScript library called "FullCalendar" to render the actual week view with the time slots. A thing that's missing from the settings above is the name of the days shown in the calendar view (and a few other details). To make the calendar 100% localized to your language, we can piggyback on FullCalendar's built-in localization.

Here's how:

<div id="bookingjs"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.timekit.io/booking-js/v2/booking.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/locale/es.js" defer></script>
<script type="text/javascript">
  window.timekitBookingConfig = {
    app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
    resources: [],
    fullcalendar: {
      locale: 'es'
    },
    ui: {
      time_date_format: false
    }
  };
</script>

There are four things to note here:

The third <script> tag we've added is what loads the FullCalendar language file. Replace the "es.js" part in url with your preferred language code.
The defer attribute on the all the <script> 's need to be removed to ensure synchronous loading of all the files.
We're letting fullcalendar know which language to load in the config with the locale: 'es' line
We're disabling the time_date_format preset to ensure that we don't override FullCalendar's loaded language settings.

Full example code

Phew 😅 What a mouthful!

For your convenience, here's a JSFiddle with all the settings explained above brought together in a full example.

A note on notification emails

The built-in notification emails (e.g. sent to owner when a booking is made) is hardcoded in English and, unfortunately, cannot be changed.

Instead, we recommend that you use our webhooks to send your own emails, where you have full flexibility over the content.

Changing time and date format

Changing text strings

Changing form field names

Making the booking widget fully localized

Full example code

A note on notification emails