Well hello again boys and girls. In this video, we'll dive in deep and design a calendar screen for our application. The calendar screen is a place where the user can pick a particular date in the month, and check to see if there are parties available for that day. Now, let's talk some real case scenarios here. There isn't a party available every single day. Most nightclubs work only for the weekends and rarely on a weekday.
That means our calendar should allow us to pick dates that are weekend or close to it. In our case, we're going to start from Thursday, all the way up to Sunday. That means Mondays, Tuesdays and Wednesdays are off to differentiate between which days are available and which are not. We're going to use a disabled state. A disabled state is a state where elements are not selectable. That means we're going to have to make them look different from the other elements.
This is usually achieved by changing the color and the facet of the. Okay, enough talking. Let's get down to business. Firstly, open up your Rectangle tool and draw a rectangle that covers the entire screen, rename it to BG and move it down to the bottom of the layer stack. Change the color of it to, you guessed it 071923. Okay, as you can see, we have a copy of our header component placed onto our canvas.
We're going to design the calendar screen to be a full screen model picker. To achieve that, we need to make some changes in our Hello. As you remember, we cannot make changes for instance. So we need to update our master component. Go to our assets panel, grab the close icon and put it over into our muscles component. align it to the top and right Make sure it snaps to the edges and go over to our components instance.
As you can see, we've replicated that icon into our instance. Now, height, the calendar icon and the ticket icon since we don't need them. Finally, change the title to our instance to pick a date. Now, let's design our actual calendar. Move back over to our assets panel and grab this arrow icon. Place it onto our canvas and align it to the left.
Make a copy of it by holding ALT and dragging it to the right. Right click on it and choose full horizontal flip it horizontal. Open up your title and type in the month November font size is 30 pixels. The font weight is bold, but change the color to the hopping that we've been using for buttons. center it onto our screen and select all the icons and the word November and group them together. Call this group calendar together.
Now we're going to create the calendar days. Grab your Type Tool again, I'm typing the word mo M for Monday. Change the font weight to book. Change the font size to 20 pixels. The color is white 80% opacity, align this work to the left edge of the screen. Now I'm going to pause the video and duplicate this six more times to represent the seven days of the week.
Welcome back. As you can see, I've created the days of the week and I've grouped them together or named them calendar days. Now let's create the actual dates. We have your Type Tool again and type in one. Change the font weight back to bold font size 30 pixels. The color is white and full capacity.
Place this onto our Thursday, since that's the beginning of the month, moving 30 pixels down. Okay, I'm going to pause the video again and create the dates over calendar. save some time. Okay guys, welcome back. As you can see, there's quite a lot going on. So let me explain.
I've aligned this calendar Heller and calendar days 50 pixels from the top of pick a date and this calendar days are 50 pixels from the bottom of the calendar Hello. I've grouped all the rows indicating the dates in space them 30 pixels each. As you can see, the days from Monday To Wednesday are different color indicating that there cannot be click. This is the disabled state that we talked earlier. All I did was change the opacity to 30%. This circle here indicates the clip state.
It's a 52 by 32 pixels in diameter, and the color is the same thing that we use for buttons. Finally, we have our call to action that applies the selected day and closes the modal. This button appears only if we selected a date. And that's it guys do not have the calendar screen design. I will see you in the next video.