Selecting non-working days/holidays in settings - what would be the best approach?

Question

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

2. Practically the same mechanism of adding dates, but the action happens within a modal triggered with the button +Add/Edit

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 :)

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.