UPDATE
January 12, 2021
How-To: Recreate Calendar’s iOS 14 Widget

Multiple Calendar widgets displayed decoratively

In this tutorial we are going to recreate the Calendar widget on iOS 14 step-by-step with DetailsPro.

By the end of this tutorial, you will have created this from scratch:

Completed design

This tutorial works no matter which platform you’re using DetailsPro on, so feel free to grab your preferred device, whether it’s an iPhone, an iPad, or a Mac.

Step 1

Create a new file 
Open up DetailsPro and find the blue + icon. Tap it to create a new file. Once you do, you should see a new, empty screen.

Showing the + icon on the home view of DetailsPro

Step 2

Select a size preset
Find the button that says Select Size and use it to select Small Widget. DetailsPro comes with easily selectable sizes for common frames that you’ll encounter when designing for Apple platforms. In this case, we’ll want to use Small Widget.

Select Size buttonSmall Widget selection

Now that we’ve selected a size preset, you should be able to see that the preview area has now gotten smaller and is now in the shape of a small widget.

Preview area showing widget size

Step 3

Add a Vertical Stack
Let’s add our first design element to the screen. So, if you look at the Calendar widget we want to create, you might notice that the layout of each of the elements appears to follow a vertical arrangement. There’s the SATURDAY up at the top, and then something under it, and then something under that. So we are going to use a Vertical Stack to create this design. 

Completed Calendar Widget

Find the first insert + button, tap it, and select Vertical Stack.

Design Element Insert ButtonVertical Stack Button

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 41 58

Now we’ve got a Vertical Stack added to our design, but we still aren’t seeing anything. Don’t worry! This makes sense because the Vertical Stack is still empty. We need to add some design elements inside the stack to give the stack something to show.

Step 4

Add our first lines of text
We’re going to start at the top of the design and work our way down, so let’s add two lines of text to start: one for “SATURDAY” and one for “3″.

Tap the + button that has now appeared inside the Vertical Stack indentation.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 41 58

Tap Text to add a text design element.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 42 07

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 43 45

Now we can see our first added text element. In DetailsPro, design elements appear as selectable, draggable objects in the editing area. They also appear in the live preview area. Since we just added this design element, it’s already selected. 

Change the text to  “SATURDAY”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 50 16

Now we can add another text element for the next line. Tap the next + button after SATURDAY and add another text element.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 50 19Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 50 21Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 50 25

Change the text to “3”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 50 31

Step 5

Use Spacers to move the two lines up
The Calendar widget features these two lines up towards the top of the container and in the corner, so we are going to have some fun with stacks to get these two lines there.

Let’s keep these two lines together as a pair inside the same Vertical Stack. But then, how do we move them? 

We are going to use a Horizontal Stack and a Spacer to tell SwiftUI where want these two lines to go. 

First, long-press on the Vertical Stack we have now.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 44

Next, let’s create a new Horizontal Stack and put this Vertical Stack inside it in one move (fancy, eh?).

Tap New Stack With Item…

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 47

Next, tap New Horizontal Stack.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 49Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 52

Now we’ve got a Horizontal Stack with our original Vertical Stack inside it. And now that we have this Horizontal Stack, we can use Spacer to place things horizontally.

Let’s do that now. 

Find the + button that is inside the Horizontal Stack and after the Vertical Stack. (Not the one directly after 3—that + button is for adding things directly into that Vertical Stack. We want to add something to the Horizontal Stack that will be on the same level as the Vertical Stack.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 52Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 55Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 59

Now we’ve pushed everything over to the left. Horizontal Stack lays itself out in left-to-right or right-to-left directions based on the language of your device. (Hint! This is why we use leading and trailing instead of explicitly left and right. It allows us to use whichever side is appropriate for a user’s device.)

Basically, all Spacer does is take up the rest of the… space. And it’ll take up space horizontally or vertically, depending on the stack that it’s in.

So! Let’s use this new trick to push our text towards the top too. Can you guess where the next Spacer is going to go?

If you guessed at the bottom of a Vertical Stack, you’re right! No worries if you didn’t guess it. Like all good things, learning and experience just come with practice. That’s why we’re here. 

We need a new Vertical Stack to put our buddies in here. Let’s use the same fancy trick from earlier.

First, long-press on our Horizontal Stack

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 55 59

Tap New Stack with Item…

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 02

Tap New Vertical Stack.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 04Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 08

And now we can add in a Spacer inside our new Vertical Stack to take up any remaining space after other elements, therefore pushing our text up!

Tap the appropriate + button.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 08

Tap Spacer.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 11Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 15

Now we can see our text has moved to the top. It doesn’t look right though, because it’s pushing right up against the top of the widget. We definitely want a little bit of padding there.

Time to use something new: modifiers. Modifiers are how you can change sizes, colors, backgrounds, you name it. And we add modifiers to things. So we can add a modifier to our text element, for example.

We are going to use the Padding modifier to add padding to our Vertical Stack. This will instantly give us the spacing we are looking for to ease our eyes as we look at this current monstrosity. 

Tap Vertical Stack to select it (we want the one all the way at the top).

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 19

Find Suggested Modifiers and tap to add a Padding modifier. 

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 19

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 22

Now we can see in our Modifiers list that we have one modifier. We can also see in the live preview area that our design elements now have padding between them and the edge of the widget. 

Let’s change the amount of padding to match the Apple Human Interface Guidelines for widgets in iOS 14. 

Tap on the Padding modifier.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 22

Tap Amount.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 24

Tap in 16 as the value.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 27

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 40

Now that we have the proper padding around our widget design, we can move on. Let’s continue by lining up our text on the leading side.

Tap the inner Vertical Stack that contains the text to select it.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 40

Tap Alignment.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 40 2

Select Leading.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 56 43

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 08

Now we can see that our text is aligned, since we selected Leading alignment for all design elements within the Vertical Stack.

Step 6

Add style with Font modifiers
Time for fonts! Let’s set the fonts for each text element.

Tap “SATURDAY”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 08

Tap to add a Font modifier from Suggested Modifiers. 

Tap the newly added Font modifier.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 11Tap Custom.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 13

Tap in 10 for size and Medium for weight. 

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 31

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 33

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 38

Add a Color modifier from Suggested Modifiers.

Select the color red.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 38

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 57 40

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 05

Tap the element.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 07

Add a Font modifier again, this time setting the size to 32 and the weight to Light.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 12

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 15

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 21

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 24

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 58 29

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 07

We’re officially done with the top section of the widget! Great job so far. Now let’s seal the deal and add in the rest.

Step 7

Add bottom section
We added a picture of the finished widget here again to help us look ahead for what’s left:

So we put the SATURDAY and the 3 together with a Vertical Stack—hopefully that part feels simple to you when you look back. 

Now how should we make the bottom part? We’ll give away one secret right now: we can make that green bar by using a shape available in SwiftUI called Rounded Rectangle. And then for the three lines of text, next to it, we can use a simple Vertical Stack

So we are going to make one Horizontal Stack, place a Rounded Rectangle in it, and then add a Vertical Stack with three text elements.

Frame 2 2

Let’s go!

First, collapse this Horizontal Stack

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 07

Add a new Horizontal Stack.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 09

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 11

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 14

Add a Rounded Rectangle.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 14

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 17

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 27

Step 8

Style the Rounded Rectangle

Add a Frame modifier.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 27

Set the width to 4.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 29

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 31

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 36

Add a Spacer to push the Rounded Rectangle over.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 42 copy

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 42

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 45

Step 9

Make the Rounded Rectangle green

Add a Color modifier, and set it to green.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 45

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 47

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 51

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 14 59 54

Step 9

Add a Vertical Stack for the event details.

We are ready to add those three lines of text that give you a little preview of your next event. 

Add a Vertical Stack.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 04

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 05

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 35

Step 10

Add text for the name of the event, the location, and the time.

Add a text element.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 35

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 38

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 51

Change the text to “Design Review”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 00 58

Add a Font modifier.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 09

Change the font to a size of 13 and a weight of Medium.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 26

Add another text element.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 30

Change the text to “Apple Park”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 37

Add a Font modifier and select the Caption style.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 39

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 43

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 45

Step 11

Change Vertical Stack to use Leading alignment
We want each line of text to be aligned on the leading edge of the overall stack, so let’s change this from the default which is Center.

Change the alignment to Leading.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 45 copy

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 45

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 48 copy

Step 12

Add text element for the event’s time.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 48

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 01 51

Change the text to “4:00 PM to 5:00 PM”.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 02 35

Add a Font modifier and select the Caption style.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 02 39

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 03 43

Add a Color modifier and select the Secondary color.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 03 48

We’ve officially got all the elements in the design! Great job. 

Step 12

Final cleanup
In this last step, we are just going to make some quick tweaks to add that final polish. 

Change the spacing of the Vertical Stack from “Default” to 2.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 03 58

In the bottom section, we had used a Spacer to push our green bar over, but we don’t need this Spacer taking up any of this valuable space now that we have filled it out more. Let’s remove it and use the Vertical Stack’s alignment instead to make sure things are lined up right.

Select and delete the Spacer in the Horizontal Stack of the bottom section.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 05 46 copy

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 05 46

Select the Vertical Stack all the way at the top.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 07 19

Change the Alignment to Leading.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 07 39

Change the Spacing to 8.

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 07 43

We are now officially done! You did it! 🎉

Sit back and marvel at this beautiful design you brought to life:

Simulator Screen Shot  iPad Pro  11 inch  2nd generation  2021 01 12 at 15 08 41

It is incredibly rewarding for us to know that DetailsPro is helping you with your design work. Thank you for following DetailsPro on our blog and reading along with this post.

We can’t wait to see all the amazing designs you’ll create.

DetailsPro