Documentation keyboard_arrow_right Calendar keyboard_arrow_right International

Internationalization

Customize the Calendar component for different languages and regional settings.

Spanish Calendar Example

Translate to Spanish and set Monday as first day:

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>

<div id='calendar'></div>

<script>
calendarjs.setDictionary({
    'January': 'Enero',
    'February': 'Febrero',
    'March': 'Marzo',
    'April': 'Abril',
    'May': 'Mayo',
    'June': 'Junio',
    'July': 'Julio',
    'August': 'Agosto',
    'September': 'Septiembre',
    'October': 'Octubre',
    'November': 'Noviembre',
    'December': 'Diciembre',
    'Sunday': 'Domingo',
    'Monday': 'Lunes',
    'Tuesday': 'Martes',
    'Wednesday': 'Miércoles',
    'Thursday': 'Jueves',
    'Friday': 'Viernes',
    'Saturday': 'Sábado',
    'Done': 'Hecho',
    'Reset': 'Restablecer'
});

const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    startingDay: 1
});
</script>
</html>

import { Calendar } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

calendarjs.setDictionary({
    'January': 'Enero',
    'February': 'Febrero',
    'March': 'Marzo',
    'April': 'Abril',
    'May': 'Mayo',
    'June': 'Junio',
    'July': 'Julio',
    'August': 'Agosto',
    'September': 'Septiembre',
    'October': 'Octubre',
    'November': 'Noviembre',
    'December': 'Diciembre',
    'Sunday': 'Domingo',
    'Monday': 'Lunes',
    'Tuesday': 'Martes',
    'Wednesday': 'Miércoles',
    'Thursday': 'Jueves',
    'Friday': 'Viernes',
    'Saturday': 'Sábado',
    'Done': 'Hecho',
    'Reset': 'Restablecer'
});

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    startingDay: 1
});

import React, { useEffect } from 'react';
import { Calendar } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    useEffect(() => {
        calendarjs.setDictionary({
            'January': 'Enero',
            'February': 'Febrero',
            'March': 'Marzo',
            'April': 'Abril',
            'May': 'Mayo',
            'June': 'Junio',
            'July': 'Julio',
            'August': 'Agosto',
            'September': 'Septiembre',
            'October': 'Octubre',
            'November': 'Noviembre',
            'December': 'Diciembre',
            'Sunday': 'Domingo',
            'Monday': 'Lunes',
            'Tuesday': 'Martes',
            'Wednesday': 'Miércoles',
            'Thursday': 'Jueves',
            'Friday': 'Viernes',
            'Saturday': 'Sábado',
            'Done': 'Hecho',
            'Reset': 'Restablecer'
        });
    }, []);

    return <Calendar type="inline" startingDay={1} />;
}

<template>
    <Calendar type="inline" :startingDay="1" />
</template>

<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Calendar },
    mounted() {
      calendarjs.setDictionary({
        'January': 'Enero',
        'February': 'Febrero',
        'March': 'Marzo',
        'April': 'Abril',
        'May': 'Mayo',
        'June': 'Junio',
        'July': 'Julio',
        'August': 'Agosto',
        'September': 'Septiembre',
        'October': 'Octubre',
        'November': 'Noviembre',
        'December': 'Diciembre',
        'Sunday': 'Domingo',
        'Monday': 'Lunes',
        'Tuesday': 'Martes',
        'Wednesday': 'Miércoles',
        'Thursday': 'Jueves',
        'Friday': 'Viernes',
        'Saturday': 'Sábado',
        'Done': 'Hecho',
        'Reset': 'Restablecer'
      });
    }
}
</script>

Configuration

Starting Day

Set first day of week with startingDay (0=Sunday, 6=Saturday):

Region Day Value
USA, Canada, Japan Sunday 0
Europe, Asia, Latin America Monday 1
Middle East Saturday 6

Related

Edit this page on GitHub