Aside from being weirdly recognized as James Mcvoy, the second most popular comment on
the channel in recent weeks is in regards to my calendar widget that I use on my iPhone.
This is a Widgy Widget that I created myself which, unfortunately, even though I placed
links for it, many struggled to acquire.
So, with that much interest, I figured it would be best if I show you how to make your
own calendar widget as I did in that particular video and then spice it up a bit to make it
even cooler.
Creating this widget is actually very simple, but I understand intimidation so I’ll go
slow and go step by step showing you how you can create and customize your own calendar
widget.
So, download Widgy Widget, and let’s get right to it.
Open Widgy Widget.
In the first tab Create, click on the top green button with a plus sign called Create.
Now, we are going to be creating a Medium Widget size so click on the medium size to
begin.
Creating a Widgy Widget might seem a bit intimidating at first, but it’s actually very intuitive
and simple to use.
Everything is based on layers just like in an image editing app.
To understand how the fundamental controls work, let me give you a quick example.
Let’s say I want to add a simple text.
From the layers panel, all I have to do is select Add New Layer and choose text.
Now I have a blank text layer.
I am immediately placed inside the settings of the layer that I’ve created.
If I go back, I go to the main layer stack.
If I click on the text layer, I go inside it where I can tweak it to my liking.
The basic controls that you are going to use are the positioning arrows and the size arrows.
I can increase and reposition my text layer according to my liking.
If I go through my settings tab, you’ll see that I have the option to change the font,
color, background effects, and more.
Now that you understand the basics, let’s create our awesome widget - exactly the same
one that I’ve used in my ultimate iPhone home screen setup video.
In case you haven’t seen that video, I’ll be sure to link it ad the end of this one.
What you need to know about this particular widget is that the weekly calendar is actually
a pre-built template that we just need to summon and tweak visually to our liking.
So to do that, we click on Add New Layer and scroll down to the calendar.
Once we add the calendar, the first thing we see is the default Gregorian full-month
calendar.
You can stop there and use that if you like, but in the case of my need and the video,
we want the weekly calendar only.
So, to change the type of calendar, all you have to do is enable Compact mode, and BOOM.
We are 90% closer to what we wanted to do.
On the top row, we have the weekdays, followed by a divider line and the dates below it.
Let’s have some fun and start with some customization.
The first thing that I’d like to do is adjust the positioning a bit.
I want to give it a bit of space on the top and on the bottom.
With the help of the control arrows, I can do just that.
Next, I want to change the font and the spacer or divider to match my style - a narrower
font with some nice colors.
I’ll choose the spacer to be an orange color and I’ll choose the Dan Names color to be
something warmer.
Then, I’ll scroll down and I’ll leave the remaining date colors to be white with
the exception of Sunday which I’ll make reddish-pink.
Finally, I’ll change the default system font on both the dates and the days to something
that looks sleeker like Bebas for example.
To make the calendar stand out no matter what wallpaper I use, I’ll give it a shadow.
To create the right shadow, I’ll first give the calendar a sample background in order
to see the shadow as I create it.
I’ll make the shadow black and position it a bit to the right and the bottom to be
cast at an angle (not straight behind the text).
Basically, I am offsetting it by 2 on both the X and Y axis.
Finally, I’ll reduce the shadow opacity from 100% visible to let’s say Alpha 55
percent.
Finally, I can change the current date circle to something else.
The circle is actually a round symbol that is used, so I can pretty much choose whatever
I like.
I think an oval shape looks good.
With all that, as soon as I hit the main back arrow on the top left, I will be confirming
my changes and the calendar widget will be complete.
If we try to add it to our homepage, you’ll notice that is nowhere to be found.
The reason for that is because it is not assigned to a specific slot.
With Widgy Widget you have 8 empty slots for every time of widget size.
You can create all sorts of widget and assign them to the slots to place around iOS as you
see fit.
To assign the new widget to an empty slot, all that you have to do is go to the manage
tab and click on an empty medium slot to assign it.
It will ask you to assign a theme to it, but you can ignore that prompt.
Now you can go to widgets and find the one you created.
BUT WAIT?
It doesn’t have a transparent background.
Let’s fix that quickly.
Go to your newly created widget and click on Edit.
To add a transparent background we have to place an empty background container behind
it - sort of like a dummy image.
Click on Add New Layer and select Image.
Be sure to stretch that image to the full width and height of the widget.
Once you do that, go to the image section of the menu, go to the last option Widgy and
choose Transparent Background (High Quality).
Finally, to blend in the background we have to take a screenshot of our current home screen
to help Widgy render that background behind the calendar.
Go to jiggle mode on the iPhone as if you are about to move around apps.
Scroll right to an empty home screen where you have no widets and apps and take a screenshot.
Make sure you’ve chosen the right wallpaper first.
I am currently enjoying my latest Blurred Lines V2 pack which I’ll link in the cards
and in the description below.
In fact, if you are looking for an abstract, unobtrusive wallpaper I have a very good collection
of wallpaper packs which you can browse on my website.
The wallpapers that I offer are great for any smartphone or desktop and come in as high
as 8K resolution.
Purchasing any of the inexpensive packs helps support the channel tremendously so if you
decide to buy one you have my gratitude.
So, once you have the screenshot of your setup, go to Widgy, and in the Manage tab click on
Set Transparent Background.
Here, you can add the background or the screenshot that you took for both light and dark mode,
and guess what - WE ARE DONE!
Well, almost.
An additional step you might want to take is to add a new Touch Action layer on top
of the calendar layer that will make the widget clickable and trigger to open your actual
calendar app.
From Add New Layers, scroll down and select Tap Action layer.
Position that layer across the calendar and in the action tab go to Apple’s Apps and
choose the Calendar App.
This video is brought to you by Brilliant!
Controlling the layers in Widgy Widget’s grid using the positioning and sizing inputs
reminds me of a robot vacuum cleaner grid and Brilliant’s course on Introduction to
Probability.
The lesson on Simulation that I currently took involved grids and a cute little vacuum
robot called BroomBot.
Through simulation, the course helped me understand random processes using a simulator where the
conventional analysis would be too difficult to break through.
Probability is the business of decision-making in the face of uncertainty, whether it's forecasting
the future or inferring the past.
Like the Probability course, Brilliant provides other courses for ambitious people of all
ages that replace lecture videos with hands-on, interactive problem-solving.
It is a versatile tool that allows you to learn at your own pace and on the go.
Build confidence and take advantage of Brilliant by following the first link in the description
below or visiting brilliant.org/thisise and the first 200 people to upgrade with my link
will get 20% off the annual Premium subscription.
Now, let’s spice things a bit.
I want to create a calendar Widgy that also has integrated weather information showcasing
to me what it currently feels like outside.
I’ll breeze through this setup since you should be understanding the fundamentals by
now.
First, I’ll shrink down the calendar widget that we just created and push it to the right,
leaving about two quadrants empty on the left.
In them, I’ll first add a new symbol layer.
From the symbols icons, I’ll go to smart symbols and find the NOW weather icons.
These are basically smart icons that change based on weather information.
Right now it’s sunny, but if it’s cloudy or raining, that will change accordingly.
I’ll choose the current filled-out weather icon and position it in place.
I might give it a subtle color to match the calendar on the right.
Once I’m done, I’ll add a new text layer which I’ll use to visualize the current
temperature.
In the settings of the text layer, I’ll go to the very last option which is the data
tab and I’ll tell that layer to be a dynamic text reading the current temperature.
I’ll choose weather NOW and select the Feels Like Temperature.
I’ll turn off show unit to have just the digits of the temperature.
Then, I’ll go back to visualize that temperature as I see fit.
I’ll add a circle symbol with a similar thickness to my temperature font to represent
the degrees symbol and finally, I’ll also add a tiny basic text that reads FEELS LIKE
and I’ll place it as a divider between the weather icon and the temperature.
The rest is moving around things and making tiny adjustments and spacing to make everything
look good.
An additional step might be to place a Tap Action layer above my weather portion of the
widget that will leave me to my weather app and with that the super clean and useful widget
is complete.
Be sure to check out my full iPhone home screen setup video here as well as my iPad episode
to find out how I use a combination of clever widgets, shortcuts, and focus modes to maximize
the potential of my devices.
Give this video a like and subscribe and as always, it’s been an absolute pleasure,
This is E Over and out