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

  • hdenton
    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?
  • Ben
    Replied on April 13, 2016 at 11:44 AM

    A similar CSS will be used as on the other thread here: https://www.jotform.com/answers/816479 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: https://form.jotform.com/61034257701952

    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:

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

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

  • hdenton
    Replied on April 13, 2016 at 12:59 PM

    This is FANTASTIC! Thank you so much!!