How change the days of the week on calendar?

Support
#1

I need that in the calendar component the week starts on Monday and ends on Sunday, how can I do it? With timezone I have not managed to change the configuration.

#2

This is applied automatically depending on the user’s location.
You can change locale for user on the Users screen, the Language field (there is a selection of available locations from the application properties).
But I don’t know an easy way to change from the code to just the beginning of the week for the DateField.

#3

I already try to change the language and the timezone, but it does not apply to the calendar component, and it keeps starting on Sunday the week. In English only or blank language is applicable. In timezone I apply Europe / Madrid but only change the time and date when it saves in the database.2019-05-20-123945_1280x1024_scrot2019-05-20-124045_1280x1024_scrot

#4

Excuse me.
You use the Calendar control, and I write about the dateField…
The Calendar has methods for setting the first and last displayed day of the week:
setFirstVisibleDayOfWeek and setLastVisibleDayOfWeek
More details can be seen here

#5

I already tried those methods, but he does not let me put Sunday as the last day of the week, he only accepts until Saturday in a Integer number. I need it for when I want to visualize a full month.

#6

Hi,

The problem is that FirstDayOfWeek depends on the locale, e.g., SUNDAY in the U.S., MONDAY in France. Another problem is that this value isn’t supposed to be changed. I can suggest the following ways to resolve it:

  1. The fast one. Set another locale (that has Monday as the first day of the week) for the particular calendar instance. In order to do so you need to unwrap WebCalendar to Vaadin Calendar and use the corresponding method:
calendar.unwrap(com.vaadin.v7.ui.Calendar.class).setLocale(Locale.UK);
  1. Add a new locale (that has Monday as the first day of the week) to the list of available locales and use it instead of the default English.

Regards,
Gleb

#7

Thank you very much for your help,
this way if i have managed to change it.

#8

Hello,
How can I change the first day of the week for a date picker field calendar popup for Bulgarian language (attached image)?
BR,
Georgi

IMG_20191102_123333

#9

Hi,

The approach is the same, you need to obtain a Vaadin component and set a locale that has a desired first day of the week. Since DateField has a complex layout (it contains both DateField and TimeField), the correct code is as follows:

com.vaadin.ui.DateField dateField = (com.vaadin.ui.DateField) this.dateField.unwrap(CssLayout.class).getComponent(0);
dateField.setLocale(Locale.UK);

Gleb

#10

Thanks Gleb!
So no way to change it globally on application level (without messing with the Bulgarian language options). Instead I have to unwrap/setLocale on every single date picker component, right?

#11

You can change it globally:

#12

I’ve added Bulgarian, because users must use that one, but Sunday is still the first day.

#13

It appears that in Java, Bulgarian has Sunday as the first day. The following code proves that:

Locale localeBg = Locale.forLanguageTag("bg");
Calendar calendarBg = Calendar.getInstance(localeBg);
System.out.println("FirstDayOfWeek: " + calendarBg.getFirstDayOfWeek()); // Returns 1, i.e. SUNDAY

Locale localeFr = Locale.forLanguageTag("fr");
Calendar calendarFr = Calendar.getInstance(localeFr);
System.out.println("FirstDayOfWeek: " + calendarFr.getFirstDayOfWeek()); // Returns 2, i.e. MONDAY
#14

And there’s no workaround ?

#15

I can suggest creating a custom LocaleService:

package com.company.demo.web;

import com.vaadin.server.LocaleService;
import com.vaadin.shared.ui.ui.UIState;
import com.vaadin.ui.UI;

import java.util.Locale;

public class CustomLocaleService extends LocaleService {

    public CustomLocaleService(UI ui, UIState.LocaleServiceState state) {
        super(ui, state);
    }

    @Override
    protected UIState.LocaleData createLocaleData(Locale locale) {
        UIState.LocaleData localeData = super.createLocaleData(locale);
        if ("bg".equals(locale.toLanguageTag())) {
            localeData.firstDayOfWeek = 1;
        }
        return localeData;
    }
}

In order to register it, you need to create a custom AppUI implementation:

package com.company.demo.web;

import com.haulmont.cuba.web.AppUI;
import com.vaadin.server.LocaleService;

public class DemoAppUI extends AppUI {
    private LocaleService customLocaleService =
            new CustomLocaleService(this, getState(false).localeServiceState);

    @Override
    public LocaleService getLocaleService() {
        return customLocaleService;
    }
}

And register it in web-spring.xml

<bean id="cuba_AppUI" class="com.company.demo.web.DemoAppUI" scope="prototype"/>

Gleb

1 Like
#16

Worked like a charm. Thanks a lot, Gleb!