Build a Calendar With Vue, Vuetify & Firebase

[Music] this video is sponsored by Linode build your next application or website with loads next generation network Lenovo lets you pay as you go as you can fearlessly scale up or down at one of eleven global data centers to get $20 towards your new account visit linda.com slash travis e hey what's going on guys so about a week ago I posted a tweet asking if anyone had small projects personal projects that they'd like turned into a tutorial and they got a bunch of submissions I have a whole gmail folder just packed full of them so I'll be going through those in the coming months but today we're going to use one of those and this is a calendar application that we're going to build with view j/s beautify and firebase and this is from Jas fanatic so I'll put this link in the description to the repository with the code but basically we're gonna build a calendar using the beautify calendar component and we're gonna add firebase as a back-end okay so if you're not familiar with beautify it's a material design framework a UI framework for view Jas it's similar to material UI for react if you're familiar with that and if we go to the documentation here we go down to on this we're gonna go down on the side to UI components and calendar which is right here it gives us just a full-fledged calendar in the UI now obviously there's no back end to this what we're going to do is connect firebase to it and we're gonna end up with something similar to this right here so we'll be able to set events from firebase or so you know they'll be stored in firebase we'll be able to also edit the events we'll be able to delete them we'll be able to view by day view by week month you view by for days and then we'll also be able to switch through the the days or the month whatever view are in we'll be able to switch through that alright so that's what we'll be building let's go ahead and start off by creating our database in firebase so for firebase if you're not familiar with it it's a complete platform I think it's fantastic for small to medium sized apps it gives you a data an OS Kuehl database if you want you can use file storage you can use authentication they have hosting so it's just an all-in-one platform and it's really great for like I said small to medium sized apps perfect for something like this so you just need to be logged in with Google and then just go to console click up here because firebase is obviously owned by Google and then what we what we're going to do is create a new project so we'll say add project and let's call this view - calendar and we'll go ahead and continue and I'm not going to enable Google Analytics for this and then create project okay so our projects ready I'll click continue and now what we want to do is go over to the side here and go to database and we're going to create a new database we're going to use cloud the firestore which is the next generation of their real time database so we'll say create database and we're gonna go ahead and start in test mode because if we do locked mode we're gonna need to authenticate with firebase to read and write and we don't want that we're not going to deal with firebase authentication so we're gonna say start and test mode and then from here we'll just click done and it should create our fire store and what we'll do is we'll add a couple events through firebase and then we'll start on our application and we'll be able to fetch those events through the app alright so from here we're gonna create a collection if you're not familiar with no SQL it's basically instead of tables we have something called collections and in our collection we have documents each record is is known as a document and it's said they're similar to JSON objects where we have you know key value pairs so let's say start collection and the collection ID we're going to call Cal event and click Next and then we're going to just generate an ID and auto ID because each document needs a unique ID and then let's add a name field so the type will be string and then for the value let's just say doctor's appointment okay so we're adding actual events here the next field I want is details which will be a string and we'll just say dr. Williams at one o'clock p.m. okay and then we're gonna want a start date because this is the events will be able to span multiple days if you want so when hey let's do 2019 - and let's see what is today's date today's the 14th so we'll do 10 - 14 and then we also want an end date now this is a single day so we'll do the same date here 10 14 and then the last field that we want is a color because we want these to be color coded so I'm going to use hexadecimal so we want to put a number sign here ff8 zero eight zero and we'll go ahead and save that and we should get an event saved in our database all right so let's create one more so add document and this is for name let's say business trip and it will say details business trip to San Francisco and let's do start so for the start date we'll say 20 19 10 and you can change the date if you want to whenever you're watching this let's do let's see we'll do like 20 and then for the end let's do 20 19 - 10 - 24 in them for the color we'll set that to hexadecimal 0 0 4 0 8 0 and save and now we have two documents two events in our database and we should be all set so now we just want to go back to oops we want to go back to our basically our homepage for this for this project and then right here you can see where it says web we're gonna click on that and just put the title in here view calendar and you can set up hosting if you want I'm not going to so we'll just register app and then it's just going to give us a bunch of information that we're gonna need to plug in to our app so all this stuff right here this firebase config object so now we're ready to start building our applications so I'm going to open up a terminal or Windows command prompt whatever it is you're using and we need to install the view CLI which is the command-line interface and we need to install it globally so I'm going to say NPM install - G and then at view slash CLI okay so this is going to install it globally on our system and then we can use the view command to do things like create a new application okay so now that we have that installed let's go ahead and run view create and we'll call this view - calendar and it should look let's choose default here so it should create a folder for us called view calendar with all of the basically the boilerplate view files that we need okay so that's all set now let's CD into view calendar the folder that it created and if we do an LS you can see our fold our source folder and all the other files there are some dependencies we want to install those so first let's add beautify and we can add it as a view plug-in by doing view add beautify and this will install it it'll also initialize it and it'll actually add some code for us so we're gonna just choose default here and then once that's done we have two dependencies that we want to install with NPM so let's go ahead and run NPM I'm just going to do sudo npm install and we want to install firebase of course so that we can interact with our firestore database and then we're also just going to use a small package called view text area autosize and that will do just that when we add the details it'll auto size with the text why didn't this work did I spell it wrong yes I did text area all right so now we're all set I'm going to open up this folder and v/s code and I'm also gonna run the server with NPM run serve okay and that should start our server on ports 80 I think it's 8080 although I think that's taken on my system so it'll probably 80 81 all right so our server is now running and we have vyas code open with view calendar folder so let's go ahead and visit HTTP local host and port 8081 in my case and you can see we get the beautify home page then and that's because we added beautify as a plugin so it actually initialized it and it created this this landing page for us alright so first thing we want to do here is go into our source folder and in our main j/s we want to initialize a couple things just get rid of that so first of all beautify is already brought in it's already initialized it's passed into the view instance so let's bring in view text area autosize and initialize that so we'll say import view text area auto size and set that to whoops not require I've been doing - too much node lately import that from view - text area auto size and then we simply need to call view dot use and pass that in alright now let's bring in firebase now we could do import firebase from firebase but if we do that we're gonna get a console warning that tells us we're bringing in everything and we shouldn't we should only bring in what we need because we're not using authentication we're not using storage file storage or anything like that so what we can do is do firebase slash app and then right underneath just import inside quotes firebase slash fire store because that's all we need is the fire store alright and then we'll go down here and let's call firebase dot initially zap and then this is going to take in an object with all that stuff that I showed you before we go back to this page this firebase config we just want everything that's in here and obviously you want to use your own not what I have here so we'll paste that in alright and then lastly we need to export a variable called DB and just set this to firebase dot firestore and then what we can do is import this into any file we want and we can then use our firebase firestore okay so this file should be all set we can close that up and now if we look in our app dot view it just has some boilerplate stuff here this is the beautifies stuff that you saw I'm going to go ahead and just get rid of this V app here I just want the template the V content I'm sorry I do want the V app like that so v app V content and then we're not using this dummy HelloWorld component we're actually going to have a component called calendar which will come in from components slash calendar and then we just want to enable it down here okay so we'll save that now let's go into components and we can just completely delete the hello world and let's create a new file called calendar dot view okay and in here we're going to need our template and then we need our script and I would definitely suggest if you're using view Jas to use the veter or is it the Vita extension right here because this will give you like syntax highlighting it'll allow you to use Emmet and stuff like that so definitely would recommend this if you're using view with vs code so on the template for now let's just put an h1 and calendar just to get something showing and now if we go back to our application let's see oh we didn't embed it up here in the V content we want to embed our calendar all right so there we go we just have an h1 and let's open up our chrome tools over here and get the console up good now as far as the the mark-up or I should say the template I'm gonna just grab it from we're gonna start off with what they have as an example here and the the calendars component documentation so down at the bottom you'll see this right here and if we click on the source code we have a template and script to give us basically what is just the front end and it has a bunch of hard-coded events as you can see here so we're gonna use this as a starting point I already tried to do this tutorial with typing everything out and it just it took forever and it's just repetitive so I'm gonna grab this template here so if you're following along you can just grab the whole thing okay it looks and then we'll just kind of go over it and what each of these components mean and some of the methods that are being called and so on so back in our calendar component let's just paste this template in and if we save it just like this and we go to our application it's not gonna work we have a bunch of errors here and we're gonna have errors for quite a bit just because just because we were the methods aren't created yet stuff like that but let's go over this before we do anything so with beautify if you've never used it before it gives you a bunch of custom components it has its own little grid system kind of like bootstrap so what we're doing is creating a row with a fill height for a class which will fill the whole height of the row and then a V call so we're just gonna have one column and everything is going to be inside that okay inside there we have something called a sheet and a sheet is kind of like a container it's you put other components on it and if you go to the documentation for beautify you can see over here on the side sheets so any component that you see that you want to learn more about you can just open that up here and it will give you an example it'll give you examples it'll give you the props different props events slots and stuff like that so you can read all about its this isn't a full beautify course but you know you can learn a lot in these Doc's so we have a sheet and on this sheet we have a toolbar okay so a toolbars is like a like a navbar and we have a bunch of buttons here the first button is to set it to the current day okay so we have a click event here at click and then set today all right underneath that we have two buttons one is is gonna call previous one is going to call next and they just have these chevron icons so basically this is right here so these these two so this will call next this will call previous and those are methods that we're gonna have to create okay underneath that we have a toolbar title with the actual title that's gonna be this which is going to be different depending on what the type or what the view is okay so you can see that changes and we're actually going to have a computed property for that because that's going to be different depending on whatever view were looking at all right then we just have a spacer then we have this V menu okay which wraps around all this stuff so the V menu is actually this okay so day week month for days so we can choose the type here and that's what this is alright you can see we have a list with list items and when we click one of these it just changes the type property to day week month or 4-day so type is something we're gonna have to have in our state or in our data for this component we're also going to have this type to label because we need a label for each of these four day week month four day and so on alright so that's that and then underneath that we have another sheet so under the sheet that holds the toolbar we have the sheet that holds the calendar okay there's an actual vcalendar component and that is basically this whole thing right here alright and this takes in a bunch of a bunch of props so you can see we have a reference of calendar v-model is gonna bind it to a piece of data called focus which is going to be basically the today's date and then the colors primary you can mess with that if you want events is going to be an array of events in the example that we're just looking at it's just a hard-coded array but we want ours to come from firebase we have event color which we're setting to a method called get event color because we want to have different colors for each event now is gonna be set to today which is gonna be a property or I should say a piece of state and our component the type which will be month week day for day and so on and then we have some events so we have different kind of click events so if we click on the actual event that ref that references this right here so if I click that that's calling show event okay if I click on this date or this more this is click date this is click more and you can see in our code we have click more and click date are both calling a method called view day okay so all these are all methods that we're going to have to create and then the change event represents this here when we go ahead and change this whether it's the month or whether it's the day that's going to be the change of all right so that's vcalendar and then underneath that we have this V menu which is going to be the selected event okay so it's going to be bound to this selected open which is going to be a true or false if it's true this will be open if it's false it won't and then we have our selected events where we can output the name and details and stuff like that so basically this right here which we're going to change up for instance we're going to have a delete button here we're gonna have an edit here we're gonna get rid of these and we're also going to have a text area so that we can click right in here and edit it okay so that this this will be a little different this part here and then that's it for now we're gonna add some other stuff like a new event button where it it opens up a dialog to add a new event but I think we can work with this for now so let's go down to our script and we need to add some stuff in here including our data so data is just a function so we're just going to set this to an arrow and we're going to return an object okay and then we just want to have all the different properties or the state for this component inside this data function so first thing we'll have is today okay so today is plugged in to the V calendar right here as the the now prop all right so to get today's date we can simply do new date and we want this in ISO format so we're gonna say to ISO string now this will give us the day and time however we only want the date like the 2019 - whatever - whatever so what we'll do is we'll use the substring or sub STR method here and say we only want the first 10 characters should be a comma all right and then we're gonna copy this down and then we're gonna have the same value for focus we want it to focus on today's date by default all right and then the type is gonna be basically the view and we want it to be month by default okay then we have type two label so this is going to be an object where the key is the actual type and then the value is the label so month week day and then there's also a type called 4-day so we actually want to put that in quotes and say for day and for the label we'll say four days okay so that's type two label now each each field of the event we need to have in here like the name and these are going to be set to null by default so name details start remember this is this is the stuff we have in firebase and and color but color will set a default here so let's do hexadecimal one nine seven six D two as our default okay now when we edit an event it's gonna change up the UI a little bit because it's gonna add a text area we're gonna have a Save button so we need to know if an event is being edited in which one it is so we're gonna have a currently currently editing value and by default this is going to be no but if we're actually editing an event the ID will go into here okay now we also need to know which event is selected so we're gonna set selected event and just set that to an empty object by default and the way this calendar works we need to know the Dom element as well so we want selected element which is gonna be null by default okay and if it's open or not so selected open which will be set to false and that just represents if this this right here is open or not right now it's set to true and when it's not it's set to false okay so in addition to that we of course we need our events which is going to be an array of events you could hard-code some events here but we're gonna be fetching hours from firebase so we'll start with an empty array and then we're gonna have a dialog set to false and that just represents the new event modal or dialog pop-up which is going to be false by default because it's going to be closed okay now let's go ahead and let's say let's save this for now and see if the calendar actually shows which it does okay so the calendar showing now we're still going to get a bunch of errors because there's a whole bunch of methods that are being called that we haven't created yet not being called but are set in the code so let's let's get our events from firebase just so they can display on the calendar and those are going to be put into here I'm sorry this should be an ass events okay so underneath the data we're gonna use the mounted life cycle method so mounted gets called when the event I'm sorry when the component is mounted and we're gonna call a method called get events alright now to create a custom method we create a methods object and then we put our methods in here and we want one called get events and this is where we're gonna work with firebase now in order to work with firebase we need to import our database so inside curly braces let's import DB from at meaning just the root of our app and then the main J's file okay now this firebase object that we have it returns promises so instead of using the dot then syntax I'm going to use a sync await so we want to label this function asynchronous okay and then to work with firebase to get our documents we need to get a what's called a snapshot and we can do that by getting from the collection we can do DB collection and then dot get now this is going to return a promise so we need to await this we also need to pass in the collection name which I called Cal event all right so that will get the snapshot what we want to do next is loop over the snapshot and get each document and we're going to initialize an array here called events that will basically what we'll do is we'll loop through and then we'll push the event into this array on each iteration now before we do that though well let's do the loop first so snapshot dot for each and this takes in a function and it's gonna take the doc as a parameter and then for now I just want a console.log doc just to show you what we get okay so this should run automatically because we called it in the mounted life cycle method so let's reload and then look down at the bottom here so this is what doc gives us and what I want you to take note of is the ID because that's something we definitely need we also need the data which you can see is not in a property here it's actually in the prototype inside of a function called data our method called data so if I go ahead and I do console.log doc data parentheses and then we take a look down at the bottom now you can see we actually get each event - the ID the ID is not in the data prototype in the method so what we'll do is inside this loop let's go ahead and say let app data equals doc dot data which is everything but the ID and then we'll take app data and add the ID by setting it to doc dot ID all right and then finally we just want to take that events array that we just created and push onto it each document or each app data and then underneath the loop we're going to set this dot events which pertains to this right here the the data or the state and set that to events all right so now that should be set and if we tech check out our calendar we have our events being displayed because they're being passed in up here in the V calendar right here events we're binding it to the events data so hopefully that makes sense and this could come from anywhere this could could come from like a an API that uses Express and MongoDB you know it could come from anywhere where we're happening to use firebase but it could be anything it could be just hard-coded any events you could just plug into that calendar all right so now that we've done that let's do the event color notice we have this we're binding event color to get event color so that's pretty simple so we'll just add that to our methods which will go under get events and let's say get event color which takes in and of the the actual event of that specific event and we just want to return event dot color because that's part of the data and now if we look now we have those colors so the next thing I want to do is the show event so if we click on this right here we want that pop-up so we can actually go back to the the Doc's here and this calendar if we look at the script it has a lot of the stuff we're doing is gonna be the same as it is here this just obviously it doesn't have the firebase stuff so where as already a show event so we're just going to grab this show event here so it starts here ends here actually we could grab the update range as well actually you know what let's just grab everything that that could that we can use so from view day down to this very last nth method we can use this so I'm gonna copy that and then it includes get event color so we'll just paste that in alright so I'll just save this and I'm just gonna go over this real quick so the show event actually gets passed in an object and we're destructuring it we're taking out the native event meaning the actual JavaScript event because we need that we need the Dom element and then the actual calendar event so here we're just creating a function called open where when called it it adds the selected event or it adds the current event to this selected event property which is in our data right here okay now in order if the way this works is we need to set the selected element as well and we can get that from the native event that's passed in and just get the target that'll give us the actual Dom element okay and then here we're just running set timeout with just just adds a little delay to whatever we do here and we're just doing a 10 millisecond delay and then we're setting selected open to true okay because remember when when we're looking at the selected event when we click and we get that pop-up that's selected open is true now down here we're just seeing if selected open is true if it is then we're setting it to false and then we're gonna open which will then set it to true okay if it's already if this is already true if not then we simply call open and then we just call stop propagation which will do just that on the native event so let's go ahead and save this and now if we go back to our application and we click on one of these we get the little pop-up so selected selected open is now set to true and then selected event contains this actual event if I click on this one selected open is now true and the event is now this business trip event all right now if we click on the day here we'll just show you in the vcalendar so if we click on right here click date or click more if there's a more button basically if there's if there's enough events on the same day you'll see a more button automatically if we click on either one of those it calls view day and down here for view day it simply sets the focus to the date that's passed in here and then sets the type today because by default we're viewing the month so if I click here it just goes to the day and then this still works sky so it just calls you know selected calls that open function and sets all the selected open and selected events stuff like that so we can change this and go back to month and we can view few by four days by week and so on so we get a lot of functionality here with very little code very little JavaScript let's see set today is simply gonna set the focus to the today value so if I go to day view well actually let's just click on like the 18th and then I click on this today it brings me right back to today so that's what that does okay what else we got here previous and next we're gonna use the calendar API which has a method called previous and next so this this is basically done for us if we click this here it calls next then it goes to the next month now we don't have our title here that's something we're going to have to add we can probably do that now so if we go to the script here and we check out the computed so basically in view jsut can create a computed property and we're setting this title to a computed property based on a bunch of different things here so and this ends down here so we have a month for matter because we have part of the calendar API is this get format and we can set it to like you know the full word December or just Dec and so on and then we also want to make it so we can have like first with one st or third three rd and that's where this nth method comes in it's looking to look at the day that's passed in if it's greater than three and it's less than twenty one it's going to use th you know fourth fifth sixth seventh all the way up to twenty twenty twentieth okay but then we have twenty one which would be twenty first which would be this st so then we'll pass in this array here and then that enth method is getting called like right here so start day equals start day plus this dot nth and then we pass in the day okay so we get the correct suffix suffix i think that's what it's called yeah suffix year and then here we're just doing a switch looking at whatever the type is if it's a month then where we want to return the month as the title or them I should say the month in the year if it's a week or four day then we want the month the start day start year so let's just grab this whole computed property here so including the month formatter so this ends right here right above mounted okay so we'll copy that I definitely didn't want to type all that out and then we'll put this right above mounted all right and it's it's affecting the title which the title we're displaying right here in the toolbar so let's save this and then let's go back okay now if we go right to our application there's nothing here but if we go to the next now we get November 20 19 December January 20 20 and so on and if we're in like week view it shows you know the the month the day the year then whatever the range is okay and it does it all automatically now this is kind of close to this so I'm actually gonna add a helper class just to add some margin to this button so if we go let's see where is its Chevron right this V button right here I'm just gonna add class M R - 4 and then that should push it over a little bit yeah there we go okay that looks better so we'll go back to today let's go to month view though all right and then we're just getting this message that says full width has been removed you can safely omit it so I guess we can get rid of would it be useful with right here so this V menu right here we can omit that and that will get rid of that warning for us it should okay so now we have no warnings or errors the next thing I want to touch on is let's do let's do let's let's handle this because this pop-up right here is gonna be different and we also want to add the functionality to edit and delete and then once we do that we'll add in a button up here to add a new event which will open up a dialog and then add a new event to firebase all right so let's go up to the V menu which is the pop-up or is it right here so this this whole V menu right here is what I just showed you that pop-up you can see the pencil icon and all that stuff the the event color is set here the details the event selected event name and so on so this opens up when select open is true because it's bits bound right here with this V model and we want to just change the look of this a little bit and we need to make it so we can edit it and so on this icon here I'm going to change to delete because this is where I want the Delete icon and on this V button right here we're going to have a click event and we're going to set that to delete event and then we just want to pass in the selected event ID like that okay so we'll create that in a little bit now down here we have let's see our V toolbar title with the event name that's fine we don't need the heart icon button or this right here we can get rid of those two things okay and then in the V text is where we want to add we want to add our form so I'm gonna get rid of this and inside V text let's say form and let's first handle if if it's not selected so basically if we're not editing so we'll say V yeah we'll do a VF directive here and we're just gonna say if currently editing remember this value is null by default and if we're editing it's going to contain the ID of that event so if it's not equal to the selected event ID then inside here let's just show the details so we'll just say selected event dot details okay now underneath that we're gonna have another form tag with AV else okay and what I mean by else is this so if it is in fact if currently editing is equal to the selected ID then we want to have a text area actually we don't need all this crap though so we're gonna have a text area but remember we installed that package called text area Auto subview text area auto size we're going to use that simply by adding text auto size like that all right and then we can pass in here some props okay we don't want anything inside the tags but in here and the props we want to bind this to the details property of the selected event so selected selected event dot details all right and we'll just say type oops type is gonna be text and let's do style equals and we can just pass in here with 100% and we'll give it min height so we can do : min height here just changing the look of it min height 100 and then let's add a placeholder of add note all right so I'm trying I'm trying to keep this as close to the actual code in the repository as I can all right so if we save that and we take a look if we click here so we have our delete button and then here we have our form now we're not in edit mode so what we'll do is we'll add a button down here to basically switch it to edit mode so in our vCard actions we're gonna keep this so this is just to when we click it it'll set selected open to false which will just close it so let's change that to closed and then we'll copy this down so for this V button here let's get rid of the color we do want to keep the text because that's just a style of the button it's looks like regular text and we need a condition here so let's get rid of that and let's add a V if so we're going to say if the currently editing is not equal same condition we have up top if it's not equal to the selected event ID then we want to show an edit button because it's not in edit mode so we need a way to get it into edit mode so we'll have a click event here I would say click and we're going to do click prevent which will just prevent the default behavior click dot prevent and we're going to set that to a method called edit event and we want to pass in the selected event okay and this should be in quotes here oops here and here okay so that's our edit button and then let's see underneath that V button we're gonna have a Save button for when we are in edit mode and we need to save it so let's actually we'll just copy that V button and let's see we're gonna have instead of V if it's gonna be V else so we simply need to do V else and it will run if this is not true which means we're in edit mode so let's change this to save and we're gonna change we're still going to pass in selected event here but we're going to change edit event to update event okay edit event we'll just put a put us in edit mode update event will actually update the event in firebase so let's save that and if we go back and we take a look now we have close and edit now if I click this nothing happens we get an error because edit event is not is not defined so let's go down here and let's create edit event and remember edit event is just to put us in edit mode it's not gonna deal with firebase or anything so let's see we'll put this so put this like we'll put it right above show event so it's a edits event I'm sure you put a comma here as well UPS comma here and let's see edit event takes in the selected event and then we just simply want to set this dot currently editing we want to set that to the selected events ID and that will put us in edit mode so if we save that and we go back and now we click Edit now we're in editing mode and notice I can change this and we have our Save button displaying now it doesn't do anything save doesn't do anything if I reload this it doesn't save it because we need to add that functionality so when we click Save if we look up here when we click our Save button it's gonna call this update event so that's what we want to add next now this is gonna this has to do with firebase so I'm gonna put this up at the top so put it right under get events okay I want all the firebase stuff at the top so get events ends right here so let's say update event okay and this is gonna be asynchronous since we're dealing with firebase which returns a promise so let's see we're gonna want to wait and we're going to use that DB object and then collection so basically we need to just select our collection which is Cal event and then we need to call dot doc and inside here we want the ID of the document we want to edit and we can get that from currently editing ok this dot currently editing and then we want to dot update and inside here is where we pass in what we want to update so we're gonna pass in an object and we just want to update the details okay so we're gonna set the details and this gets passed in the selected event and we're gonna pass in the event details okay which will be the updated details after we edit the form all right so let's see once we do that so we're gonna go under this await let me just save this it'll format it just because I'm using auto save auto format so underneath that we want to close the selected event so we'll say this dot selected open which is true right now we want to set that to false so that it closes it and then we also want to set the currently editing back to null okay we don't want that ID hanging around in here so we want to set that to null all right so let's try this out so let's go to doctor's appointment and edit and let's change it to let's say 3 p.m. and save so it closes up we get 3 p.m. if I reload and we go back here 3 p.m. so it actually updated in firebase ok so we can do that now let's do the delete the delete is is pretty simple so we already have we already have the button or the icon here and we click you can see we get an error because delete event is not defined so let's define it we're gonna go right under the update and do a sync delete event which will get passed in the event okay and then whoops what I do okay and in here we're going to a wait DB dots collection and it's the Cal event collection and then we need to do dot doc and we just pass in the event and then we can simply call dot delete okay so it's a pretty simple API that we're dealing with and then after we delete so we're gonna go right here we want to set selected open to false just like we did above and then I just want to get the events again so we're gonna call this thought get events after we delete all right so now let's see I guess yeah I guess we'll just go ahead and delete our doctor's appointment so delete and there we go goes away and if I reload it's still gone so the last thing we need to do here is take care of adding a new event so we're gonna add some new markup or some new template so we're gonna go up here to the toolbar and what we're gonna do is have a new event button so let's put this right above this button here we'll just grab this and throw that in there and let's say new event okay and let's say V button let's not do outlined let's actually do color equals primary and you can look all this stuff and beautify there's a lot of different styles and colors and stuff like that and let's actually add dark to this as well now when this is clicked okay so when new event is clicked we're going to set the dialog property that we have we want to set that to true okay which is it's false by default but we want to set it to true so let's save and just see if that shows up okay so it does we get a new event when I click that dialogue is getting set to true now nothing happens because we haven't set anything to happen yet but what we want to do is create a video log component and if you go to the docs here and you look at dialogs okay so it's gonna be something like this and I want it to be a form where we can add a new event alright so back here let's go right under the toolbar sheet so the toolbar ends here and the sheet ends here and let's put in say add event dialog all right so we'll add a V - dialog and this is gonna take in a V model because we only want this to show when dialogue is true so we want to bind this to dialogue all right we can also set a max width here and we're gonna set that to 500 all right and then in here we're gonna have a vCard just to make it look nice will have a V card and then a V container and then in here we'll have our V form okay now this form when we submit it let's do a submit and dot prevent because we don't want it to actually submit so we want to submit it to a method called addevent okay and then as far as the text fields I'm just gonna paste these in just sort of the type so much so we have V text fields which are just text fields in a form and we want to set the model to whatever data we want to basically bind this to so we have our name type text label is event name then we have our details our start date which is the type date end which is the type date and then color which is going to be type color so this is gonna open up like a color palette or a color picker okay and then under that we just need our submit button so let's say V - BTN and actually yeah we'll say create event and we need to add some stuff in here so one is gonna be tight submit because it's a submit button we'll say color primary give it a class of margin right 4 and then when we click this so I'm gonna say click dots stopped and when we click this we want to set dialogue to false which will then close the dialog all right so it'll submit the form to this function add event and it'll also set this to false so that the dialogue goes away once we submit all right so now the last thing we want to do is add the add event function which we're gonna put down here let's put it right below get events and above update event so async out event okay so this is gonna we're gonna deal with firebase here as well because we want to add a new event to our database so let's first do just a little bit of validation here so we'll say if this because we want name and start and end to be required so in this else here we'll just do an alert and we'll just say name start and end date required and you could handle this more elegantly if you wanted to like create an alert component of course you could do that but this is just going to be a standard alert all right if those things are included then we want to await DB dot collection and we're using Cal event all right and then we can call dot add and then we can pass in an object and we can set our values so this dot name details the start details start start start and and we also have color alright so that will add it to the database and then immediately after I'm just gonna get events again and then we just want to clear all of our data so this dot name is gonna equal nothing just copy this down so we have name details start and in color okay so that'll just clear it up alright so let's try this out let's go back to our application and new event and we'll just do doctor's appointment I'll say doctor Johnson at 11:00 11:00 o'clock a.m. and let's see for start we'll say the 16th and also the 16th and then if we click on this line we get a color picker and I'll just pick I don't know this color here and if we close that up that should be selected and then create a vent and there we go ok so over here we're getting the format is where our Institute oh so I think that's yeah it's talking about when we clear the color value let's set the color back to the default remember in our data or is it right here let's just set it to this and that should get rid of that warning right so we'll save that let's reload this and we'll just try one more time to add an event I'll say meeting with actually let's do a multi-day event so we'll say vacation in I don't know Aruba detail okay so we'll do let's actually span it from like will say October 30th to let's go to November 4th pick a color here and create event okay so now we didn't get that warning over here and you can see this span so if I go to the next month it spans to the fourth awesome and we can edit it if we want awesome vacation and Aruba save and that gets saved good so that's it now we have a calendar the where we can we have basically crud functionality for events and we can do all types of different views if we want to view by week we can do that scroll through it if we want to view by day we can do that if we want to go to today so I mean I think it's you know it's a lot of functionality for a small amount of code so the code for this will be in the description this github right here and if you check out Jas fanatics repos there's actually multiple versions of this calendar you have the one we just did and then there's one that uses view X with firebase there's one that uses the Mearns I'm sorry not the Martin the mevin stack if you want to get into like Express and node and there's one with mevin and view X so you can definitely check those out as well alright so that's it guys hopefully you enjoyed this project if you did please leave a like and I'll see you next time

Channel: Traversy Media

Views: 92,010

Keywords: vue, js, vuetify, vuejs, firebase, vue firebase

Id: 2NOsjTT1b_k

Length: 60min 56sec (3656 seconds)

Published: Mon Oct 14 2019