hello and welcome to this swift and xcode tutorial today we're going to be continuing
on with our calendar view in previous tutorials we've built a monthly and a weekly calendar view
today we're going to be building a daily calendar view this daily calendar view is
going to obviously work in with all of our monthly and hour weekly and instead of scrolling through
the weeks we're just going to scroll through one day at a time our daily calendar view is going
to show our list of events by hour so and even if there's no events we're just going to show
uh 24-hour time 0-23 also by popular request i'm going to show you guys how you can add
the last few days of the previous month as well as the starting few days of the next month
grade out on our monthly calendar view so stick around for that at the end
so picking back up from where we left off last time i'm going to clone the calendar example
tutorial from github and then just choosing the branches our weekly calendar changing the folder
to calendar example tutorial daily and firstly we're going to head into the main storyboard
we're going to drag in an extra view controller this is going to be for our daily calendar view
and then we're going to drag a button onto our weekly calendar and just renaming this to daily
re-adjust all of these view controllers so they fit a little bit nicer and then we're just going
to right-click from our button onto our new view controller and just selecting show as our segue
now we can change the title to daily calendar and then we're going to head to our weekly calendar
we're going to select the two buttons as well as the month text and just copy and paste them
into our daily calendar update those constraints to the new view controller so we're just going
to right click from our label and say center horizontally as well as top space to the safe
area and then we're going to head in and modify those constraints align top we're going to give it
20. and then from our button we're just going to give our left one leading space and our right one
trailing space then we can head into our side pane and set those both to zero cool and then we're
just going to grab one of our day of weeks and just say vertical spacing and center horizontally
off our label we're going to give it top space to that 20sp and then we're going to give it the full
thursday so that's what it's going to look like and then we're going to drag in a table view we're
going to give our table view some constraints so bottom leading and trailing space to the safe
area as well as top space to our thursday label and we're going to modify that constraint to be
20 and the ones to the safe area we're going to set to zero now we can add in a table view cell
we're going to adjust the height to be 70 and then we're going to drag in a label and this is going
to store the time for its constraints we're just going to give it leading space as well
as top space and adjusting them to be 10 and 5. and we're going to make this text size a little
bit bigger as well as just some placeholders so say 10 o'clock and then we're going to drag in
a view we're going to change the background color to this light gray color and we're going to give a
trailing space to the container as well as top space and bottom space and then we're going to
give it some horizontal spacing to our time label the time label spacing we're going to set to 10
but the other three we're going to set to zero and then inside our view we're going to drag
in a label i'm just going to give it leading space center horizontally and equal widths but i'm going
to change this to 0.3 and the leading space to 10 and then we just need to give our time label a
fixed width so we're just going to give it say 80. and then we're going to head in and align our text
for our time label to be aligned in the middle and then our label is it's not liking something
so just quickly check that needs a constraint for its y position so i'm just going to say center
vertically in the container and set its alignment to the center as well we're going to give it max
lines of 2 as well as one more constraint we're going to say equal heights to its parent view and
then we're going to go in and modify that to be 0.8 so 80 of the height i'm going to change the
background color to this teal color text color to white and i'm just going to rename the placeholder
text to event one and then we're going to copy and paste that next to and just give it horizontal
spacing as well as center vertically we're going to give it equal heights and ankle widths
and then hit update our view and we're going to do that one more time so we're going to have
three events sort of squares the same constraints for our third one but to our second event that's
starting to look pretty good what we're going to do next is say command n to create a new
swift file and i'm just going to name this file our daily cell and i'm going to hit command n
again create another swift file calling it daily view controller and for our daily cell we're just
going to go in and copy the class from our event cell and paste that in so we're importing the ui
kit as well and then just changing the class name to daily cell for our daily view controller we're
going to do a similar thing with our weekly view controller we're going to copy and paste the class
definition as well as importing the ui kit we're going to remove the collection view stuff because
we're not going to have a collection view in our daily view controller however we do have a table
view so we're going to click on that error message and add the protocol stubs and you can see that's
added our two table view protocol stubs and then we just need to change our class name to our daily
view controller now we can head back into our main storyboard we're going to apply our table
view cell the class of our daily cell and the same thing for our view controller we're going
to set its class to be daily view controller then we're going to right click and drag from our table
view and just assign our view controller to be our table view data source as well as our table
view delegate so i think we're ready to create some outlets so i'm just going to open up the
assistant editor i'm going to hide this left pane here and we're going to right click and
drag from our label i'm just going to call this day label i'm going to create some actions for
our buttons so the first one being next day action and the previous one being our previous day action
and you can see i've put in a typo there so to fix this we're just going to right click on the button
remove that connection fix our typo and then drag the connection again from our thursday label
we're going to call this day of week label we're going to create an outlet for our table view just
calling it our table view and for whatever reason the assistant editor isn't showing our cell i'm
going to close it off create a second window by hitting this button in the top right hand corner
i'm going to select on our daily cell right click and drag from our time label and just naming this
time and then we just need to create an outlet for each of our events so the first one i'm calling
event one event two and event three now we can close off that second view just before we finish
up with our layout stuff we're going to drag in one more button onto our daily view and link it up
so that we can create a new event from our daily calendar view so i'm just going to change the
system item to this ad just zoom out a little bit and then right click and drag onto our edit event
selecting action segue as show cool so let's head into our daily daily view controller swift file
and first thing we're going to do is just create a variable calling it hours which is an integer
array we're going to override the view did load function and just calling super view did load
and we want to create a function just calling an inittime this function is just going to populate
our hours array with all the hours of the day so just saying for hour in 0 to 23 hours append hour
and below that we're going to create another function we're going to call it set day view
we're going to call that from our viewed load and here we're just going to say day label text and
we need to go into our calendar helper and just create a month day string so we just need
to copy down our month string function and just renaming it to month day string and then changing
the formatter to include days then i'm going to scroll down because we also want a day of week
function to return either monday tuesday wednesday or thursday so we're just going to say weekday as
string and it's going to return a string and then we're going to call our weekday function
giving it the date that's passed through and if the case is 0 we're going to return sunday
the default we're just going to return nothing and then we're going to copy and paste down and just
change it to monday tuesday wednesday thursday friday saturday and then just updating the case of
the switch to be the correct day of week for the correct string and then in our set day view we can
say day label text is equal to our calendar helper month day string that we just created and passing
it through our selected date and then we're going to do the same thing for the day of week label
just calling calendar helper and giving it the function we just created to the weekday as string
and giving it our selected date and even though we haven't done our hours table view stuff we're
just going to call our table view reload data for our next day function we're actually just going
to go in and copy and paste that from our week view controller and just changing that to days 1
and instead of calling set week view we obviously need to call set day view and then we're going to
copy and paste that into our previous day action and just giving the days minus one
our number of rows in section table view function we're just going to return the hours count and for
our cellphone index path we're going to steal what we've done in our weekly view controller
we're going to change the identifier to cell daily id and then copy and paste that head into the main
storyboard we're going to apply that identifier to our daily cell and our cell is no longer a type
event cell it's a daily cell so we're just going to change that to daily cell we're going to remove
the next two lines of code and then just say let our equal to our hours index path row so getting
the hour from our index path.row and then we're going to create a function calling it format hour
which receives an hour and returns a string inside here we're going to return string with the format
of percent 02d and then a little time dots and then percent zero to d and then just passing into
now hour and zero and we're going to say cell time is equal to our format hour giving it our hour and
we just need to say cell time dot text cool and we also need to set our events if there are any
for that hour so what we're going to do is create a function calling it set events which receives
our daily cell as well as a list of events so to get our list of events we're going to head
into our event suite file copy and paste down this events for date because we also want an events for
date and time and that's going to receive a date as well as an hour and before we check our time we
actually need to head into our calendar helper and create a function which gets the hour from
a date so i'm just going to copy down our day of month function renaming it to hour from date then
we just need to change the date component to an hour as well as components and giving an hour so
now we can head back into our event and inside our if statement we're going to say let event
hour is equal to our calendar helper hour from date and giving it our event date and then we
can say if our event hour is equal to the hour that's passed in then we can append our event
to our day's event now heading back to where this all started our day view controller we can just
say let events equal to our event events for date and time our date we're going to give it selected
date and our hour is our hour and now we can call our set events giving it our cell as well as our
events list so below our set events we're going to create a function calling it hide all which
receives our daily cell and we're just going to say cell event one is hidden is equal to true and
the same thing for event two and three and that's the first thing we're going to call in our set
events then we're going to create a switch calling events count and if there's one event we just want
to set event 1 and we're going to pass it through our cell as well as the event at position 0 so the
first event in the list we're going to create a function calling it set event 1 which also
receives our daily cell as well as the event and we're just going to say cell event 1 is hidden is
equal to false cell event 1 text is equal to our event name and then we're going to copy and paste
that function down and just changing the names to set event 2 and set event three and just changing
the events to the correct event and now we can copy down our case and we're just gonna say if
there's two we wanna set two events and if there's three we wanna set three events and then we're
gonna create one more case which is if there's more than three events so we're gonna say case
let count where count is greater than three we want to set event one and two with just the first
events but then we're also going to create one more function which we're going to call set more
events and that's going to receive the count of how many more events there are event three we're
going to set the text value of our account more events and then we're just gonna call that and
passing it into cell as well as the events count minus two and we're gonna head back into the main
storyboard and fix a few little bugs or errors that i made so this segue i selected off the wrong
button so it's off the button item and not the actual button so i'm just going to click on that
button and then create that show action segue and then our table view row height is actually done
through the table view and not the cell turning it off automatic and setting it to 70. and then we're
going to head into our daily view controller and we're just going to override the view did appear
just calling superview did appear and passing it through animated and then we're just going
to set our day view something i should have done in previous tutorials so i'm just going to
fix that up in our weekly view controller we're just going to call set week view and then copy
and paste and put that into our view controller for our month view and just call set month view
cool so i think we're finally ready to build and run this we're just going to click on the weekly
and then daily we can move through the days and the day of the week seems to be updating correctly
and we're moving through one day at a time we can scroll up and down our timetable view as well as
add some events directly from our daily calendar view uh let's add a couple of events just to see
if when we get three events in one place it's all working correctly cool so that was a daily
calendar view what we're going to do next is just modify our monthly calendar view to show
previous and next month's days grayed out cool so firstly we're going to create a new swift file
calling it calendar day we're just going to initialize the class name as calendar day
and it's going to have a variable called day which is type string and an enum of month so
our month we're going to have a previous month a current month and the next month and then we're
going to create a variable calling it month which is of our type month enum and now back into our
view controller we're going to change our total squares to be our calendar day instead of a string
and that's going to give us some error messages so we're going to say let calendar day is equal
to a new calendar day and then we're going to take our total squares append and instead of appending
a string we're going to append that calendar day that we just created next we're going to split out
our or statement so instead of being an or we're going to turn it into an else if statement so for
our current month we're going to say calendar day day is equal to what we've been appending in our
total squares and then we're just going to say calendar day month is equal to our calendar day
month current then right at the top we're going to create a variable calling it previous month
which is equal to our calendar helper minus month giving it selected date so we get the month before
and then we're going to find out how many days were in the previous month by calling our days
a month function and giving it our previous month so we know how many days are in the previous month
we can say let previous month date equal to days in previous month minus starting spaces plus count
and then that's what we can give our calendar day day if it's a previous month and then we're
just going to set our month to be month previous we're going to paste that down into our next month
as well and just calling it next for our next month day it's pretty easy we're just going to
say calendar day is equal to the string value of count minus days in month minus starting spaces
cool and now we can head down and change our cell so we're just going to say let calendar day
equal to total squares at index path dot row and then we're going to change our day of month text
to be our calendar day day and then we're going to create an if statement just saying if our calendar
month day is equal to our current month we want to set our cell day of month text color to be
black otherwise we want it to set it to be gray so i'm just going to copy and paste down that
line and just changing it to ui color grade cool and if we go and run this again we can
see that the previous month days as well as the next month days are grayed out so there
you go that was a daily calendar view as well as some adjustments to our monthly calendar view
if you liked the video give it a like otherwise i'll catch you guys in the next one