How to Build an Ionic 5 Calendar with Modal & Customisation

[Music] hey Simone it's what's up welcome back to a new tutorial and today we're once again talking about the calendar in ionic so there are a few packages that you can use to create your own calendar and I think one of them is really the best for ionic it is also updated for ion 8/5 and we will create a calendar plus a nice little calendar mobile and also it's some customization for different elements of the container the calendar so let's dive into this I've already started a blank new ionic application and I installed the package which is called ionic to calendar there's actually a package the call is called I think ion to calendars so that's a different one it's also good but I still think this is one of the best packages as you can see it's updated for different ionic versions but of course we will use the latest version for ionic 5 there are a lot of options that we can use their love settings we can add there are different templates and customizations and we will take a look at a few of these things in our video so install the calendar and also generate a model since we want to create like a little model calendar or date picker because the ion daytime is not always what you are looking for so with that in place let's dive into our home module in first of all import the ng calendar module from ionic to calendar we can also directly add the Cal mobile page module since we need that one later as well now let's directly heat over to our home page and define a few things because we got quite a lot to do today I will bring in different snippets and of course you can find the article link below the video with all the source code as well so let's get started the calendar first of all needs an event source which are basically the events that will be displayed in the code then we got the view title which is depending on your view either the month the week or the day name this will be changed from the component as well then you can define some settings for the calendar we will just start with the month view and set the current date to today and the selected date I actually don't know if we actually don't think we need this anymore there wasn't a previous one so once we got this we can also add all missing imports for view child and the calendar component since we can now access the calendar from code as well Purple's simply add the first calendar view and let's dive into the HTML and edit perhaps we will take out a few of these things for now so basically we got an event source we got the calendar mode and we got the current date and that okay I should save both files there will already give us the first view of the calendar which is like the default view and actually the default view is pretty cool so far but we can still change a lot of these things now let's add different functionalities like going backwards going forward and to do so we can go to our each TS file and add two functions the calendar uses the ion slides so we could actually take a look at this as well so well there we go you see here are the ion slides actually it has three slides the previous one the current one and the next one and therefore we can simply access it directly through the component with slide next or slide previous also as I said we can automatically change the view title more or less automatically we should implement one function that simply changes our view title and now let's go ahead and add them from our code as well so let's do a little row with the size with a button to go back with a button to go next and the current view title in the center as well with that in place we now already got a nice view oh yeah of course we need to add this to the calendar as well so the function we need to add is on title changed and we can call our own view title changed and now we should see we got May June everything in here so that's already a good start now what you can do is wall well you can do a lot of things but we will take a look at few so first of all let's say you want to localize this to do so you can import from angular the language package that you need and you need to call register local data I'll just pick the German package whatever go with a Spanish package or the French package or anything you might need and once you get this you also need to see or add a new array of providers and in here provide the local ID which you can import from angular core as well to our module file and now I have set this to German and there we go we got the German tiles in the view I think you could also change this dynamically but we will just do this as a little example on how you can localize it so now we can close this one let's also take a look at how we can change the view because currently we are setting the mode of the calendar to month but we can change this also to week or date and let's do this with a little segment just simple segment buttons which are connected to the mode of the calendar and then you see we can nicely switch between the different views also the view title changes so here's the week here's a day and still of course our controls work they just well work on the specific mode so this will make a month forward or this will go a week forward now let's also add a few events I would see so let's add another row with two buttons really nothing special in this layout it's just a lot of code as I said you can find it in the tutorial but the functions are really the interesting stuff and to create these random events and remove events I took a bit of code a bit well quite a few lines from the package I think you can find it somewhere in is I think yeah here's the create random events function in the github repository in the demo folder as well so just took it from there I haven't changed anything so far the important part is simply to sending your event source to events you might get your events from an API or wherever you might have stored them really the important part is to set them to the events or so if you want to clear the view you set the event source back to an empty area and this is the object that needs to be pushed so it can have a title I could also have a description as far as I'd know start time and end time and all day these are the attributes that you can add perhaps you can actually also add home more I'm interested in this right now all the end times that I'm title I thought there was something like a description well looks like there's no more description well then we don't have a description but anyway now we get our create random events function so let's try this one out and add a random events and we see the calendars filled with a lot of event in a month view we got by default this little view at the bottom in the week view we just see them right in our calendar and in the day view yeah there's an event we see it with the hours on the side still you can tweak all of these settings like the names here the little boxes basically everything the colors everything could be changed we will take a look at this any as well but for now let's see how we can manually also add events to our calendar and to do so let's add a new function to open a mole so we go back to the home page and now I'm pretty fast today but it's really a lot of code and I just want to explain the important part of it and otherwise again the tutorial is the reference the written tutorial so we're going to use our card calendar modal page and we can go back up and import the private modal control hello please at the import thanks and you see it's a standard model but I also wanted to add a little CSS class because right now if we also add a button to actually open them all it will like usually cover the whole screen so let's add a button yeah yeah we don't need numbers very cool so just a little buttons arrayed to our toolbar and now it would open mmm yeah I think it opens like this because I already edit the CSS in here exactly let's get rid of this for a second so we can see what it looks like usually so standard modal are covering full screen but with a little CSS in the global s CSS because remember the modal is living basically above our usual application and therefore the model is not part of the current page but only part of the general application and therefore we have to define the custom class although we use it in our home page we have to define it at the top level of our application so would that CSS we got a nice little effect we've changed the hate gave it a little round border and a bit of padding on the sides as well so in here we could now implement a nice picker you could so I have this like perhaps inside a form where you want to select a date in one place and don't really like the date picker then you could unclick simply open this a calendar view would be an idea as well if you need something like this in your application so let's move on to our model page in which we of course also need the ng calendar module first of all and then we need a lot of other things of course basically we need to set once again the calendar options view title just like before now I will also create a little event that we can then later add to our event source in the main page again we will take a look at this in a second again but what is really a challenging or was challenging is on a device the calendar wasn't displayed correctly in a model i will implement it for now without the problems I encountered and then I will show you why I edit this so within the car calendar model page we of course need few input fields for event title or description although I really need to check if the description is still working but I'm completely sure it was working let's get also rid of this once again setting the calendar mode the current date which is like today on title changed so we can update it and now we also use on time selected since we want to click on a date and basically pick it so it would be like a due date for a task or anything like this and we can also lock swipes because currently I can actually swipe this but I wanted to disable this for our modal dialog and also for the header area well we just need two more buttons to close or save our view and also I haven't wrapped this in an ion header because on the device you would otherwise get a very huge header inside that modal and that's definitely not what you want well I think it's time for running ioniq surf again I think that's really so the problem was with a modal let the calendar I think he uses the size and a point where the modal isn't really initialized yet on the browser preview it worked all the time pretty great but once I connected it to my device it didn't really work like that the current date was not selected and the only fix I found for this will be implemented in a second let's what's wrong with you I think I still need to close that tick sorry perhaps we didn't even have to reload well anyway let's get my iPhone preview once again so here's now in the modal looking already pretty nice and as I said on a computer it is connected correctly but not on a device and therefore I edit this little ng-if modal ready and I edit the ready check within the ng after view in it and in there I also use this with a little timeout basically note real-time out you'll see it that's already enough to make it work on the device it's simply a little ugly fix I would say that it helps to show the calendar in the right way it was a bit unresponsive otherwise and this completely removed that arrow now we also got a few more functions in our model which are for example save which will dismiss the model and simply pass back the event that's a nice way of passing data back from a model to whoever called it so let's add I don't know why you don't automatically improve its that hard anyway how we got the same function like before and on time selected is always called when we are clicking on any box within the model and for close I will just dismiss it without any properties so let's check you I now click on a date we see the selected event select a time whatever and again whatever whatever so now we can import our data like Simon's event for I don't know which date this is test description I still don't know if that works and let's dismiss it and it will be edit Simon's event yeah it looks really like the description is not used anymore said anyway why is it edit because when we dismiss the model with an event we have an undid dismissed block in our homepage where we open the model in the first place and within here we check if the result contains some data and event and this is really like the event object I just edit or main it all day because I don't want to have the time labels in here as well what make things even more complicated but of course if you want to select a specific time or also have like the day view in here or the week view otherwise that's completely up to you I just wanted to show you this cool modal dialogue so for all day you need to set the start time to the right time and also the end time to just the date +1 that's the only difference and then these two lines are really the important lines you have to push the data to the event source and then call load events on the calendar again it also works if you completely reset the event source like we did here when we created the random events that basically triggers the same change like remove events as well so either called push and then call reload or load events or otherwise you would have to completely reset the event source to something else now this is the general calendar and modal aspect and now let's also tweak a few settings so you see how really how great this component is in terms of customization on this page for example I wanted to get rid of this and also for some reason the calendar is way too big so I check the CSS and if you dive into it which is always a good idea if you some don't understand something you should see that this is created from an ion list with a class event detail container I couldn't found how to disable this on a well good way so I created another way and that is using some CSS to access our calendar component which is encapsulated normally but with this line we're able to inject the CSS and target the event detail container and now let's check again now let's check again I don't know if it was refreshed actually hello why are you not reloading or what is wrong with you no event detail container let's try my second rule as well if anything is applied because this would change the heat of the view to not have this really huge white area looks like none nothing of my see is yes yeah because I'm in the home page that's of course the modal thanks for letting me know yeah oh it's great so here we go we could also change the hate of the modal it looks like because we now have just a small component it uses only the hate it needs and also we don't have area anymore since we've hidden it with display:none so this is the first step of how you could customize the calendar now there are more things that we can do for example on this view we also want to change how the days look like if you have an event or perhaps even show how many events are on a specific date and for all of these things you can inject custom templates and to do so let's go back to this one and change or add a new template all of these templates are basically listed right here if you scroll down you just need to know which one you should target whereas the view customization right here so the view we currently see is the month view so a month you display event in active display event detail template and it continues with the week view header template all-day template whatever and then the day view you really just need to find in which mode you are currently and which specific part you want to target with this but once you found out you can get started with a snippet or you can check this one out this is an example I basically copied this line and this one this is just the label and I will just remove this for now and test to it so we see what we're actually changing because that's not always clear I guess yeah if you specify the template you also need to tell the calendar which template it should replace the template is because we use hashtag template in here it could also be whatever anything else just needs to be connected like this and then you can set it to variables that you can also find in the github repository so we see here that's of course not what we want to see but we see we are targeting these cells now what I wanted to do was have a little indicator of how many events were on a specific date a very legit request and what I did was create a little container and event indicator for all the events of this specific row you could check all the values actually like this so that would result in a very ugly view but you would actually start to get a sense of the values let's see there we go there's actually an event every label secondary disabled selected whatever a bit hard to read but it's enough for us so that's why I used the length of the events to create event indicators and for the indicators I just added a bit more of CSS to the own page like yeah I should really remove that from the block the container to make it align a bit more Center and then the indicators just small objects yeah that should be label I completely messed up the code of the creator right in here so yeah let's remove test before it looks ugly and then at random events and we see on the dates we got exactly the number of dots how many events take place on that specific day and with this logic you're now able to basically change everything of the calendar a few other things I added you already see that I checked if the current column template column let's call it column actually has an event and if it has an event we want to add the width event class that could look like this give a little bit of background color and border radius to it now because this still looks not completely correct you could dive into this once again check out what's going on and we see the class four row or column in the table is month view primary with event so once again just like we did in the model we can override that as well so let's add a bit more CAS formatted and set the background color to white and also the selected which is this one because this is not just primary this is month view selected as well set the background color to use something else because well you need a little something different which is now also displayed for whatever you select and now any random events give this view it's not completely fine but I just wanted to give you the right steps or the idea how you could customize this calendar with the little dots with a round border and you could completely tweak this we haven't touched anything from the L abuse because we just worked on the month view so it's really easy to customize all the different views of this calendar with your just different templates of things you want to write or have as data in them or also with the CSS rules so I really hope you enjoyed this updated tutorial on the ionic 5 calendar I think this package is still one of the best if you have any other recommendations of calendar components that I should check out please leave them in the comments and of course if you got questions about this component please try to ask the Creator who seems really like a great guy he's maintaining this package for quite some time so all the best to twins twins SPC thanks for this great component if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ironing with in-depth courses a community of like-minded developers so you can learn and built your EPS Festa you should definitely check out the ionic Academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive select channel so we can get your app powered I hope you enjoyed this video I will see you inside the next video have a great day and happy coding Simon [Music] you

Channel: Simon Grimm

Views: 18,841

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: _hVdPEmbwA0

Length: 26min 52sec (1612 seconds)

Published: Tue Jun 30 2020