The project 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 project 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:

localization: {
  timeDateFormat: '12h-mdy-sun'

It supports two different 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:

localization: {
  strings: {
    submitText: 'Enviar',
    successMessageTitle: 'Gracias!',
    successMessageBody: 'Se ha enviado una invitación a:<br /> %s <br /><br /> Por favor acepte la invitación para confirmar la reserva.',
    timezoneHelperLoading: 'Cargando..',
    timezoneHelperDifferent: 'Tu zona horaria es %s horas %s de %s (el calendario se muestra a tu hora local)',
    timezoneHelperSame: 'Estás en la misma zona horaria que %s'

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)

bookingFields: {
  name: {
    placeholder: 'Nombre'

Making the calendar fully localized

The 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 src=""></script>
<script src=""></script>
<script src="//"></script>
  window.timekitBookingConfig = {
    widgetId: '6a6c24ce-41a6-4114-9c15-de9ec3d92630',
    fullCalendar: {
      locale: 'es'
    localization: {
      timeDateFormat: false

There are four things to note here:

  1. 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
  2. The defer attribute on the all the <script> 's need to be removed to ensure synchronous loading of all the files.
  3. We're letting fullcalendar know which language to load in the config with the locale: 'es' line
  4. We're disabling the timeDateFormat 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 gist 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.

Did this answer your question?