Themes Store

    Translating the Booking Date Picker premium

    In this article we’ll go through translating the booking calendar.

    All themes developed by Qode are fully translatable. However if you wish to translate the calendar booking, there is one specific thing that needs to be done in order to achieve this.

    So please download the datepicker.js file from this site: http://keith-wood.name/datepick.html

    11.png

    Choose the corresponding file with your language, download it and save it on your computer.

    Open that file in a text editor and find the dayStatus value and switch its format to:

    dayStatus: 'yyyy-mm-dd'

    Please note that this is the only appropriate format to use (if you want everything to work properly).

    Additionally, we recommend you activate the child theme and put the downloaded file in your child theme.

     

    The next step involves adding these two functions to the functions.php file of the child theme. (Make sure that the locale of the datepicker.js file is the same as the locale in the function).

     

    For instance, the code below is used for the Alloggio Theme, but you can adapt it for your theme by modifying specific function names and language codes within the function.php file.

    Simply check the other function names in your theme's functions.php file and then replace 'alloggio_' with your theme's function name ('alloggio_core_filter'). Next, search for 'datepick-' and replace the language code (in this case: 'datepick-es') with your desired language code (e.g., 'datepick-it' for Italian).

     

    if ( ! function_exists( 'include_localization_datepick_scripts' ) ) {
      function include_localization_datepick_scripts() {
        wp_enqueue_script( 'datepick-es', get_stylesheet_directory_uri() . '/jquery.datepick-es.js', array( 'datepick' ), true );
    }
    add_action( 'wp_enqueue_scripts', 'include_localization_datepick_scripts', 999 );
    }


    function change_default_calendard_date_format( $variable, $type ) {

    if ( $type === 'date-format' ) {
    $variable = 'Y-m-d';
    } elseif ( $type === 'date-format-js' ) {
    $variable = 'yyyy-mm-dd';
    } elseif ( $type === 'datepick-date-format' ) {
    $variable = 'Y-m-d';
    }

    return $variable;
    }

    add_filter( 'alloggio_core_filter_default_room_variables', 'change_default_calendard_date_format', 10, 2 );

     

    This is the procedure that can be followed if you are only translating the calendar from one language. Another helpful step will be described below and concerns a multi-language environment.

     

    MULTILANGUAGE:

    So if you have a multi-language website and you wish to enable switching between different languages, you can use the get_locale() function which will enable you to check if the current language corresponds to the script that needs to be loaded.

    For example, you can ensure that the Italian localization is loaded only on Italian pages by using this code instead of the one sent earlier:

    if ( ! function_exists( 'include_localization_datepick_scripts' ) ) {
      function include_localization_datepick_scripts() {
        if(get_locale() == "it_IT") {
        wp_enqueue_script( 'datepick-it', get_stylesheet_directory_uri() . '/jquery.datepick-it.js', array( 'datepick' ), true );
      }
    }
    add_action( 'wp_enqueue_scripts', 'include_localization_datepick_scripts', 999 );
    }

    function change_default_calendar_date_format( $variable, $type ) {
      if ( $type === 'date-format' ) {
        $variable = 'Y-m-d';
      } elseif ( $type === 'date-format-js' ) {
        $variable = 'yyyy-mm-dd';
      }
    return $variable;
    }

    add_filter( 'alloggio_core_filter_default_room_variables', 'change_default_calendar_date_format', 10, 2 );
    //This part is responsible for the language check:

    if(get_locale() == "it_IT") {
      wp_enqueue_script( 'datepick-it', get_stylesheet_directory_uri() . '/jquery.datepick-it.js', array( 'datepick' ), true );
    }

    //If you plan to add more languages (for example, French), you can use a structure like this:
    if(get_locale() == "it_IT") {
      wp_enqueue_script( 'datepick-it', get_stylesheet_directory_uri() . '/jquery.datepick-it.js', array( 'datepick' ), true );
    } else if (get_locale() == "fr_FR") {
      wp_enqueue_script( 'datepick-fr', get_stylesheet_directory_uri() . '/jquery.datepick-fr.js', array( 'datepick' ), true );
    }

    You can chain this indefinitely to add as many languages as you need. This will ensure you have translations available for all your chosen languages.

    Related articles