I'm the product owner for www.staffsquared.com ,a HR app for small and medium sized businesses.

People can book time off via a calendar UI in our app. They used to be able to select their from and to date for time off using the following controls:

From date: [date picker] [Full day/AM/PM drop down]

To date: [date picker] [Full day/AM/PM drop down]

I recently implemented a working pattern feature and as part of this new feature changed the UI for booking time off. The controls used are now:

From date: [date picker] [HH:mm time picker]

To date: [date picker] [HH:mm time picker]

This allows our users to book a couple of hours off rather than just full and half days. Useful for doctors appointments, short periods out the office, and just a lot more flexible.

The first problem is...a number of customers are upset that their staff can no longer simply select a full day or half days. They feel this date/time approach is too granular, and want the option to book full days/half days (AM/PM) restored.

Rather than switch back I plan to implement an option so they can choose either approach. I plan to add this option at user level rather than account wide. The second problem is, it's possible to book time off for multiple people using the one pop out, so what do you show if one is on hours and the other is set to full day.

Here's a screenshot of the time off booking pop out as it exists now:

New time off booking UI

Would be incredibly grateful if any of you clever people have any ideas. Thanks :)

2 Answers 2


I would make the options super simple for the user.

I see 3 basic scenarios:

  1. Booking an entire day off
  2. Booking 1/2 a day off
  3. Booking a custom portion off (e.g. I'm leaving at 2pm on Friday)

I also see these scenarios occurring by frequency in that order (full day, 1/2 day, custom)

As a result I would actually present a UI that gives these 3 options up front, defaulting to a full day... and only if they select the other options, show further parts.

enter image description here

If you pick Full, AM, or PM that's it.. there's nothing else for the user to do.

However if they pick custom, then show the time controls.

  • Thanks for your feedback, very useful. How would you suggest the approach to have a Full Day | AM | PM | Custom option should work for two dates with a start and an end date? For example, one might wish to book a full day on the start date, but only a half day on the end date. This means that we would need toggle buttons for both dates doesn't it?
    – user41584
    Oct 8, 2014 at 15:57

I had this same dilemma at my office. We solved it by putting in a check box that had the label: "All day event" If a user checked this box, it would automatically grey out the times so they could not choose a time, and it would book that person off for the whole day. If the user is taking a week off for vacation, they would select "All day event" and select the dates of their vacation and this would book each day off that is selected between the start and end date.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.