Setting up Sunday as the start of the week in Date Reservation widget

Is there any CSS I can use to make my Date Reservation Widget begin on Sunday instead of Monday?

Thanks!

This is an interesting question, and quite possible as well :)

You can see how it would look by checking out the following form: https://form.jotform.com/61023862777965

Basically we just move them all to the right and then move the Sunday to the left, but there is a catch. Since Sunday is on the far right, it is not possible to simply put it on far left and have it look OK, so we need to push it down as well (You can see this on all months, but May is interesting).

Basically if the Sunday is first, the empty row is show at the top (not possible to remove).

Another interesting thing is that if the Sunday is the last month, it would jump out of the widget space (shown in July) which we can counter by adding enough space for it all of the time.

The following code does the mentioned - and as shown on the form above:

.ui-datepicker-calendar th {
    left: 38px;
    position: relative;
}
.ui-datepicker-calendar td {
    left: 35px;
    position: relative;
}
.ui-datepicker-calendar td:last-child {
    left: -227px;
    top: 28px;
}
.ui-datepicker-calendar th:last-child {
    left: -225px;
}
#reservationContainer > div {
    height: 240px;
}

You only need to add the same to the widgets custom CSS (not the form's).

Do let us know how it goes and if that is what you had in mind.

Hey Ben! I think that will probably work for me, thanks! It looks a little weird because of the column Sunday being slightly off from the rest of the rows. But over all, I like it and I think my users will too.

Thanks!

Holly

You are right Holly, good eyes :)

I have missed that one pixel going down of the row and 3 pixels on the days, but I have sorted the same out now, so this is the final code (form mentioned earlier is updated to check it out):

.ui-datepicker-calendar th, .ui-datepicker-calendar td {
    left: 35px;
    position: relative;
}
.ui-datepicker-calendar td:last-child {
    left: -227px;
    top: 27px;
}
.ui-datepicker-calendar th:last-child {
    left: -227px;
}
#reservationContainer > div {
    height: 240px;
}

This is how it looks now:

Must be the LASIK. Perfect! However, is there something in this CSS that also gray's out the selection of dates that someone has already chosen? This seems to be happening.

No, the widget in my form is the one with default settings, so the dates that can be selected are up to the setup itself.

I do however presume that you mean about the selected dates that were selected in some other submission.

This is the default way the widget works - so that one date (that was not previously selected) can be reserved.

This is great if you need to make appointments on per day basis.

Are you looking for some other functionality?

Oh I didn't realize that :-/ I may need a different widget then.

OK, this means that you are after some date entry widget instead. For this reason I have moved this to a new thread to avoid any confusion (since my colleagues would get assigned to this as well, so this allows us to follow up easily).

There we will help you with few different options that you might use.

This is the link to the new thread: https://www.jotform.com/answers/816749

I will follow up on the same shortly.

To assist you better I have created a new thread that will be answered shortly by our support team

https://www.jotform.com/answers/888141

That's awesome.  I've been wanting that for awhile now.  Works great!