Calendar Screen

How to Design Your First Mobile App How to design your first mobile app
5 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $99.99
You save:  $30
List Price:  €92.18
You save:  €27.65
List Price:  £78.45
You save:  £23.53
List Price:  CA$136.63
You save:  CA$40.99
List Price:  A$150.66
You save:  A$45.20
List Price:  S$134.97
You save:  S$40.49
List Price:  HK$781.10
You save:  HK$234.35
CHF 63.92
List Price:  CHF 91.33
You save:  CHF 27.40
NOK kr736.32
List Price:  NOK kr1,051.93
You save:  NOK kr315.61
DKK kr481.39
List Price:  DKK kr687.74
You save:  DKK kr206.34
List Price:  NZ$163.04
You save:  NZ$48.91
List Price:  د.إ367.26
You save:  د.إ110.18
List Price:  ৳11,763.47
You save:  ৳3,529.39
List Price:  ₹8,335.70
You save:  ₹2,500.96
List Price:  RM470.30
You save:  RM141.10
List Price:  ₦142,731.72
You save:  ₦42,823.80
List Price:  ₨27,897.02
You save:  ₨8,369.94
List Price:  ฿3,675.65
You save:  ฿1,102.80
List Price:  ₺3,223.64
You save:  ₺967.19
List Price:  B$516.01
You save:  B$154.82
List Price:  R1,827.32
You save:  R548.25
List Price:  Лв180.25
You save:  Лв54.08
List Price:  ₩136,640.44
You save:  ₩40,996.23
List Price:  ₪369.26
You save:  ₪110.79
List Price:  ₱5,847.91
You save:  ₱1,754.54
List Price:  ¥15,721.81
You save:  ¥4,717.01
List Price:  MX$1,674.88
You save:  MX$502.51
List Price:  QR365.72
You save:  QR109.72
List Price:  P1,361
You save:  P408.34
List Price:  KSh13,198.68
You save:  KSh3,960
List Price:  E£4,729.59
You save:  E£1,419.01
List Price:  ብር5,759.79
You save:  ብር1,728.10
List Price:  Kz85,286.13
You save:  Kz25,588.40
List Price:  CLP$89,629.03
You save:  CLP$26,891.40
List Price:  CN¥711.16
You save:  CN¥213.37
List Price:  RD$5,907.53
You save:  RD$1,772.43
List Price:  DA13,457.26
You save:  DA4,037.58
List Price:  FJ$225.87
You save:  FJ$67.76
List Price:  Q778.50
You save:  Q233.57
List Price:  GY$20,983.69
You save:  GY$6,295.73
ISK kr9,608.22
List Price:  ISK kr13,726.62
You save:  ISK kr4,118.40
List Price:  DH995.96
You save:  DH298.82
List Price:  L1,768.33
You save:  L530.55
List Price:  ден5,676.49
You save:  ден1,703.11
List Price:  MOP$806.04
You save:  MOP$241.83
List Price:  N$1,843.10
You save:  N$552.98
List Price:  C$3,689.56
You save:  C$1,106.97
List Price:  रु13,341.39
You save:  रु4,002.81
List Price:  S/375.75
You save:  S/112.73
List Price:  K389.78
You save:  K116.94
List Price:  SAR375.03
You save:  SAR112.52
List Price:  ZK2,699.03
You save:  ZK809.79
List Price:  L458.70
You save:  L137.62
List Price:  Kč2,277.26
You save:  Kč683.24
List Price:  Ft35,631.69
You save:  Ft10,690.57
SEK kr742.57
List Price:  SEK kr1,060.86
You save:  SEK kr318.29
List Price:  ARS$89,340.66
You save:  ARS$26,804.88
List Price:  Bs692.46
You save:  Bs207.76
List Price:  COP$388,094.15
You save:  COP$116,439.89
List Price:  ₡51,546.97
You save:  ₡15,465.64
List Price:  L2,477.09
You save:  L743.20
List Price:  ₲754,796.40
You save:  ₲226,461.56
List Price:  $U3,856.05
You save:  $U1,156.93
List Price:  zł392.34
You save:  zł117.71
Already have an account? Log In


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.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.