Create iOS Calendar app in Swift with CalendarKit (Full Tutorial)

hi my name is richard and i'm the creator of calendar kit in this tutorial we're going to build a calendar app for ios it is similar to the app you can find on your iphone or ipad we'll start by creating an xcode project then we'll integrate with a calendar kit and then fetch the events from the local event store it is really simple and you don't have to have advanced swift skills in order to follow it whether you are a beginner ios developer or more seasoned one you can definitely learn something from this tutorial so let's get started all right let's open up the xcode and select create new project then select platform ios and app the product name could be pretty much anything for example calendar app in the organization identifier you can also plug in your uh organization whatever that could be output ck interface is storyboard because um right now calendar key does not support swift ui natively so i'll be doing this tutorial in ui kit and lifecycle is app delegate uh language swift do not enable core data and tests and click next now you can save your project on the desktop click create so here we are in a brand new xcode project uh let's resign it a bit right so here we are in the new expert project after creating a new project we need to delete storyboard and configure our app to launch programmatic user interface without using storyboards or sibs start by deleting the storyboard click on the main storyboard and select delete and you can move it to trash then uh go to info click on your project and go to info now we need to delete these storyboard keys so that our app will not attempt to launch from the storyboard but will indeed launch user interface programmatically click on the main storyboard file base name main and delete it just click on this minus sign or press the backspace or delete button but that's not all you need to open the application scene manifest and then scene configuration application session role item 0 default configuration and then you can find storyboard name main and you need to also delete this just press delete on your keyboard or press this minus sign it will delete the this line then we need to go to application scene delegate scene delegate is responsible for setting initial uh window and view controller so that we can configure how our app will launch just click on the scene delegate and as you can see uh these method appli scene will connect to session is completely empty because the project has been configured to use storyboard and now we need to uh add our code there to launch this app programmatically so first of all let's get this scene called windows scene and uh then we need to create a new window so we already have the window variable here just type window equals ui window and that will create a new window for our application and you can already select windows scene and pass it there window scene this creates an associates new window with that scene now it's time to create a new view control that will display in that window let view controller equals to ui view controller or actually we can use already this view controller that we have here on the left the default one view controller selected from the list and that's it uh and i usually create a navigation controller so that that app will have the navigation bar on the top let's create it right now that navigation controller equals ui navigation controller and select the root view controller here so that we can pass our new view controller to that navigation controller um yeah and let's set this navigation controller to be uh the first view controller in our scene in our window window dot root view controller equals navigation controller and we can make our window visible and key window make key and visible so this brings up our window to the foreground and shows our view controller uh on the display to test that everything works all right we just need to go and change something in our view controller so that we can clearly see that the app uses our own custom view controller and note something else go to view controller and as you can see it's completely default there is no methods added except you did loan and just add something here for example i usually change the color of the background view view the background color equals red dot red this will make it red so we can clearly notice that the app is launching with our view controller let's launch the app perfect it's red so as you can see uh the background is red so we're definitely launching this view controller uh let's stop it now we need to rename it to something more descriptive for example calendar vcontroller just click on the view controller and select refactor rename and let's rename it to calendar view controller because that would be our calendar uh so now it's time to integrate with the calendar kit because the library will handle all of the ui for us uh simply open your web browser for example safari and search for calendar kit swift and usually the first uh the first link is the library we are looking for calendar kit its library for ios and ipad os and swift perfect choose select on the code and uh use https and copy this by clicking the copy button now let's go back to xcode and select the project then you can select the very the very top project not the target and select swift packages press on the plus now we can add our package press paste and click next now you can decide whether the xcode will update the counter kit for you usually i will just go with the defaults so version is up to next major and as of right now it's 108 but you might get a higher version click next and now xcode will check out the calendar kit and install it into your project so uh choose package products and targets uh that's one library that's been included in that uh project and you need to add it to your calendar app target uh just do nothing here and click finish all right so the library has been installed and now we can go back to our view controller let's try to import the library import calendar kit and uh now we can change this view controller as you can see the base class as ui view controller you need to change it to the view controller this class is coming from calendar kit and let's delete this background color equals ram all right let's add some title to our view controller for example calendar title equals calendar when we launch our app again we'll see that actually the title has been shown in the top part of the app so i think it looks better all right so the calendar works and we can scroll through the days we can click on the header so uh the library is set up correctly but it looks kind of empty let's add some events there for that we'll be accessing user's calendar so in order to access user's calendar we need to use the framework called event kit let's import that framework event kit and now i'll go quickly through uh what event kit is it's basically an apple framework that allows you to access the events stored in user's calendar for example if you have an outlook gmail or icloud calendar they can store those events in local calendar in the so-called event store and now we can authorize our app to retrieve those events and display using our calendar kit interface you can take a look more on the apple documentation website but i'll highlight the main points here so don't worry you don't have to go there when you're watching this tutorial and of course i'll link this in the description below so uh make sure to check it out if something is unclear all right so the main uh class that we are going to use is called e key event store so uh this object allows the access user count events and reminders uh but first of all we need to include a privacy notice in our info p list file that we are going to access that store because we need to get a user's permission before we can do anything with the calendars so go to the calendar app and select your target and select info p list then click on the plus sign this will add a new line below delete text and type uh privacy uh and select uh privacy calendar usage description and feel free to add something to notify the users that you are going to use their calendar data for example the app needs access to calendar to display events all right so when we added the string we can actually go and implement our code to uh get the events go back to the calendar view controller so our event kit library is already imported here and now let's create the event store just create it as a variable in the view controller class private lab event store equals ek event store that's it and uh on application view that loan we need to uh ask for the calendar permission let's do it right now let's create a function called um request calendar access permission and now implement the logic to actually requested permission we need to type event store and there is a method request request access and we can actually request access both to reminders or to events for this tutorial we need access only to the events so press dot and select event as your entity type and completion handler you can handle this later so uh success and error so uh you can check uh the success variable if the access has been actually granted and if not you'll get an error so and now let's invoke this function here request access to calendar uh so let's run our app again and when you run it the app actually should ask us for the access to user's calendar perfect so calendar app would like to access your calendar apps needs access to the calendar to display events so this was the privacy stream we added before in the info pls file just press ok so now we are free to access the events in user's calendar and um yeah let's add some there because now the calendar is empty just go to the actual calendar app in your simulator and uh hold somewhere on the timeline to create a new event i'll create a few just to see that everything is working as correctly uh blue event and now i create another one for example here green event and i'll change the calendar so it will be green it's just a different calendar and i'll create one more red event and this one will be red related to the red counter so we have three events and now i hope they will display correctly in our calendar app to do that we need to implement a method called events for date it works in a similar way as a ui collection view or ui table view data sources so the calendar kit will ask you to provide the events for a specific date and you basically have to provide them and calendar kit will take all the rest it sounds like for example layout display um colors and so forth so uh let's create that method events for date and as you can see the type is event descriptor so if you want you can create your own class it just has to conform to this event descriptor protocol for this tutorial we're going to use the default class called event which is provided within calendar kit so now we need to use the event store to fetch the actual uh events we just created let's do it so to fetch the events we need to create a date range so the date provided with the uh in this method is actually the midnight of the date we are interested in for example if uh today's uh sunday 23rd of may uh the date will uh will be the midnight of the 23rd and it will be in the current time zone so uh we need to create a range basically starting from the midnight of today and finishing with the midnight of tomorrow just the beginning of tomorrow so we can fetch all the events that i included in today uh let's get this date let uh start date equal state and now we need to create a d d components basically one day is one component one kind of component so the components can be seconds uh days years and so forth it says how much of the difference we need to uh to make another date uh to have compared to the one we have right now so war components one day components equals date components just create a new class instance of the class and one day components don't day equals one so it says that the span of these day components will be just one day and we can create the end date let end date equals calendar this is the current calendar by the way uh it's also the uh instance variable of the debut controller in the calendar kit calendar uh date by adding date components one day components uh to our start date and add the exclamation mark so that uh if the so it's an optional so that we don't need to unwrap the optional and handle that if there is an issue it will crash the app but for now it's okay now we need to create a predicate which will say that we want to fetch just the uh all the events from the beginning of uh start date to the end of this date so um let's create this predicate event store the predicate for events because we need to fetch events not reminders so the start date will be our start date and end will be basically the end date we created and for the calendars we need to pass nail that will fetch the events from all of the calendars but for example if you want to fetch just the green events then you need to pass that specific calendar you're interested in for now let's fetch the events from all of the calendars so now we're ready to fetch the events from the event store let event kit events equals event store dot events matching predicates so this will actually fetch everything that is included in that d but the type if you uh look a bit closer the type of the event kit events is e key event and uh that is not compatible with the value we need here so we need to convert those event kit events to calendar kit events let's do it right now left calendar kit events equals event kit events so we just use the events we had before and you need to use the function called map it's a higher order function so it basically takes another function as an argument so just select map and press return key again and this will help us to create a closure so e key event is going in and now we need to create for every event git event a separate calendar kit event let's do it uh left calendar kit event equals uh event so this just creates a basic instance of the class called event and let's copy all the parameters from the event kit event to our calendar kit event it's pretty simple calculate event start date equals uh event event start date uh the same goes for the end date and now we need to actually uh pass the color uh of the calendar kit event uh and to do that we need to fetch the color of the calendar so uh we use the optional uh unwrapped construct called e flat so if that event color equals event kit event.calendar.color cg color because there is no ui color of the calendar and then we can get the uh we can set the color of the calendar kit event just create a new ui color because color kit needs to have the ui color and it's just a different type and use this initializer with this cg color and pass that event color that's it so and you need to return this newly created event so i'll explain what this method is doing right now so map function takes every event kit event in this array which we just fetched from from our event kit store and applies this code for every event that it finds in this array and uh we need to fix this uh we need to add an explicit type uh just add um the return tab and the return type would be event all right and uh the only issue that we have right now is missing return in a function uh basically not returning the events that we need to have in our data source method let's do it just type return and return the events that we have created in this map function calendar kit events so if everything goes right now we should see the same picture that we see right now in our app just press run and here we go all of the events are actually in the calendar perfect so uh i hope you see the same picture and congratulations you just created your first calendar app but before we finish our tutorial we need to do one more thing in the current configuration we can actually get notified for new events for example when the user creates uh a third or fourth event for example here we will not see it because the camera will not know that it needs to refresh the page so to do that we need to subscribe to the event kit store notifications and after that every moment the new events are created or other events are deleted the store will notify our controller uh that something changed uh counterkit will have to react on that change and refresh the whole data source and ask for all of the events again so let's do it right now it's really simple you just need to add one more function here called subscribe to notifications and uh use notification center and listen for a specific event notification center default subscribe uh add observer observable itself and now we need to create another function for example for example store changed just add objective c prefix here because otherwise your notification won't work store changed as the parameter you need to add notification if you want to get some information about which van changed in some other uh but in this tutorial we are not going to use it and uh we'll pass this selector here so that the moment something changed uh the system will call our method and we'll know that we need to react on that changed so add selector and store changed uh please know that it's an objective-c method as was written here and it wouldn't work if you will not add this objective c keyword uh notification name is uh it's a predefined name uh just press dot and the name is e key event store changed you can select it here and for the object we don't need anything here in this case nil and now you need to invoke this function the moment the app the app is launched and this controller is displayed so we can add it to the view data load as soon as view loads into the memory uh we'll subscribe to these notifications and get notified on every store changed and as the reaction of that on that event you just reload all the data similar as you would with table view or collection view just type reload data let's relaunch our app and i'll put a breakpoint here so we can actually see whenever the store changed is called let's add another event around here go back to calendar and create another event and now we can go back to our app without actually relaunching it and as you can see the store change notification got got called and now when i press run the event should actually appear around here as you can see the event successfully appears and that was it so now you got your calendar working and uh this would be a base point in experimenting with calendar kit so we are right now in the same spot we finished our tutorial with and um if you click on the event that you have in the calendar it will not open anything it will basically be uh it will basically do nothing but uh for example if you go to the default calendar and compare the same event you'll be able to go and check the details let's add this function functionality first as you know calendar kit uses the data source pattern to get the events from your view controller or your data source if you have a specific object acting as a data source so counterkit asks for the events and you provide the advanced for a particular date however when uh we want to uh get feedback for example when our event got clicked or somebody tapped somewhere on the timeline uh calendar kit uses the similar pattern called delegate so it will notify another object called delegate that something has happened so uh we'll use the delegate pattern to get events that uh somebody has tapped on our event view so just scroll down and add the method that we'll be using to react on the click so as you might guess uh to react on the event uh tab you just need to use the event the method called uh day view did select event and uh this event will be called whenever somebody is selecting our event and uh let's add some print statements to check if this callback gets called uh print event clicked and run our app again you can see we are getting events so everything is working as expected uh but before we continue uh we need to clean up our code a bit as you remember we uh have to can we have to convert the event kit events to our own calendar kit event types and um when we're dealing with a lot of behavior such as editing and creation um we're better to use our own data type uh it will be more convenient our own data type will encapsulate all that behavior so that we won't have to worry about converting from one data type to another and tracking changes click on a file and then a new file we'll create a new data type that will be specifically converting between event kit and calendar kit data types select shift file press next and add it to your project we'll call it ek ropper so it will rob the event key event press create and don't forget that add to target should be checked so an import few frameworks import ui kit and import calendar kit and of course import event kit you can delete import foundation because the ikea includes foundation uh and uh we won't write our code from scratch we'll just go and copy the existing class and modify it to our taste select file open quickly or command shift o on your keyboard and then type event and you'll find the uh and you'll find the uh default calendar kit event class it's rather large so uh you'll need just select all and copy and just paste it to our own class as you can see the default event class just stores the data such as start date end date and so forth what we'll need to do is basically use our event kit event to provide that information for us let's modify the initializer first and uh just select init and add event kit event and of course we'll need to add a e key event and just store this event here we'll create a variable and what we want is that only the eq roper can can change this event and swap it so it will be a private property to uh to set but public to access so any class can get this event but nobody can set it except the roper itself so just add a private public just add public uh public and then private set or event and just in your initializer just uh assign this pro silence property on on the initialization and uh this is actually very important for the editing but we will not modify it uh for now and uh just add fat layer so that we silence the compiler and um what we'll need to do now is to use the event kit properties event kit values uh to provide the start date and end date so delete the assigned date and we'll make this computed variables start date date and we'll need to write a getter and a seller for our properties so for example get would return just the event kit value start eight and now let's modify the setup which when something changes the start date in our event roper class it will actually change it in the underlying ek event so uh just um type the event dot start date equals new value it's the default uh variable in swift name uh it's always in scope so you don't have to create it yourself here and now you have to do that for every other property for example end date all day text and so forth i'll do it quickly for you for the attribute text and line break mode don't change anything these values will not be used in um in our tutorial for the color we need to get our color from our calendar so each event is assigned to a specific color for example re red blue or green calendar and those calendars have uh have have its own colors we need to fetch that color and pass it to calendar kits so it knows which color to display so remove the property observer and it will be a get only property a read-only property so you need to get your color by typing ek event then you fetch the calendar and getting the actual color however because the type is cg color we need to convert it to ui color one more thing when we initialize our event we need to make set make sure that the background color and the text color are aligned with our calendar color because they all are derivatives of the same base color it happens here in the in the update colors um method which basically um changes each color according to the uh according to the base base color that is the color of the calendar just add one more uh method call in the initializer uh just call update colors and to make my code look great i'll quickly reinvent it ctrl i if you don't know this command so um and last touch is just rename our events so that it will not be confusing with the main calendar kit uh event class click on the event refactor rename and let's name it ekrober uh now the class has been created and we need to uh change uh and we need to change our code in the data source we will not do this will not convert our events manually instead we'll just pass the ekroper class and will do the work for us feel free to delete everything up to the map and uh now just initialize our roper events with the event kit events uh just change the parenthesis to uh rounded ones and type the e key roper dot init and this will do the job so uh now this should compile perfectly uh and let's run our application everything works the same we have the same event as before but way less code as you can see now let's react on the event click when the user clicks event uh let's add the code to show the detail view here let's import another framework called event kit ui it already contains the view we need so it will be pretty easy let's get the uh calendar kit event from our event view because view is just a view class and we need the data model to be able to show the detail view guard left ck event equals event view don't descriptor so that could be actually of any class and we need to uh cast it to uh eq roper and if this does not happen happen just return so we got our calendar kit event and we can use it to show the detail view now let's get the original event kit event and now we can use this event kit event to show the detail uh let's create one the class is called uh ek event view controller and just set uh the event and now we need to set a few flags to it so that we'll be able to uh edit our event and uh show it in the calendar first property is allows calendar preview and set to true this will basically display how our event will look in the calendar and another property is allows editing which will make it possible to edit the uh the data and now we're ready to present it navigation controller push view controller animate it and just push it to the navigation stack let's run our app again and now when i click on the event it should show a detail page as you can see it looks great and we can also check on the existing default events they also show up well now let's quickly refactor this code and extract this to a separate function i'll just cut it and create a new private method i'll call present detail view and just call it here so uh now we are able to uh open the detail page but we still cannot drag and drop as you can do it in the default calendar let's add that functionality so now we can uh open the detail page and see uh what's there uh in the event but with what we want to do is actually to drag and drop the event in a way similar to a default calendar now you can just see it and you need to do editing in this menu in order to change something uh what we want is to be able to try to long press on the event so two handles show up and then you'll be able to rearrange it the way you want i'll first go back to the default calendar to show you how it actually works so uh here's the event and you long press on it and you see two handles and now if you drag it you see both the old event and the new one which is actually where the uh new date and time will be changed to uh so once i left it once i left my finger from the screen uh the the data is committed and i can move it back or i can use this resize handle to change the duration of the event and now it's big and uh basically that's what we are going to replicate in our application and uh to exit the editing mode i just uh tap somewhere else on the calendar for example here so uh first of all i would like to explain how the editing works in calendar kit uh because as you can see it's rather uh complex process so um as you know we've created this uh ek ropper class that's encapsulating the event kit details and providing acting as a bridge between counterkit and event kit so um basically each event you see in the calendar kit um timeline uh asd ek robber uh and uh you know uh that the callback is called when for example uh dave you did select event view when you uh tap on it the same callback is called when you for example long press the event and actually you can enable editing mode by any other means by any way you want but uh for this tutorial we are going to use the long press event um callback basically once you long press the event you get this callback and in order to enable the editing mode you need to call calendar kit a method called begin editing so once you call that method uh something happens and instead of one event you got two basically and i'll explain what happens next so uh once counterkit gets the uh begin editing command it asks the actual event to provide an editable copy and calls the method called make editable so this method then basically duplicates the event with the same parameters like a start date and date and as you remember uh that original event is um actually uh referring to some events stored in the device storage so uh this editing roper in this case actually uh refers to the very same event and uh one important thing is that in this uh second event which has been just created uh there is a property called edited event and it points back to the original so uh if you check any uh if you check any uh calendar kit event and there is an edited event property and it's not empty it's not nil then you know it's this one it's the one that is uh active right now that you can edit so and the same way if you don't have this property is set to nil uh so basically there is no uh there is no uh there is no edited event property if there is nothing to edit then you know it's just a basic event which which has the uh this property set to nil and once you got the cloned or duplicated event um calendar kit uh it adjusts just these event values for example uh when i move this event for example from 3 pm to 4 pm it changes the start date and end date of this editing event and the moment i lift my finger from the screen uh the calendar kit calls you back again uh this time with a did update event and uh then uh you basically decide how you act on this change when you get the date update event um method uh callback in your delegate you can call commit editing on your event and what that will do is basically synchronize to events so uh the moment i lift my finger the commit editing is uh cold and it makes those two events have the same values um so that the original event snaps directly underneath the editing event and the same happens when you update for example start date or end date you don't have to necessarily move the whole event somewhere and once you decide that uh editing is complete for example by reacting on another delegate callback such as uh the top timeline uh you call manually save changes and uh and editing so basically you exit this editing mode so it's very similar to ui cable view editing functionality so if you're familiar with that uh you'll be pretty easy to set it up with calendar kit and how about creating a new event for example like this so well it's very simple um it means that this event edits itself so basically the edited event property will point to the same event uh obviously because there is nothing to edit there is no saved event in the storage um so that's it uh let's recap it a bit so first of all you got the deadlong press event uh callback and you decide how you react on that uh and if you'd like to begin um editing the functionality you just call the beginning editing and you pass that event into calendar kit and calendar kit in its turn uh just clones this event uh into two and the original events stays untouched and uh the new cloned event will be edited and once the user moves the event for example to a different location calendar kit calls data update event call back and again you decide how would you react uh if you would like the underlying event to snap directly uh to the new values you just call commit editing and that changes the real underlying event but for example on ipad that's behavior is different and uh you'll need to actually confirm your editing before um the data will be saved and you have the option to cancel on iphone uh it commits the data uh it commits the changes directly and when you want to access you just call and editing so uh now let's implement this functionality in our app so as you remember we need to react on the deadlong press event um as you remember we need to react on the did long press event callback uh let's let's implement this callback did long press event view and what we need is to just to call the uh begin editing uh there are two parameters you can use the uh begin editing animated uh or you can use the option with the uh without the parameters without the animated parameter but i prefer to start animated because this is user interactive mode uh so it's better to show some animation and just we need to get the uh ek event and pass it here very similar uh very similar um very similar um construct as here i just copy and paste it and uh let's pass it here just copy and paste and this should work although i'll also add another callback uh and editing just before uh begin editing this will ensure if the user long presses one event and then immediately long presses another one this will end the editing of the first event before beginning the new so uh let's run our app again and see if the editing mode could be activated so scrolling to the event and now long pressing oh final error of course as you can see calendar kit just called a make editable method and we forgot to implement it back when we just started so now let's quickly implement this method as well so that we get the cloned event as you can see it's of the same type as the original one we just need to make a copy um let's initialize our event since all the data in the original event is taken from the event kit event uh then we just need to initialize it with the same event kit event it will face the same data pretty simple and in order to simplify uh this we can actually not write the e key roper but we can just write big with the capital letter itself and this will and will initialize the instance of the same class that we are in and pass the past the event key event you can remove the init and just pass the existing event kit event uh don't forget to set edit it to the event we're actually editing so uh we removed this pattern arrow and now it should uh work just fine just again to confirm that this edited event is pointing to south pointing to the parent event so that they will have this link because if you do not if you forget this line then the editing functionality will will not work and let's try to activate the editing event yet perfect so you see that uh now we can edit this event although the original is still there it doesn't change so our edits have no effect on the original event and we cannot exit it so uh except by by clicking again uh so now let's add another functionality to react on these uh changes when for example i drag and drop the event here what i would like to is that the original event also snaps here and follows the uh this active edited edited event as i shown on this uh schema we'll need to react on the data update event method let's go to the counter view controller and add that method did update event again we get uh we get the event descriptor engineering class that we don't know uh it's basically a protocol we don't know what a particular type it is so we need to do a type casting to get the uh our own uh uh ek rubber so let's populate our uh debuted update event method and remember that this event is basically the one which is being edited so uh basically this active one and not the original one so we need to get both so let's copy let's create the garland construct we use it a lot and we call it editing event and try to type cast as ekrober so basically checking that the type is correct uh that is the expected uh our own custom class and now now let's get the original event so this one is editing and the original is being edited so uh if that original equals um editing event dot uh edited event so uh edited event or anything event.added event it doesn't matter so if uh if this construct if this if not uh passes um and there is actually an edited event you can immediately commit editing this will update the parent uh event which is like not active so uh if if you can get the original event then uh editing event is basically active and again you need to call the commit editing which will commit those changes back to the original event and now let's save those changes to the event store so we are saving our changes to the event store as soon as the user lists the finger and stops editing and don't forget to reload data so that the new changes appear on the calendar let's run our app again and see if now we can actually um get our emptying to work all right anything you is activated now let's move it here and you see the um the original event snaps back and now it snaps to the top and i can drag to this handles as well so yeah seems to me that anything is working correctly uh the only thing i cannot exit it so we need to add a few more callbacks and uh we need to react on the um this tab timeline so as soon as the user taps something else about the calendar uh the editing mode will be disabled and we will go back to the viewing mode let's implement this functionality so if the user did tell timeline we just add the editing and the same if the user starts dragging our calendar somewhere here so as you can see the event is still in editing mode we would like to exit it and let's check it out again so editing moving here and tapping somewhere here perfect our event now steps back into the viewing mode and the same if i try to drag it it immediately snaps back um that's good but we need to add event creation option so uh in a way as i do in the default calendar i want to just um tap somewhere on the timeline and uh long press and then i should get something like this so uh the event with about an hour duration and when i uh pop it back uh i'll get the menu with uh all these parameters filled in so i have to just type the event title and i can get it pretty easy so this is the only thing that is missing in our calendar app to be a perfect clone of the apple's calendar let's implement it let's check back how event creation works um i'll quickly show the uh demo so uh as you remember the created event is the same as edited event except uh it's property edited event pin points to itself so what we need to do is just create the same event ourselves and change this uh property to be uh like to be circular we'll be reacting on the deadlong press timeline method so uh right now if i go to our app uh if i try to long press the timeline there will be nothing happening so uh i'll need to fix that so let's create a did long press timeline method [Applause] and uh this callback immediately gives us the date at which the user has pressed so for example if i press it at sound pm i'll get one callback if i press it at 9 pm i'll get another call back and i'll be able to create event immediately at this spot where the user actually uh pressed the uh pressed screen so um yeah as i've shown we need to create this new event let's create it first we create new event kit event we need to pass the event store yeah so first of all we need to create a new event event and don't forget to pass the event store because the event kit event can't exist without the store and yeah just uh just configure it in a way you you'd like so for example uh calendar um event store calendar for default events now let's create a date range for our new event let's say our uh initial our newly created event will have one hour of duration just let's create the components and set to one hour and get get our end date let's use the calendar date by uh by adding components one hour components to our uh date which is started so the date here will be started and this date will be end date and now set those dates to our event and we need to create some title and as you remember now we need to package our event kit event into calendar kit event and now let's link the edit event property to the same event so this will tell calendar kit that it should show this event with editing controls and on the other hand there is no event in the store back in it so uh it will still show the controls but but will not show the underlying event obviously and to call the create animation just call the create method create event animated and pass your roper let's see if this works alright so i can uh clearly drag my newly created event and if i lift the finger will it snap back oh it has been created here and if i click summer on the timeline yeah the event has been committed but uh i can go here and uh view manually create event and back uh but what i would like to have is another control popping up uh similarly to the uh apple's calendar so for example when i drag uh when i finish dragging there would be a menu asking me to enter some other information for example change the title and probably cancel the event creation so let's implement that functionality so in order to show the form with event details uh we need to catch the exact moment when the user uh lifts the finger so for example when i uh just create the event drag it for example i want it to be at 10 am and once i lift it at this very moment i should see the form and the calendar kit calls the same method uh did update event regardless whether you create or update a new event it will go through here for newly created event the property edited event is the same uh so it's it's a circle it's a circle reference we can use that to check if this event is a newly created one or uh it's just been uh it's just not the event being edited so uh just add few more uh lines and uh add an f check if uh original event uh three equality sign uh and uh editing equals anything event so which means if these instance of this class of the eq roper is exactly the same instance are we talking about exactly the same object and if it's exactly the same object it's basically um it's basically the newly created event and if not this will be our uh editing flow and this will be event uh creation form so when we are editing uh something when we are editing existing event we just save it but remember when we are creating the event we do not want to save it yet because the user might want to cancel it i'll show show you in a moment how the apple's calendar works so if i drag event somewhere here and then press cancel the event will not be saved so that's why we uh call event store save only when it's an editing flow when we are editing an existing saved event and uh in the event creation flow we just need to show this form so in the same way we created present detail view for event let's create a present editing view which is show a different view controller present editing view for event and just pass uh editing event dot ek event and of course there is no such method let's create it immediately and the type will be uh ek event and now we need to show a different view controller called uh uh event kit editing a view controller which is a bit different from the view from the uh event view controller which is uh just showing the detail and the editing it will uh show the controls uh to edit it's basically this view that we'll be reusing so it's really simple lab editing view controller ek event editing view controller just create a new one and pass our event and event store and you can present this view controller modally in a way apple caliber works present view controller present you control animated and completion is neil one more thing so uh when we show this form we need to know when the user presses cancel or save and react on the change so that we can dismiss this view back so let's run the app and see how it works before uh continuing so uh yeah i have a lot of events i'll try to create a new one and the form pops up and if i click on this card changes it will still be here so uh um and that's because uh because uh i uh because our review controller doesn't know that the user actually pressed uh cancel so in order to react on those uh changes we'll just need to implement uh a delegate method and that method called uh event view controller uh did complete so uh first of all just go up to the top of the file and uh add another delegate just press the comma and uh ek edit you can eek event edit view delegate which you will need to implement and um at the bottom we will create that method event aw controller did complete with action basically this tells that uh the user has either saved or canceled the event yeah and now uh just set the delegate here um when creating our view controller editing view controller dot um edit view delegate it's important not to set this delegate because because it's a different one you need to set the edit if you delegate and set it to self and let's run our app so switch to tomorrow and try to set the event at 7 am as you can see uh perfectly matches the uh detail that we set when dragging our event 7 a.m to 8 a.m and it's new event i press add and of course nothing happens because we do not react on on these callback so let's finish the editing here and reload our data and dismiss this view controller controller dot dismiss animated true and completion as nil let's try again [Music] the event is there but the controller didn't dismiss so uh i'll drag another event here at 1am and uh type something in here and of course i can change these values to whatever uh i won't um and press add and the new event is here uh of course i can use editing in order to change uh the event starting and end date because everything works as we already implemented that so that was it i hope you just built your own copy of the apple calendar and if you have some questions don't hesitate to ask them in the comments below uh don't forget to subscribe to my channel i'll be posting more is related content soon and of course this whole code will be published on github you can just check it out and if something is not working in your app uh just free to check out the github and see how could you improve your code to match what we achieved in this tutorial uh so i hope you learned something and see you in my next video [Music] you

Channel: Richard Topchii

Views: 2,640

Keywords:

Id: iC4XxmExqFA

Length: 69min 7sec (4147 seconds)

Published: Tue Jul 06 2021