Weekly Calendar Android Studio Tutorial | Daily Events List

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

Channel: Code With Cal

Views: 72,669

Keywords: java, tutorial, programming, coding, example, android, studio, program, code, app, development, developer, software, indie, how, to, basic, simple, 2021, education, build, create, apps, easy, follow, beginner, friendly, make, learn, calendar, view, weekly, calendarview, weekly calendar, events, event list, selected, date, dates, date picker, cal, time, schedule, per, day, daily, week, week calendar, month, calendar app, calendar project, list, recycler, recyclerview, listview, calendar weekly, monthly, highlight, cell, picker, localdate

Id: knpSbtbPz3o

Length: 14min 9sec (849 seconds)

Published: Fri Jun 04 2021