# Css to change datepicker calender to be mon-\>sun instead of sun-\>sat

**URL:** <https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 19, 2021, 1:42pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943 "2021-07-19T13:42:40Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 19, 2021, 1:42pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/1 "2021-07-19T13:42:41Z")

</div>

For those who want it, here is the magic! its not perfect but eh:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a0fb6982166eb02ed4ce333497c28dc677c535b5.png)  
for theme.css  
`.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; }`

this also works for the other datepicker  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7aed6351924495a02d3836a15f8008afb8863207.png)

(or for injection in a style class)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/208ce3b5032ead9c02c7e9f606b47b0ff1c9426f.png)

`} .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; }{`

---

<div class="post-metadata">

**Author:** ![michal.koblasa](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@michal.koblasa](https://forum.inductiveautomation.com/u/michal.koblasa)\
**Post date:** [November 4, 2021, 9:51am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/2 "2021-11-04T09:51:57Z")

</div>

Thank you for this, I used it.  
I have also modified the popup datepicker, to be 2x bigger for the touchscreen interaction.

---

<div class="post-metadata">

**Author:** ![thidalgo](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@thidalgo](https://forum.inductiveautomation.com/u/thidalgo)\
**Post date:** [November 6, 2022, 10:51am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/3 "2022-11-06T10:51:10Z")

</div>

Hello, It didn't work for me. What is the theme file to modify ? what is the component propertie to modify to do it in a style class ? does it work for Ignition 8.1.18 ? Thanks !

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2022, 3:19pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/4 "2022-11-06T15:19:22Z")

</div>

> [@thidalgo](#):
>
> It didn't work for me.

What didn't work for you? What did you try? Did you modify \<theme\>.css?

---

<div class="post-metadata">

**Author:** ![thidalgo](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@thidalgo](https://forum.inductiveautomation.com/u/thidalgo)\
**Post date:** [November 6, 2022, 4:46pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/5 "2022-11-06T16:46:49Z")

</div>

First I tried adding the code to the file of my theme: "common/date-range-picker.css" since I didn't know very well what file you refer whem typing .css. It didn work after restar Ignition.

Aftewards I tried to do it adding background-image properties to the date picker control as you indicate (look at the image) but it didn't work either:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4fa08fc5d1fc2f67c7973e9731439d1c024a82cd.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 7, 2022, 7:59am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/6 "2022-11-07T07:59:35Z")

</div>

The image is showing a style class. Not the style properties.  
It's a lot easier to add in css in the newest version

---

<div class="post-metadata">

**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\
**Post date:** [November 7, 2022, 12:13pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/7 "2022-11-07T12:13:05Z")

</div>

That's useful! Thanks Victor!

---

<div class="post-metadata">

**Author:** ![thidalgo](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@thidalgo](https://forum.inductiveautomation.com/u/thidalgo)\
**Post date:** [November 8, 2022, 9:21am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/8 "2022-11-08T09:21:13Z")

</div>

It Worked !!! Awesome, great job !

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 28, 2024, 3:48pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/9 "2024-02-28T15:48:53Z")

</div>

Hi @victordcq

Did you manage to find any solution for choosing start date and end date in single date calendar

This feature only available in power chart

Did you crack anything?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 28, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/10 "2024-02-28T15:55:32Z")

</div>

This does not seem to be related to this post, where was the original question for this? plz post there

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 28, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/11 "2024-02-28T15:55:44Z")

</div>

See what's going on in this thread:

> [@MultiCalendar module](https://forum.inductiveautomation.com/t/multicalendar-module/86326):
>
> Hello, I have created a MultiCalendar and MultiDatepicker module, hope here is the right place to share the module which supports Gregorian, Farsi, Jalali, Arabic, Indian calendar and it is in English, Farsi, Arabic and Hindi languages. [multicalendar.modl](https://forum.inductiveautomation.com/uploads/short-url/3QJpNxegOI4FDz96N4X8kyupb2X.modl) (43.0 KB)

---

<div class="post-metadata">

**Author:** ![Matt\_Giesbrecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matt_giesbrecht/32/64214_2.png) [@Matt\_Giesbrecht](https://forum.inductiveautomation.com/u/Matt_Giesbrecht)\
**Post date:** [June 25, 2024, 12:34am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/12 "2024-06-25T00:34:13Z")

</div>

Hi @victordcq - been reading a lot of your posts lately, thanks for all your contributions.

Starting recently (not exactly sure when), the code above is causing the body of the calendar to be offset from the month/date selector. Has anyone else seen this? Any fixes for it?

Also, with this code, the month of June displays 7 weeks, which forces scrollbars on the component. Any ideas how to get around this?

Code included below for completeness, but it is a literal copy/paste of what has been posted above.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/5754734179e9a3827ad22e7dbe5258f91535051d.png)

```python
.ia_DateRangePicker .calendarBar { grid-template-columns: none; } 
    .calendarBar > div:nth-child(1) { grid-area: 1/8/1/8 !important; } 
    .ia_DateRangePicker .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;}
    .ia_TimePickerInput--wrapper{ margin-top: 30px; }

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 25, 2024, 7:20am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/13 "2024-06-25T07:20:46Z")

</div>

Hehe welcome to the depths of css 😛

The code you provided is not the same as mine, my css does not have this offset.

```python
.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;}

```

Gitting rid of the extra week is not possible in css...  
Well it can if its a filler, but not if day one of the month is sunday

> [@Matt\_Giesbrecht](#):
>
> Also, with this code, the month of June displays 7 weeks, which forces scrollbars on the component. Any ideas how to get around this?

And while its possible to fix the height with css, it might just be safer to give the component a heigher standard size from the beginning, so that the sudden increase doesnt affect other components

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 25, 2024, 7:33am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/14 "2024-06-25T07:33:29Z")

</div>

> [@Matt\_Giesbrecht](#):
>
> `.ia_DateRangePicker`

this is wrong, there is not `_` here  
same as here

> [@Matt\_Giesbrecht](#):
>
> `.ia_TimePickerInput`

ia naming convention is not really consistent sometimes 😛  
🙈  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a1f89ee828fef17e035b5279d7605358859faa8a.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/4447774fa2291b6336962a22fdea44d972f734b7.png)

---

<div class="post-metadata">

**Author:** ![Chris\_Murphy](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@Chris\_Murphy](https://forum.inductiveautomation.com/u/Chris_Murphy)\
**Post date:** [May 14, 2025, 3:27am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/15 "2025-05-14T03:27:11Z")

</div>

Bringing this back from the dead to post a complete solution with no scrollbar.  
We have used this for ages (Thanks heaps @victordcq)

To remove the scrollbar, you can just override the height property of .iaDateRangePicker to auto.  
It's set to a fixed height by default so it can't handle the extra row.

As this is a popup, it won't mess with your page when it grows. It works with just date or date and time. There's a bit of blank space but it's acceptable IMO.

It would be nice if this component could have this feature added.  
Maybe a gateway checkbox that says, "I'm not in the USA" so all the default date formats are set sensibly and this control works properly 😜

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/217b5bba6b0ab9a73e0f45dede192656cdd71d8a.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/78b8b6ed981e32f0768cc5714bc232e9e058c676.png)

UPDATE. fix day header alignment.

```python
/*Change date time picker to start on a monday, this is a total hack*/
.iaDateRangePicker{	height: auto;}
.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; }

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 14, 2025, 6:37am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/16 "2025-05-14T06:37:56Z")

</div>

In your screenshot the headers (Mo,Tu..) are not lined up correctly, any idea why?

> [@Chris\_Murphy](#):
>
> `this is a total hack*/`

xD

Btw since than, there is a new css feature ":has" which can probably hide the access date row on top.  
I might look into it next week if i got time

---

<div class="post-metadata">

**Author:** ![Chris\_Murphy](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@Chris\_Murphy](https://forum.inductiveautomation.com/u/Chris_Murphy)\
**Post date:** [May 14, 2025, 7:07am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/17 "2025-05-14T07:07:23Z")

</div>

Good pickup, I don't know how I missed that.  
The calendarBar needs grid-template-columns set to none.

I've edited my post with the corrected css.

Thanks again.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 14, 2025, 9:39am UTC](https://forum.inductiveautomation.com/t/css-to-change-datepicker-calender-to-be-mon-sun-instead-of-sun-sat/48943/18 "2025-05-14T09:39:52Z")

</div>

ah, just forgot to copy the first line.  
no problem