hey guys what's happening my name is cal and in today's java and android studio
tutorial we're going to be building a weekly calendar view more specifically we're going to
be converting our monthly calendar view which we built in our previous tutorial
and turning it into a weekly calendar view then in the next part of the video we're going to be
building an ability to add events to our calendar view so you can scroll through
each day and it'll show you a different list of events
cool so picking back up from where we left off last time i'm just going to clone our calendar
tutorial android studio project from git hub and i'm just renaming it to a directory calling
it weekly calendar tutorial and first thing we're going to do is just create a couple of activities
so the same file new empty activity i'm calling the first one week view activity and then same
thing so file new activity and i'm going to call this one event edit activity finally we're going
to create a layout resource file i'm just calling it event cell and its root element is going to be
a linear layout and then we're going to head into our main xml we're just going to create a button
to link to our weekly view so i'm just going to copy and paste this top button here
changing the width to wrap content getting rid of the weight layout gravity is equal to center and
just changing the text to weekly our on click is going to be our weekly action and we're just going
to create that in our main activity java at our weekly action function we're just going to call
start activity giving it a new intent context of this and our week view activity class next what
we're going to do is head in and copy and paste everything that's in our main activity xml and
we're just going to hit command a and paste that into our activity week view xml we're just going
to change the context to our week view activity as well we're going to get rid of that button because
obviously we don't need that and then you can see we've got an error message here on our on click
so i'm just going to rename this to previous week action as well as our next button to our next week
action and i'm just going to create both of those in our week view activity then i'm going to scroll
right down to the bottom i'm going to change our recycler view height to 0dp as well as giving
it a weight of 1 and then i'm going to copy and paste in another button below our recycler view
i'm going to change the width to wrap content get rid of the weight and set the text to new event
we're going to make the on click new event action and just create that function in our week view
activity we're going to set the layout gravity to center and below that we're going to insert a
list view we're going to give it a width of match parent height 0dp and a weight of five so that's
going to be our event list view next i'm going to create a java class calling it calendar utils
and what we're going to do is just copy and paste a few things out of our main activity and put them
in our calendar utils mainly because we're going to use them in multiple activities within our app
so i'm just changing our selected date to be a public and static variable and as a result
of that all of the references to selected date we just need to say calendar utils and give it a dot
before our selected date so i'm just copying and pasting that in all of those instances we're also
going to change our days in month array to be public and static as well as changing our month
year from date that's going to be public and static we're going to put that in our calendar
utils file as well and if we read that error message it's just saying press alt enter to import
that function from our calendar utils so that's what i'm going to do i'm just going to hit alt
enter and then we're going to copy and paste from our week view activity we're going to copy our nip
widgets function as well as asset month view as well as the text view and recycler view so i'm
going to change our set month view to be set week view i'm going to copy and paste what's in our on
item click and just make sure that our week view implements our calendar adapter on item listener
and we obviously don't need that if day text is equal to zero so i'm just going to remove that
and then we're also going to pull out what's happening in our previous month action and
put that into our previous week action and just obviously changing the selected date two minus
weeks one and our set week view instead of our set month view and we're just going to copy
and paste that down into our next week action and making that plus weeks next we're going to create
a function calling it days in week array and we're going to put that in our calendar utils
as well so that needs to be public and static i'm just going to put the month from year date above
our days in month array so yeah making our days in week array public and static and we just hit alt
enter in our week view activity to import that function we're going to rename our array to days
as well as making our array list of type local date as opposed to a string we're changing the
type of array list that we're passing into our calendar adapter because we're going to make our
selected date have a different background color and it's easy to determine that by passing in the
whole local date as opposed to the day of month as a string changing the variable name two days
as opposed to day of month because we're going to have a weekly view so rather than have a day of
month or day of week we're just going to call it days cool and inside our on bind view holder we're
going to just extract our days dot get position to a local variable so it's going to be a local date
calling it date and in our set text we're going to say date get day of month we can head back
into our calendar utils and finish off our days and week array obviously it needs to return
an array list of local date as well our days a month function and where we're adding an empty
string we're going to add another and for our else statement we're going to say local date of
selected date get year giving it a comma selected date get month and then our i minus day of week
cool we can copy down our array list of local dates and just renaming that to days we're going
to return our days at the bottom of our days and week array function then we're going to declare a
local date calling it current is equal to Sunday for date and passing it in our selected date and
then i'm going to create that function it's a private static function i'm going to rename the
local date to current well declare one more local date calling it one week ago which is equal to
our current minus one week we're going to create a while loop so while current is after one week ago
if our current get day of week is equal to our day of week of Sunday so if the day of week is Sunday
return current meaning return the Sunday otherwise current is equal to current minus one days and
then if you can't find a Sunday which will never happen we're going to return null so basically
look a week into the past go backwards until you find Sunday cool and in our days and week array
below our current we're going to declare another local date we're going to call it end date is
equal to current plus weeks 1 and then we're going to say while current is before our end date days
dot add current current is equal to current plus days one and then we're just going to return our
days cool and we're just going to head back into our week view activity command click or control
click to go into our calendar adapter and then we're going to say if day's size is greater than
15 so meaning that it's our month view we're just going to do exactly what we've already been doing
otherwise if it's our week view we're going to set our layout params equal to our parent height
cool and if we scroll down just a little bit in our on bind view holder we're just going to say
if date is equal to null we're going to set our holder day of month set our text to be this empty
string otherwise we're going to set it to our date dot get day month and then also inside this else
statement we're going to check to see if our date is equal to our selected date we just need to go
in and change our calendar cell to have an id so we're going to give our constraint layer an id
of parent view and then copy and paste that id head into our calendar view view holder declare
it here just calling public final view parent view and i've gone about this the long way you
don't need to add this field to the constructor and we just need to find that view by item view
find view by id r.id parent view cool and now we can set our parent view background color to light
gray and back inside our calendar adapter we just need to say string dot value of our date dot get
day of month cool and if we build and run this and have a look at our weekly calendar view you
can scroll through the weeks and it all seems to be updating correctly however when we select
on one of the days it's still showing our toast and we'd rather it highlight our selected date
heading into our calendar adapter i'm just going to copy our array list of days and i'm going to
paste that into our calendar view holder and then in our constructor i'm going to add our days this
days is equal to days and then our item click is going to receive a local date of our days dot get
at position and then we're going to head in and change our interface to be a local date and we're
just going to rename that variable to date now we're going to have some error messages so we're
going to go in and add that so we're just going to pass through our days array we're also going to
change this to a local date just renaming it date call calendar utils select a date is equal to date
and then say set week view from our on item click and we're going to do the same thing in our main
activity so just copy and pasting that whole on item click function and then just changing that to
set month view and then in our month view we just need to check that it's not null because we'll
have the days before and after the month and if we burn around this again when you select on a date
we're highlighting the correct selected date so that all is looking really good so what we're
going to do is flesh out our events so we're going to have the ability to create a new event and then
we're going to show it in our list view so the first thing we're going to do is close off a
few of the different things because we're done with those and we're just going to head into
our new event action we're going to call start activity giving a new event context of this
and our edit event activity now we're going to get our layout sorted so we're just going to set the
orientation of this layout to vertical we're going to add in a text view giving it a height and width
of wrap content we're going to say layout gravity is equal to center and margin top 20 dp as well as
text size is 20 sp text alignment center and our text color is going to be black and the reason why
our layout gravity wasn't working is i actually need to make this parent layout a linear layout
and then below our text view we're going to add in an edit text so wrap content on the height
and width layer gravity center as well text size 20 sp ems is going to be 10 so that's how wide
it is our input type is going to be text and i'm just going to give it an id calling it event name
edit text then we're going to copy and paste down our text view twice more and i'm going to change
this to date as well as time and so basically just keeping this tutorial brief i'm not actually going
to implement a date picker or a time picker but if i was really building this app i would totally use
a pop-up time picker and a pop-up date picker i've already created videos on both of those
so i didn't feel the need to sort of double up but yeah be sure to leave a link in the description to
both of those videos if you did want to implement a date and a time picker below those text views
though i'm just going to implement a button so i'm just going to steal the one from our new
event i'm just going to copy and paste that below just change the text to save and the on click to
save event action and then create that function in our java class i'm going to give it a little
bit more margin to the top so 20 dp and then i'm going to head into our edit event activity i'm
just going to declare all of those widgets so our edit text as well as our two text views create the
familiar init widget function which just finds all of those views by their id i'm going to declare a
local time just calling it time and then i'm going to initialize it to the local time now so we want
to set our event date text view to be the date that the user selected so i'm just going to say
set text is equal to date plus calendar utils dot formatted date passing it in our selected
date and then we just need to create that function in our calendar utils i'm just going to copy and
paste and put it at the top and then we're going to copy our month year from date and then just
changing our date pattern to include the days then i'm going to copy and paste that function
again and just call it formatted time and instead of being a local date we're going to change it to
local time and changing the variable name to time and then we're just going to say our date format a
pattern is equal to hours minutes seconds and then little a is the am pm and then we can duplicate
that line changing it to time as well as our event time text view and then just calling our formatted
time and giving it our time that we just created and then i'm going to right click i'm going to
create one more java class i'm going to call it event and it's just going to be a public class
it's going to have a string name a local date date and a local time time and then i'll right
click and generate getters and setters as well as right click generate a constructor that takes
all of the fields and then right at the top of the class we're going to declare a public static array
list of events just calling it events list and below that we're going to create a function which
returns all the events for a given date so i'm just calling it events for date and it receives a
date and then we're going to copy and paste down that events list just so we don't have to retype
it return that events we're going to say for event in our event list if our event date equals
the date that's passed in we're going to add that to our events cool so now we can head into
our edit event activity and we can create a string we're going to call it event name is equal to
event name dot get text to string and then we can create a new event we're just calling it new event
is equal to new event we're going to get our selected date as well as our time i'm going to
add that to our events list and then just call finish to close the activity heading inside our
week view activity we're going to override the on resume function create a function underneath
it calling it set event adapter and we're just going to create that method below and then we're
going to call our set event adapter from our set week view function we're going to create a
new java class calling it event adapter our event adapter class is going to extend array adapter of
type event and we're going to right click and create the constructor we're going to change
that resource to a list of events just calling it events in our super we're going to pass through 0
for our resource as well as our events and we're going to override the get view function we're
going to say event event is equal to get item at position if our convert view is equal to null
we're going to say convert view is equal to layout inflator from get context inflate R layout event
event cell leave it parent and attach to root is false cool now we can head in and actually do the
layout for our event cell we're just going to set the height to 60dp as well as adding in a textview
width height wrap content as well as giving it an id event cell textview text size is going to be
20sp as well as changing the color to black i'm going to make the text event and we're actually
going to make the height match parent as well as the gravity center i'm going to give a little bit
of margin to the start so 20dp i'm just going to copy that id head back into our get view
we're going to declare that text view calling it event cell text view calling convert view
find view by id we're going to declare a new string calling an event title which is equal to
event get name plus a little bit of space and then we're going to get our formatted time from
our event time we're going to call event cell text view set text with our event title and then just
return the convert view back inside our set advent adapter function we can create an array list
of events just calling it daily events we're just going to call our events for date giving it our
selected date our event adapter is equal to a new event adapter we're going to pass the application
context as well as our daily events and then in our week view we're just going to give our list
view and id so we're just calling it event list view going to copy and paste that id declare that
and find the view by its id in our new widgets function and then we can call that list view and
just say set adapter giving it our event adapter cool if we build and run this again you can see
that we can create a new event i'm just calling this one appointment and it's on the first of June
and you can see that when we've got the first une selected it's showing in our list view correctly i
hope you found some value in this weekly calendar view tutorial if you made it this far consider
giving the video a like and subscribing but otherwise i'll catch you guys in the next tutorial