I'm trying to come up with quite a tiny feature. A user (admin, rather experienced with this software) should be able to pick multiple dates (usually it will be around 15-30) that will be later displayed as non-working days in the table.

Currently, I have two approaches:

  1. User enters the setting page, goes to the section Select holidays and all options are available right away, clicking the date in the calendar is a selection of a date. Please take a look at the mockups

enter image description here enter image description here

  1. Practically the same mechanism of adding dates, but the action happens within a modal triggered with the button +Add/Edit enter image description here enter image description here enter image description here

Which of the approaches seems clearer and more suitable for the use case presented above in your opinion? I have a feeling that using modal is a bit an "overkill" to this feature although it prevents from adding items by mistake and perhaps the workflow looks more naturally.

The first approach though looks like a nice speed up and a straight forward solution, but not so very standard ergo potentially confusing.

I'd love to learn your opinions. Thanks :)

  • Would the user want to be able to label each holiday period with a name?
    – Izquierdo
    Nov 4, 2020 at 20:39
  • Who determines which holidays are observed or not? The admin must be getting requirements from someone I assume. I'm interested in what form this takes
    – Mike M
    Nov 4, 2020 at 22:45
  • @Izquierdo No, labelling holidays wouldn't be necessary here
    – A.klasa
    Nov 5, 2020 at 9:00
  • @MikeM Since the holidays are mostly national non-working days etc. it will depend on the particular team location so that their holidays are reflected in the time tracking table. Admin could often be the Team Leader or the Product Manager so they would know which days should be marked as non-working.
    – A.klasa
    Nov 5, 2020 at 9:07

1 Answer 1


If the choice is between the two approaches only I would go for the first one. You say, that the users are experienced users (admins) who will use the tool over and over again. What I would recommend is to not only use the picker as an input tool but mark the chosen dates an even differentiate the repeating dates from the one time dates. So the date can be selected and deselected in the date picker.

But I have another thought: Is the date picker the right input tool. I f the user does not have to input dates in every month or even years in advance it would be necessary to click several times to choose the month in order to pick the exact date. In my experience power users are more likely to input dates by keyboard than using a date picker when given the choice.

So my suggestion is to use a list of date input fields. Every time a date is entered add an empty input field below. On Focus you could show a date picker so the user has the choice to use the picker or type the date. Important: selected month in the date picker of the new input field should be the one in the last field since a user probably will set the dates chronologically. This way you could also provide an additional input to set a holiday name (if necessary) and the repeat yearly attribute and a delete action. Visually the date, holiday name and the yearly attribute and delete action would have to be received as one item.

  • Thank you for your insights and ideas! To make moving around the date picker easier for the user I thought about enabling editing the header with month and year of a date picker, but I'm not sure if it is technically possible. I think I'll definitely try to work with the solution you presented and see if this works for us.
    – A.klasa
    Nov 5, 2020 at 9:16

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.