Multi-Style Tailwind Components 23 exercises

Listing the Calendar States

There are five different statuses for calendar days that I have come up with to visually differentiate the days:

  1. Selected: This status indicates the day that is currently selected by the user.
  2. Disabled: Days in the past or out-of-range days that cannot be selected by the user are considered d
Loading solution


Instructor: 0:00 I've come up with five different statuses for the calendar days. It's very likely your list will be named different, but let's have a look at what I've come up with. The first status is the one I already hinted at and it's the selected status. That one's already in place.

0:14 Another status that made sense to me is these days in the past, or if I go six months in the future, those days that are out of range. These you can see I cannot select like I can select any other day, so those are to me disabled. The second status I'll add is disabled.

0:31 Another visual state that makes sense to me is this concept of having availability. If I change the selected day on both calendars, you can see that even if the day is today, it is styled exactly the same as any other days with availability. I will call that status, Vacancy.

0:48 Another status is the counterpart to that, days that do not have vacancy. I'll add another status called No Vacancy. We've got to be careful here because if you look at today, in the scenario where there's no vacancy, you can see that it's styled differently than any other day.

1:06 When it has vacancy, it's styled exactly the same. I think we need to add one more sneaky status, Today No Vacancy. Today No Vacancy. To me, from the thinking I've put into this, these five statuses should cover any scenario possible.

1:22 Remember, we're thinking of these statuses for visual styles. To me, a calendar day will only ever be in one of these statuses at a time. All right, let's keep going.