Calendar alignment issues

[jancavan]

I'm working on adding timezone when scheduling posts/pages and noticed a few things we can improve to make our calendar look better. Looking at the current calendar:

• Days are misaligned with the corresponding days of the week
• Month/year is off-center
• Entire calendar is off-center within the card
• Days that fall outside of the current month are missing (which I think is pretty non-standard for calendars. This means I have to go over another month if I happen to be looking for a day that falls outside the month I'm on)
• Help link is misaligned
• The hour and date fields can contain more than 2 digits
• The year field can contain more than 4 digits (it's trying to be scalable, but might be a bit much?)

Here's a mockup addressing the items mentioned above.

I also:

• Expanded the month dropdown to get rid of the extra white space on its right
• Updated the left/right arrows:
  -- to use the ones we are using in the Welcome modal
  -- use darker colors. The arrows are really faint right now, they almost look like they're disabled
• Another idea, although I missed including it in the mockups, is to condense AM/PM into a dropdown

Out of curiosity, do we need "Calendar Help"? Maybe "Navigating with a keyboard" might be helpful, but "Click to Select" is not necessary it seems?

[spencerfinnell]

When using DatePicker (no time) there is an extra border at the top as well:

[mapk]

@jancavan, really good! Looking at the current and your proposed design solution is night and day.

I've got a bit of feedback:

1. Change or Edit?

Do we use the word, "Change" for editing in other areas? I noticed in the wp-admin we tend to use the word "Edit." Are you opposed to that option?

2. AM PM

I'm not entirely sure if we need AM/PM as toggles or a dropdown. We can check with Accessibility Team on that.

3. Calendar help

This, I believe, is carried over from the Classic editor. Removing the "click to select" feels okay, but I'd leave the keyboards instructions.

4. Additional link missing

Keep in mind that there is also a recent change that brought a "reset" link into the DatePicker now.

[jancavan]

Do we use the word, "Change" for editing in other areas? I noticed in the wp-admin we tend to use the word "Edit." Are you opposed to that option?

I only saw one in account settings, although I am fine using "edit".

[mapk]

Yea, let's go with "Edit." I know "Edit" appears all over the wp-admin.

Oh BTW, the "reset" link is only visible if you've scheduled a post. Also, how does the "Edit" option you're presenting work with post scheduling? Have you thought through that flow?

[jancavan]

Yes, my thought is for it to just go to /settings/general. But I'd really like for uniformity in the timezones in the calendar and in settings. And for the timezones to be more helpful - ie: with offset and example city instead of just city names and ambiguous offsets.

[carolinan]

I believe the alignment issues have been solved. Is adding a reset link still relevant?
Current design:

[skorasaurus]

think all of these issues are now resolved except for "Days that fall outside of the current month are missing (which I think is pretty non-standard for calendars. This means I have to go over another month if I happen to be looking for a day that falls outside the month I'm on)"