Day of the week in a dropdown calendar

Hello. I have a question.
Days of the week in a dropdown calendar are shown since a Sunday and finishind Saturday. But I need to make calendar to show them since a Monday and finishing Sunday. How can I make this?

There is no setting right now to show Monday - Sunday. I will add a feature request ticket in for this.

1 Like

And the last question I have is about localization of calendar (on Russian language), where the days called:
Пн - Monday;
Вт - Tuesday;
Ср - Wednesday;
Чт - Thursday;
Пт - Friday;
Сб - Saturday;
Вс - Sunday;
Is it possible to include localisation as a preference?

While localization is something we have the ability to do for the gateway and for most client-side things, at the component level (like on the calendar) it becomes a little tricky. I’ll talk with one of the developers and see how we could go about implementing something like what you suggested.

Hi Travis,
I realize this is a very old post. But has this feature with setting the popup calendar to show Monday - Sunday been added by any chance?

Yes, it depends on the chosen language. If I put Ignition in English, I get Sun-Sat, when I put it in Dutch or French, I get Mon-Sun.

Thank you for letting me know!

I’ve changed the locale from Project properties and DateTimeInput component properties to “et” but it is still showing up Sunday to Saturday instead of M-S. Is there anything else I need to change?

Hi Kristo,
Assuming you are using Vision. I used the function system.util.setLocale() to change the locale. That was all I needed for it to work.

I’m currently working on a project in Ignition Vision 8.1.7. The popup calendar STILL doesn’t show localized time format. The week is still starting with Sunday, even if the locale is set to, in my case, Slovenian…
popup_calendar_EN

popup_calendar_SL

EDIT: Sorry, I made a mistake… :flushed:
I forgot to change the property ‘Time Display Format’ to ‘24 Hour’.
The time shows OK now, but the week is still starting with Sunday instead of Monday…
popup_calendar_SL2

Edit: seems this probably wasnt for perspective, ahwelh xd

I can do a hacky solution, tho it doesnt really work with locale, it will just always put sunday at the end.

if you use theme.css: past in this
.iaDateRangePicker .calendarBar { grid-template-columns: none; } .calendarBar > div:nth-child(1) { grid-area: 1/8/1/8 !important; } .iaDateRangePicker .calendar{grid-template-columns: none;} .calendar > div[style$="2;"]{ grid-column-start: 8 !important; grid-column-end: 8 !important;}

else you could create a style and put this in the background-image

} .iaDateRangePicker .calendarBar { grid-template-columns: none; } .calendarBar > div:nth-child(1) { grid-area: 1/8/1/8 !important; } .iaDateRangePicker .calendar{grid-template-columns: none;} .calendar > div[style$="2;"]{ grid-column-start: 8 !important; grid-column-end: 8 !important;}{

Hm i see now that the number order isnt that intuitive anymore tho ups… i could shift it all down a row, but not every month will have a filler (28) so that kidna sucks. Seems its not so easy with just css :frowning:

Best i can do with css, not to bad i guess

} .iaDateRangePicker .calendarBar { grid-template-columns: none; } .calendarBar > div:nth-child(1) { grid-area: 1/8/1/8 !important; } .iaDateRangePicker .calendar{grid-template-columns: none;} .calendar > div[style$="2;"]{ grid-column-start: 8 !important; grid-column-end: 8 !important;}.calendar > div[style^="grid-area: 1"]{ grid-row-start: 2 !important;}.calendar > div[style^="grid-area: 2"]{ grid-row-start: 3 !important;}.calendar > div[style^="grid-area: 3"]{ grid-row-start: 4 !important;}.calendar > div[style^="grid-area: 4"]{ grid-row-start: 5 !important;}.calendar > div[style^="grid-area: 5"]{ grid-row-start: 6 !important;}.calendar > div[style^="grid-area: 6"]{ grid-row-start: 7 !important;} .calendar > div[style$="2;"][style^="grid-area: 1"]{ grid-row-start: 1 !important;}.calendar > div[style$="2;"][style^="grid-area: 2"]{ grid-row-start: 2 !important;}.calendar > div[style$="2;"][style^="grid-area: 3"]{ grid-row-start: 3 !important;}.calendar > div[style$="2;"][style^="grid-area: 4"]{ grid-row-start: 4 !important;}.calendar > div[style$="2;"][style^="grid-area: 5"]{ grid-row-start: 5 !important;}.calendar > div[style$="2;"][style^="grid-area: 6"]{ grid-row-start: 6 !important;} .iaTimePickerInput--wrapper{ margin-top: 30px; }{

image
image

this also works for the other datepicker
image

1 Like