On this channel. I've already talked
about all kinds of calendar functionalities for. Net Maui, but this time I have
another free visual control to show calendars in your. Net
Maui application. On this channel we've already seen a
plethora. That's right. I just wanted to use that word of calendar
functionalities for your Dynamite Maui application. We've seen the calendar store, which
is a plugin by me me with which you can read and write calendar data
into the device calendar store. So it's a very non visual control. We
have the X calendar which is a free control out there in the
community for you to use on all the platforms that are
supported by. Net Maui. Then we have the visual controls also by Teleric
and Devexpress. I got videos on those as well, so go check out the videos down
in the links below. I would recommend watching all of them from front to
back. Don't miss a second just so you can see what control is
the best for you. And also stick around for this video
because I'm going to look at another control which also shows you a
calendar inside of your. NEt Maui application, which it impressed me a little bit,
I'll be honest. So let's just hop over to the code and see what it can do. Ha
Fulja. No code here. This is first the repository where all
the code lives for this plugin. And let's do a collective
shout out with all of us right now behind your computer. Thank
you Yuri. Just say it. Thank you Yuri for making the time and
making this plugin available for free, which is a wonderful thing to
do. Thank you so much. The world, the Net Maui world is
a little bit better because of you. So here in this
repository is everything that you need to know to get started. I'm just going
to scroll over it very quickly. Actually, I'm going to borrow some
code also for our sample that I'm going to code in a little bit
here. But you can first see like hey, what does it have to offer?
Display events? That's really cool. That's kind of like unique what it has over at
least X calendar. I'm not really sure about Teleric and Devexpress and all
the other controls that are out there, but this is really cool. And that's what
I'm going to show you in this sample localization support based on the
culture info that's built in. Really cool as well. You can just bind
that. It's a bindable property which culture to use and boom, it should be
using that culture which is super cool customizable color so you
can style the whole thing and you can have bindable properties
like I already mentioned for the event collection, the culture and all kinds
of other things. So here are a couple of screenshots on Android, on
iPhone and actually I don't think it mentioned this a little bit down
below. This all uses only net Maui control stuff. So this works
on all the platforms that are supported by. Net
MauI. It does not use any platform specific stuff, it just use all the
things that are in that done. NET MauI abstract layer and that is
why it will automatically work on all the platforms out of the box.
So that's really cool. Android, iOS, Windows, macOS. So you can see
that consistent look and feel across all the
platforms, which is what some people definitely like. So what's new?
I think here it says like removed all platform specific code so
it support all the things that I just mentioned. Add multi selection
support so you can have like multi selected dates
which is really cool. A few more properties for customization and
refactored and revamped code. Who cares about that? If it works, it
works right? So the usage, well I'm going to show you that
actually let's just switch over to Visual studio that I have open
here right now. So I just created a file new. NET Maui Project which is
a plain new vanilla. Net Maui project which is here and I
did already install the Nuget package. So go over to your solution Explorer,
right click on the project and you can do manage Nuget packages. And
then there is a little fun fact here. If you search for plugin Maui
calendar, that is the name that I wanted to use
for my plugin the calendar store but it was already taken and that's
how I stumbled on this control. So that's a cool story, right? At
least I think it is. So here Plugin Maui calendar his icon is much
better than mine so definitely install it for that
reason alone and you have version 10 three at the time of recording so
install that only 1000 downloads yet so you can be one
of the early adopters. Install that on your. NET Maui Project
and you should be good to go. You don't need to do any
initialization line because it uses all. Net Maui stuff. So you can just start
here by adding that XML namespace that you use for whenever you're going
to do this in UI. In XAML, you can totally also do this
in C# if that's what you want. But I'm going to do it in
XAml because I love my XAml and here I'm just going to
search for calendar and you want to have the plugin Maui calendar controls
because that's where kind of like the visual controls live
and all the rest is kind of like supporting, right? So we're going to
add that one. I'm going to remove all of the other example right here.
So no scroll view, no nothing. And what you can now do is do Cal. And
this can be anything, right? That name Cal can be anything. Colon calendar. And I can just use
that calendar right here. So now there should be a calendar. So
let's run this on Windows right off the bat. And we should see a calendar
coming up on Windows without any styling because I just put it inside
of that big content page, right? So it's going to be probably
full screen, which is not really a great thing to do on a desktop app,
but that's the way it's going to show up. Well that will be if I fix
my build errors right here. I removed all of my XAML,
but in the code behind there are still some references to the counter
button. So let's just remove that one. Don't need it. Remove this
count right here and now we should be good to go. So let's
try that again. Run on Windows. And we should see that windows window
coming up with something that's very similar to the screenshots that
you just saw on the repository. And from there we're going to add
little events. You're going to get a little bit educated on data binding right
here and templates. So exciting stuff. Make sure to stay
here on this channel. So here you can see this is the calendar and
it's not too bad, right? It's a little stretched out, but people like
that with like bigger UIs and minimalistic designs. That's all I
do because I'm a terrible designer. But here you can see today is Thursday
9 November 2023. And now you can click
around and you can select it and you can see the date showing up down
here. And this is also where events will show up. So you can
actually have events in here and you will have that kind of like if you're
using IOS, you can have that calendar app. This is basically your
whole iOS calendar app. You have this calendar in the top with
all the dates. You click one and then you get the events at the bottom
and you can scroll through them. That's all incorporated in this free
control, which is really amazing. You can flip through the years, you
can flip through the months obviously. And there's all kinds of stuff that
you can do. Let's take this a step further. I'm going to go back to the
main page right here. And what I want to do is now get those events.
So I'm going to flip over back to the
repository right here because if I scroll a little bit further, you can see all
the things that you can do, right? You can see the shown date, you
can actually go there. You can do all these kinds of things.
You can set the selected date, obviously. But now I want to actually
show you how to set events. So there is one event, the
event collection that's built into the model's namespace right here.
So I'm just going to copy this right here. Go back to my visual
studio. I'm sorry. I'm going to flip around a couple of times here and I'm
going to set this in the main page. If you want to do proper MVVM,
you're going to do this in a view model. But for now I'm going to
do this in the same page. The working should be the exact same.
Here you can see using plugin MauI calendar models, it will know
that event collection and you can use your own models
together with this event collection. The only thing that you need to do is
use this event collection. For the rest you can specify your own models.
So here you can see Yuri has used the event model, which is not
something that's built in, that's something that you can provide. But
I'm just going to copy this. I can do that with this button here. And what I
then can do is go back to my visual studio and add those events right here. So let's just add them
here in my main page. And it's not formatted really nicely.
So let's add a couple of tabs right here. And now I
need this event model, right. So I can actually let this
generate, I guess generate class event model. Here we go. Where is it
going to be here? Internal. And I can say prop and I can say string. Name. Whoops. Tab. Name. Tab. And it's done. You know about
snippets, right? Visual studio snippets. I have a short about that. So go check
it out. And a description. Copy and paste. And now this one is
going to be description. And now we have the same model.
There's a little error here. Yuri, if you're watching this, there's
a little error here in the copy that I, the code that I copied.
So now we have this event model. So you can see this model can be
anything that's coming from your back end that you're implementing in your app
can be anything you want for maximum flexibility. But now this is events,
event collection. So that's in there. I would assume
that this is kind of like updating automatically. So it's kind of like an
observable collection. Whenever you add something, it will go automatically. I
didn't test that, so go check that out. It's probably in the documentation.
And what I want to do here, lastly, in this main page constructor
is set the binding context so that it shows
up in my example as well is this. And typically you would
do your view model here, right? So I'm now going to bind it to
the same page. But typically you want to do this to the view model. So
we got that set up, and now what I can do is say, hey, I
want to have this events. You can see all the properties here,
right? There's not enough time. You're going to be bored watching this video.
But there is so much stuff going on here. Arrows, background Arrows,
border, color, arrows, color. You can customize the whole arrow, which was the arrow
you didn't probably even see yet in the demo just now. You can do, of course,
days, like days, title days, style days,
kind of all those kinds of things. And here we have the day, day, label,
date, title, color, all kind of styling options.
Most of it, I think, is bindable properties. So you can do
all of that. We have that culture that I mentioned just now, so you can
bind to the culture there. But what I'm after right now is the events. So
with the events, we can actually bind to a collection, the event collection
with which we can show events on this calendar. So I can say here, binding
events, because events was also the name of our property in our
code behind right here, our events. And in that event, I
actually skipped over what we were putting in here, but we have
these keys. Datetime now is new list. So each date is going to have a list of events for that date
of event model, which can be your own
model. And here for today, we're going to have these two events. Then five
days from now, daytime, now add days, we're going to have another two
events. So let's get this a little bit more in place here. Then
three days ago, we're going to have one event, and
then some custom date. In 2020, we're also going to have one date.
Now, just for fun. So I set this binding context right,
so that it all wires up just for fun. Let's run this on Android now. So
I'm going to select my Android Emulator API 33. I'm going to run that and now
it's going to deploy this exact same code on
Android and we're going to see how it behaves there. We're going to
see that same calendar with the same styling build on just Net Maui
elements and we should see basically the same exact look. BuT
now you can see these little, maybe it's not
really clear on your screen. You can see these little dots down here which
indicate that there are events. Now you don't see them yet. You can see the date
changing down here. You don't see the events yet, but we can change that and
we can change that even without stopping our application from running.
So another property that we have here is the event, let's
see, event scroll view visible and we can set that to
true. And whenever I save this hot reload will kick in.
XaMl hot reload and we can see here in my Android emulator that we now have these two event models in
here because this is daytime now and we had two events in here. We had
two for five days from now and one for three
days ago. Right, but this is just the two string of this event
model which is not super helpful. And this is where our data template
comes in. Right. You probably know that from collection view and list view where
you have data templates because out of the box this does not know how
to show this event model because that model
can be anything. So if I go back to my calendar right here and I'm
going to do calendar so I don't make itself
closing, we have this and now I can say Cal calendar event template and we can specify this template which
has to be a data template. And inside of here I'm just going to
do a simple vertical stack layout with two labels on top of each other
because the event model had two strings. So I'm just going to say text
is binding name. I think one of the things was name
because mind you now suddenly we're in the scope of an event model
and not the rest of our page here. So we can do this name and this
description. And now if I save this, hopefully hot
reload also pick this up. And now you can see the actual name
and description here. And if I go here you can see that we have these
two events with the title and the description. Now I can also do
of course this label. Let's make this font size a little bit
bigger, let's make it 25 and let's make it
attributes bold. LeT's make it something like
that. So we can see that that's a title. And you can see now we have this bold
title with this little description right here. So that's how you can
actually show the events here. And we can scroll this. So if there are more, it
will scroll automatically. If I go to another one, you can see that it
refreshes the template. The emulator is a little bit sluggish on my machine.
Don't worry about that. So you can see that this all happens
here. And I'm positive I didn't actually see this, but I'm
positive that there is events for also selecting the events right here. And
you will get event info and command info from that as well.
Now, as for the styling options, let me just show you a quick couple of
things. You can just say that selected day selected. I'm probably just going to find it
here. Selected day background color. And let's just make that red because
red is always a good color. So let's make that red. And whenever we do
this, you can see that this is now red, right? So hot reload works with
me right here. And you can see that this is now red. So that is nice
and stylable. And what you can also do is kind of
like, we have these little dots right here for when there's events on
this date. But what you can also do is say event
indicator. Well, color selected color again, you
have so many options, but we can also say indicator type is and we can say background full. So
when you do background full, you will see that nothing has changed.
Oh, there we go. It needs to do it to refresh. You can see that we
have this full background color now. So we can see that this is the
stuff where there is events. Or if we just remove it again, it will
set it to the default and it will be the little dots beneath
each other here. So I need to refresh it. And then you can see
that we have our little dots back, which I personally like more. But it's
up to you. You're probably a better designer than I am. One last
thing I want to show you before I will shut up about this, don't
worry, is that we also have some kind of layout. So just to show you how
many options there are already in here, we have this calendar layout.
And you can just say, hey, month is the default, you will see the
full month. But we can also say, hey, I just want to see this one week
because I only have this one week calendar. And again, this is due
to hot reload. Not really refreshing very well, but you can see that we now
have this one week and we scroll by weeks. Oh well, actually I'm
doing years here, but we're doing scrolling by weeks and not so
much like the whole month. Right? And you can also
say, hey, I want to say two weeks so you can see half a month basically,
and we can have those. Again, this is refreshing here. So you
can now see the two weeks and the default is to see the full month.
So tons of options with this plugin Maui calendar. Now
what would be really cool, of course, is if we have my plugin the
calendar store, hook it up to this plugin the plugin Maui
calendar, and show events from your actual device in this calendar
inside of your own. Net Maui app. Would that be a nice video idea? Anyway, check
out all the videos. I've linked them down below for all the different
calendar functionalities that you can use inside of your. Net Maui app. Don't
forget to like this video. Subscribe to this channel if you haven't done so
already, and I'll be seeing you for my next video.
