Multi-Style Tailwind Components 23 exercises

Identify Possible Calendar States

Here is an example of two of the calendar components side by side.


Loading exercise


Instructor: 0:00 Your first challenge is to try and make that list of possible visual states a calendar day can be in. We have two instances of the calendar that you can play with here. They are exactly the same except for one thing. I'm recording this on the 12th of December. The calendar on the left doesn't have availabilities today, whereas the one on the right has availabilities today.

0:20 What I want you to do here is try to make a list of all the possible visual styles a calendar day can be in. I'm not talking about the states in terms of logic, but really visual states a calendar day can be in. Have a play around, click around, and see what you can derive from here.

0:36 Today's calendar day has different styling, but if today is selected, it looks exactly the same as a day with availability selected, a day without ability selected. It feels pretty safe to say selected is one of these visual states a calendar day can be in.

0:52 In the code, I've created a new type called Status. To get you going, I've added this 'SELECTED' state, and then your job is to try create the other states to complete the list based on your observations.

1:04 Have a play with the calendar, and try to come up with a list that makes sense for you of what visual states or statuses a calendar day can be in. Good luck.