Creating Horizontal Calendar Control In .NET MAUI

hello guys welcome to my channel in this video I am going to show demo about creating horizontal calendar control in.net mavi application so let's go through it here I have created one new project called origin calendar control so in that I am just going to add now custom control okay so here in custom controls folder I am just going to create horizontal calendar layout and that logic input behind of that page so here I am just going to add.net mavi continue so calendar view layout I'm just going to add here and instead of content view I'm just going to use State layout also in a code behind I'm just going to change this continue to stick layout and here I am going to use collection view to bind date list so for that let me create a one model first so here in this project I'm going to add new folder called models and in that I am just going to add calendar model so new class calendar model class I am just going to add here I am going to create one date time date property now here in calendarview.chamel.cs I am going to create observable collection of type of calendar model now let me create one method called bind it saying that I am going to bind data to these dates observable property so when this calendar view is initialized that time I'm going to pass current date so it just quick to highlight so what is the current date so based on that date it is going to highlight in calendar UI so first I am just going to find how many days and days days in month based on the date so for that I'm just going to use date time dot days in one and here I am just going to pass selected date third year and select a date dot month okay so from one two days count in this for loop I am going to add data in this dates object so here I can pass here month and day now let me bind these dates observable property here in collection view of this calendar view so first I am just going to set a name identifier for this Tech layout so based on this stick layout reference I can access this observable dates property so here now in collection view item source which is said in Source reference to this take layout and from that I can access that dates observable property now here in collection we've got item template I can just design the layout okay so this data template is going to be diaper this calendar model okay so here I'm just going to use border and in that vertical stick layout so first I am just going to display date in like a three character format Monday so it's just going to display ammo and Tuesday then it's just going to take three character of the date connected is date in number so food and I'm just going to use single character update hearing collection view dot item layout I am just just going to set linear item layout foreign okay now this calendar view let me just access here on main page and let's see how how it's looking so put it here I'm going to add namespace of custom control foreign dates in this calendar view UI Okay so it's a display dates here in calendar collection here UI okay so now I'm just going to implement like whatever the data is still at that just going to highlight this border layout and as well as it's just going to display here in one label so let's Implement that okay so here in a calendar view.chamel.cs I'm just going to create bindable property for selected date so here that property name will be selected date then that going to be type of date time date time declaring type will be the calendar view here I am going to set binding mode to where because I am going to bind this selected date property from UI also like wherever the calendar control is used from that I can bind it value is going to be current date thank you okay so this selected date I'm going to display here in a calendar UI and here you can specify any format like any format you want to display another thing I am going to create here current date command so what is the date I select from calendar that data I'm going to see set here in selected date bindable property so for that I am going to create here new command and this command is going to be type of this calendar model okay now this selected date is equal to whatever the current date I see like that is going to set here in selected date property now let me run there and let's see it's displaying whatever the date is selected uh here in selected date property okay so by default November 90 is selected and sorry I forgot to buy in this command I have created this command but uh forgot to bind here so hold that here I need to bind border.js recognizes uh just to recognize it and here I'm just going to set my current date command and that command parameter will be there current object okay so now whatever the data I select that date binded here in selected date property now I want to set here some background color which what is the date selected then it's just going to highlight this border so for that here in calendar model I need to create one Boolean property to identify where what is the date is selected that date property here which is going to be true so let's add that okay so first let me add here one property change model so whenever the property change that time it just going to set that Boolean property through here in calendar model okay so let me just add property change related code okay so now here I'm just going to create my Boolean property his current date and here this calendar model class going to inherit properly change the model foreign Ty become true that time here in calendar UI I just going to format this layout so here in calendar view.samal.cs here I will just set now current current date is current date property to true and before that I will just set all select all dates that is current property to call so otherwise it is going to highlight multiple date okay so first I will set is current date to false of all the dates from all the dates collection after that I will just add his current date to true so it's just going to highlight only one date now here in UI I am just going to set now triggered so when current date property is true that time background color and let me select any color right now light blue and if it is false in that scenario I will just set as a transparent now let me run the app and let's see so what are the date is selected in that scenario which is displaying that color or not okay so now here on the selection of date it is highlighting border only like when the application launched that time it's not highlighting because here in calendar view.chamel.cs here in bind methods I need to set this what is the current date here I am passing that date that is current date to true so let me just do that so now it is going to highlight that date and also here let me just select font size to also here I am going to set trigger for label like if the date is selected and I'm just going to set that background color as a white sorry that diagram color Mark Now text color I'm just going to set as a Supply now let me read in here okay so now what is the data I select that background color as well as text color is sorry now let me adhere left arrow and right arrow and based on Arrow icon selection I am just going to change my title previous month for next month so let's Implement that okay now let me add cons left arrow and right arrow icon here in resources images folder and also here I'm just going to add the layout okay so here now left icon and right icon I have added now I'm just going to create a command for this left icon and right icon so here on the click of left icon I just going to change the navigate to previous month and on the click of ride it's just going to navigate to next month so here in calendar view.jaml.cis I'm just going to create now to command okay now let me create one temporary variable of date time and on this stamped variable I am going to perform next month and previous month operation I can't do that on selected date otherwise whatever the date I selected that I am just going to use so here now on buying dates I'm just going to initialize this stamp date also whenever this matter call so let me just copy this and here instead of comparing this selected date now I compare this selected date and instead of selected it I'm just going to change this variable to update so it will not create confusion okay so this object going to return whatever the date is selected and here I I will check if the selected date is not null then I will set is current date to true and also here in the temp date I'm just going to set this date because when I change the month that time also I am going to call this bind it method and that scenario I do not want that it will select same date of next month or same date of previous month so that's the reason now I'm compared will be selected date variable now here on next month I can do something like temp date is equal to cam date dot add months and in that I will just pass one and then I will call bind date method and in that I will pass this stamp date so same thing here on previous month also and here I will just pass -1 also here in a current date command I'm just going to set temp date is equal to what if the data is selected so uh what is the date I select from calendar that going to set here in temp date and then if I hit next month then it is going to add months of current selected date now here in a bind date let me also clear data so whenever this method call so before that I will just clear existing data so it's not going to add every time data in this dates observable collection now this next month and previous month I am just going to add here in just a recognizer of image so here in tab just to recognizer I'm just going to set command so previous one command and maximum command now let me run the app and let's see it's working or not okay so current selected date is November 19 and if I change the months so that selected date still adjust here and when I select any date from next month and if I read previous month or next to next month that time also that December 3 will stay that's the reason I added selected condition here now let's uh Implement logic like what is the date I pass here in a calendar view uh select a date object that selected date should reflect here in UI also so let's add that logic okay so here now I create property change method for this selected date here I will check if the new value is not null that time I'm just going to create new date variable and here I'm just going to convert this new value into date time and here now I can call controls dot bind it and in that I can pass new date but here one problem like whenever the date selected date is going to change that time is just going to qualities control dot bind its method means every date selection is just going to invoke this method So to avoid that yeah I'm just going to check like if the control Dot term date dot month is equal to equal to new date that my also I'm just going to check it date dot year is equal to equal to new uh date dot here here I'm just going to catch current date song control dot date so this dates observable collects and from there I'm just going to catch selected date so if the current date is not null then I am just going to set current date that is current date is equal to true and all other date I will just set that selection foreign this logic because everyday selection is just going to call this method and if this temporary date month and current uh new date month and year match then it's just going to update this existing dates collection otherwise it is going to call this bindage now let me pass any deck from here so here on mainplace.gml I'm just going to initialize now select a date is equal to so I'm just going to add five days extra from current date now let me run the icon let's see it's a binding selected date or not okay so now it displaying November 24th so current will be the current date is 19 and plus 5 so now it's selected as a 24 November okay now like if you want to uh invoke some comma on date selects and like here on main page you want to add some selected hit command and whatever the date is selected there you want to perform some logic that you can achieve by creating one bindable command property so let's create that so here on render view I'm just going to create bindable property of selected date so selected date command property foreign command I can invoke here so whenever the date is selected Uh current date command so there I can just execute and in that I will pass whatever the date is selected so by that way it's just going to invoke that selected date command let me create event also because this selected command you can only use when you are using mbvm structure so here I'm just going to create one event so this on date selected event here on date selection I'm just going to invoke okay now here on main page I can use on date selected event as well as selected date command so let's just use on date selected event in the let's see on the selection update it calling this method or not okay so here on the selection update it is invoking this on date selected method so what is the data I select which is calling this method and similar way you can use on that selected date command also here on main page uh just specify selected date command is equal to binding and whatever the command you have created in view model that just specify here okay so that's all for today I hope you like this video and thank you so much for watching it

Channel: Programming With Pragnesh

Views: 4,042

Keywords: Calendar Control In .NET MAUI, Horizontal Calendar Control In .NET MAUI, Calendar In .NET MAUI, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: 8wPKujAApFU

Length: 35min 29sec (2129 seconds)

Published: Tue Dec 06 2022