Setting up Sunday as the starting day of the week instead of Monday in Check In Check Out widget

  • Profile Image
    Asked on April 13, 2016 at 11:07 AM
    That one's nice! And just to make sure I'm thoroughly a pain, could you send me the CSS to make that calendar begin on Sunday instead of Monday?
  • Profile Image
    Answered on April 13, 2016 at 11:44 AM

    A similar CSS will be used as on the other thread here: it is however a bit different. This is the CSS that you should add to make the Sunday the start of the week:

    .dp_daypicker {
        background-color: #e8e8e8;
    .dp_daypicker td, .dp_daypicker th {
        left: 30px;
        position: relative;
    .dp_daypicker td:last-child, .dp_daypicker th:last-child {
        left: -186px;
    .dp_daypicker td:last-child {
        top: 27px;
    .dp_daypicker tr:nth-child(2) td:last-child::before {
        content: "";
        display: block;
        height: 1px;
    .dp_daypicker tr:last-child td:last-child {
        display: none;

    This is how it would look on a form:

    Now this widget has a sort of bluish grid that is not really shown, but due to the moving it becomes visible at one segment. To hide it the first row has to be 1px higher than the rest of the days in the calendar. So that is something to note, otherwise it should look properly:

    Do let us know of course how it looks for you :)

  • Profile Image
    Answered on April 13, 2016 at 12:59 PM

    This is FANTASTIC! Thank you so much!!