How to localize the alloyui scheduler component?

Question

I am trying to fully localize the alloyui scheduler in French. Following this article: How can I get a localized version of a YUI 3 or AlloyUI component? the job is almost done. However I am still missing tips for two things: - I need the time format in the left column to be changed from 1-12am/pm to 1-24 - I don't succeed to localize the "All day" term in the left top corner (or at least a way to hide it).

Any help will be welcome

Answer 1

To change to a 24 hour clock, you need to set the isoTime attribute to true for each SchedulerView subclass that you are using.

To internationalize the strings, you need to set the strings attribute of Scheduler, SchedulerDayView SchedulerWeekView, SchedulerMonthView, SchedulerAgendaView, and SchedulerEventRecorder as well as setting YUI's lang attribute to the locale of your choice. For example, I've used Google Translate* to internationalize the Scheduler below for Spanish users:

YUI({lang: 'es-ES'}).use('aui-scheduler', function (Y) {
    var es_ES_strings_allDay = { allDay: 'todo el dia' };
    new Y.Scheduler({
        render: true,
        // https://alloyui.com/api/classes/A.Scheduler.html#attr_strings
        // https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-base.js#L606-L622
        strings: {
            agenda: 'agenda',
            day: 'día',
            month: 'mes',
            today: 'hoy',
            week: 'semana',
            year: 'año'
        },
        views: [
            // https://alloyui.com/api/classes/A.SchedulerDayView.html#attr_strings
            // https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-view-day.js#L363-L373
            new Y.SchedulerDayView({
                isoTime: true,
                strings: es_ES_strings_allDay
            }),
            // https://alloyui.com/api/classes/A.SchedulerWeekView.html#attr_strings
            // SchedulerWeekView extends SchedulerDayView: https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-view-week.js#L19
            new Y.SchedulerWeekView({
                isoTime: true,
                strings: es_ES_strings_allDay
            }),
            // https://alloyui.com/api/classes/A.SchedulerMonthView.html#attr_strings
            // https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-view-week.js#L19
            new Y.SchedulerMonthView({
                isoTime: true,
                strings: {
                    showMore: 'mostrar {0} más',
                    close: 'cerrar'
                }
            }),
            // https://alloyui.com/api/classes/A.SchedulerAgendaView.html#attr_strings
            // https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-view-week.js#L19
            new Y.SchedulerAgendaView({
                isoTime: true,
                strings: {
                    noEvents: 'No hay eventos futuros'
                }
            })
        ],
        // https://alloyui.com/api/classes/A.SchedulerEventRecorder.html#attr_strings
        // https://github.com/liferay/alloy-ui/blob/3.0.3-deprecated.65/src/aui-scheduler/js/aui-scheduler-view-week.js#L19
        eventRecorder: new Y.SchedulerEventRecorder({
            strings: {
                'delete': 'borrar',
                'description-hint': 'descripción insinuación',
                cancel: 'cancelar',
                description: 'descripción',
                edit: 'editar',
                save: 'salvar',
                when: 'cuando'
            }
        })
    });
});

* I don't recommend using Google Translate to internationalize a production application since there are many nuances to internationalization that a machine translation will miss.