Shadcn ui calendar is BROKEN.. let's fix it!

all right guys in this video we're going to take a look at how we can improve the Shad Cen UI calendar now the Shad Cen UI calendar is basically a wrapper for the react day picker component and out of the box the react day picker component does allow the month and the year to be manually selected now unfortunately when we enable this in Shad UI it kind of messes up the UI so let me demonstrate this then I've already got an xjs project up and running with shad CN UI installed and I've already installed the calendar component as well from Shad ceni so on the homepage I'm just rendering the calendar and to make sure or to add the functionality where we can select the month and the year as dropdowns instead of having to if we quickly head on back to the browser instead of having to navigate tediously through the months using these arrows we can enable if we add a prop to our calendar component here we can add the caption layout prop and set this equal to drop down buttons or just drop down so buttons we've already seen that that's the small Arrow icons either side of the calendar and the drop down is disabling those arrows either side of the calendar but enabling the dropdowns where you can select the month and the year from dropdowns drop- down buttons is just enabling both so if we enable drop- down buttons for this to be able to work and for this to actually enable the drop downs we need to make sure that there's a from date and a to date otherwise the react day picker component isn't going to know how many years years to display in the Years drop down for example how does it know how many years far back we can select from and how many years in the future or how many years to we can actually select so we need to set a from either a from year a from month or a from date same as the two props so either a 2year a two month or a two date so I'm just going to go from year here and set this equal to something like 1990 and a 2year set this equal to 2024 so if we save this now then and and take a look in the browser we can see that this is completely messed up our UI but we can select from dropdowns the month and it'll navigate us to the month and the year as well so if we change the drop-down selections for the month and the years we can see this functional it works but the UI looks pretty gross so it's completely broken our UI in chaden UI now there is a couple of ways around this the first way we could try and style these select boxes the same way as shad UI however we won't then get the nice functionality that Shar CN UI select components have for example if we take a look at a project I've already got up and running with these improvements added to the calendar we can see here this is using the nice Shad CN UI select components so we can do exactly the same functionality we have exactly the same functionality where we can select from any months and any number of years but it's rendering the Shad ceni select components and instead so this is the type of functionality we're going to apply in this video and quickly before we dive into it then this particular page here is part of a Shad CN UI course I'm working on and let me quickly give you a demonstration we're going to go over a bunch of things in the Shad CN UI course so there's a bunch of validation client side validation with Zod there's loads to do with forms loads to do with client side validation we're going to be using recharts as well to build out these sort of nice looking graphs of bar charts so we're essentially in the course we're going to be building this dashboard now the course is focusing solely on dummy data and client side stuff and Shad C UI as well as Zod as well as recharts so there's no back end to this but it's going to be useful if you want to learn how to render and actually customize things like recharts and build out this really nice looking dashboard using Shad CN UI and also have client side validation with Zod then this course is going to be for you make sure you head on over to web dev educ a.com sign up to the newsletter because I will be sending out an email with a promo code it'll be like $9 or $10 for the course so I'll be emailing out a bunch of promo codes anyway but up until then I'll still be doing some Shad cnii videos and tutorials just like this one now enough of me talking let's get into the actual code side of things for the calendar component now again I always say this in all of my Shad ceni videos the beauty of shads and UI is we own the code right so we can update or modify any of the code ever we see fit so this is exactly what we're going to do within the components UI and calendar file then for our calendar component we're going to add our own customizations here for the react day picker now we're going to be using the Shad CN UI select component which means we also need to install the Shad cnii select component into our project now I'm going to quickly install it now cuz I forgot to do it before this tutorial okay so I quickly installed it there we've got our select component now in components UI and select now to override the default functionality for the react day picker for the specifically the drop downs for the month and the year we can add a prop called component to the day picker component now I believe Shad CI already utilizes this prop down here for Icon left and icon right so icon left and icon right the default functionality and the default components are being overridden so Shad nuui does this out of the box and it's just rendering Chevron left and Chevron right from loose side react so these are the updated icons now we can see this if we quickly head on back to the browser this is the particular icon left and icon right here so we're overriding or Shad C nuui by default overrides these particular icons here so we're going to do exactly the same now we want to add a new entry into components and specifically we want to Target the drop-down component so we can render a new component for our dropdowns and this drop down component is going to render individ ually for each individual drop down I.E this drop- down components will render for both the month and for the year so we need to have slightly different implementations depending on if we want to render the drop down for the month or if we want to render the drop down for the year so for now I'm just going to have a div here and I'm going to say something like custom dropdown so if we save this now and take a look in the browser there we go we can see we're rendering two lots of custom dropdown the first one is expecting to render the drop down of months and the second one is expecting to render the drop down of years so let's actually Implement our own custom dropdowns I.E the Shad CI select so we head on back to our code for the drop- down component instead of rendering this div here let's render some actual markup an actual select components we first need to grab the props from the drop-down component because on this props these props are going to contain a name prop and it's the name that's going to be determining what type of Select we render for each drop down I if we're going to render the months or if we're going to render the years so in here we just want to check to see if props do name is equal to months then we'll render the months dropdown else if props do name is equal to years then we'll render the years dropdown so here let's just return some dummy markup for now just say years and let's do exactly the same for months let's just render months in here let's save this now and we're also going to need an default render or default return mark up here so let's just return null because we always have to return something from the drop- down component or the drop down component override so if we save this now and take a look in the browser there we go we can see months being rendered here and years so we want to actually render a select from Shad CI So within our months then let's create a list of months from January to December so let's go const here we're going to do this programmatically via an array so we're going to go const here let's say select items and the select items we'll create from an array Dot from with a length of 12 and the second argument to array then will be a mappa function and we simply want to return an object and on this object we'll have two properties we'll have a value which will be just the index so we'll have underscore I here so we need to grab the index and we set the value equal to I do2 String then for the second property we'll have a label so we'll say format here so we need to import format from date FNS so if we scroll down here we'll need to import the format function from dat FNS I believe data FNS gets installed when we install the shed seni calendar component so we want to format here we also want to set month which we need to import from date FNS so we're just going to pass a new date into set month and we're going to set the month equal to the index from this current element in the array now the set month here the second argument expects the month that we're setting as an integer and it's Zer based so 0 equals January and 11 equals December then we need to set a second argument pass the second argument to the format function and we're just simply going to have a nice userfriendly formatting here for our month so we're going to do triple capital M here so then let's from here let's render our select components from Shad cnii so instead of this div here we want to render a select component which we need to import from do/ select we need a select trigger which we're going to fill in in a second but we need to import this as well from do/ select so for now let's just say months as our select trigger we are going to update this though and as well we need a select content which again we need to import from do/ select and within the select content we need to map over our select items so let's go select items do map and then for each select item we want to render or we want to return a select item component which we need to import from select so each select item then will need a value which we can set equal to select item. value and as the children to the select item we want to render the label so in here we'll go select item. label so let's save this now then and take a look in the browser there we go we can see we've got a month drop down with months from January all the way down to December so let's update then let's add our years in now now we need to grab the years from any potential from dates and any potential to dates for example from year from month and from date and 2 year two month and two date so we need to grab all of these and we can grab all of these potential props in using the Ed day picker Hook from react day picker so let's go const here and we want to destructure a bunch of things here from the use day picker hook which we need to import from react day picker now this is essentially this Hook is essentially going to return all the props that we added to our day pick a component so from here we can actually destructure a bunch of things so we can destructure from date from month and from year which is exactly what we want to do we want to go from date from month and from year as well as the two date the two month and the two year so then we need to grab we just need to grab the Year from all of these potentially set props which means then if we scroll down to our years let's grab then the actual from year and the actual 2year to display in the dropdown so here let's go const earliest year so this will be the earliest year we can display in the dropdown and we want to set this equal to from year or if there's no from year set we'll set it equal to from month. getet full year or if there's no from month set we'll set it equal to from date. get full year and we want to do exactly the same for the two dates so then we want to go latest date cons latest or sorry latest year and do exactly the same this is going to be 2E or two month. get full year or two dat. get full year so then we want to make sure that a earliest year and a latest year actually exists so in here let's check to see if there is an earliest year and a latest year only then will we start building out our select items now we actually need to calculate the number of years difference between the latest year and the earliest year and then we're going to plus one to that because we also want to include that last year so for example if our latest year is 2020 and the earliest year is 2000 then that's a 20year difference however we're including the first and last year which means we need to plus one to that difference if that makes sense because we also want to render 2,000 and we also want to render that 2020 that last year of 2020 in our select items so that actually equals to 21 entries rather than 20 so here then we want to go const Year's length and set this equal to latest year minus earliest year plus one and then we want to build out our select items so here let's at the top here first of all let's just go let's select items and set this equal to an empty array and we're going to set the type of this select items and the type is going to be exactly the same as our month select item so we're going to have a label and that's going to be a type string and a value also of type string so then we can set our select items equal to array do from with a length of years length and we want to map over each of these years then and again we're going to return a label and a value so the label will be earliest year plus and we need the iterator actually so we need to go underscore I here so we need to grab not the iterator the index sorry we need to grab the index so it's going to be I so it's going to be earliest year plus I we're going to two string this and the value is actually going to be exactly the same so may as well just copy this and for the value we just want a value here if we save this now and do exactly the same we want to render our select items as a select component so let's just copy what we've got for the month's select and paste it in for our years like so but now let's update the trigger to say years the select content again we're going to Loop over the select items we're going to do exactly the same rendering here so we could have cleaned this up a little bit because we're doing pretty much exactly the same but we're just going to keep it as it is cuz this is just an example so if we save this and take a look in the browser there we go we've got our months we've got our years let's we already know our months work let's check our years and we've got from 1990 all the way to 2024 however ideally we need some way whenever we select these years then the calendar needs to update depending on our selection so this is really easy to do if we head on back to our code if we scroll up to the top of our custom dropdown component here we can use another Hook from the react day picker component or the react day picker library and that is the use navigation hook so in here we want to destructure a couple of things from use navigation which we need to import from react D and specifically what we want to import or what we want to destructure not import we want to destructure from use navigation the go to month function so this is going to navigate us to a specific month in the calendar depending on our selection additionally we also want to import the current month so the currently selected month and we want our select triggers to be nicely formatted to represent the current month so the current month here is a date and it's also represents the year so the currently selected month and year in the calendar or the currently visible month and year in the calendar so current month here might sound a bit confusing because it also contains a year and it's an actual date but if we use this current month then for our select trigger let's update our caption for month here we just want to format use the format function again from dat FNS we want to use our current month date and we just want to format to Triple capital M and we're going to going to pretty much do exactly the same for our select trigger for our years so if we scroll down to our select trigger for the years the caption here we could just actually we don't need to format this using data FNS we could just grab the current month. get full year like so so if we save this now then and take a look here in the browser there we go we're rendering appropriately the month and the year but we still need to hook up a selection so anytime we select a month and select a year we need to navigate to that particular date in the calendar or to that particular month in the calendar so if we head on back to our code let's finish all this off then for our select we want to add an on value change and we also need to add a value so the value we're going to set equal for this is for the years now we're going to set it equal to props do value do two string and we want to do exactly the same for the month select now again I'm going to repeat this here this would have been probably a lot cleaner if we'd have cleaned this up and instead of duplicating pretty much rendering exactly the same select components for month and for year but I'm going to keep it as it is uh I can't be bothered to clean it up but if I was coding this in a real project and actually in the Shad CI course this is rendered a lot cleaner I do create this a lot cleaner however we're just going to pretty much duplicate our code here we're going to also render the value prop on if we scroll up to our month's drop down for our select component here and if we scroll down then back to the years we need to on value change we need to up update that we need to navigate to the selected month from that dropdown so the onv value change will take a callback function and this callback function will be pass the new value I.E the value that was selected from the dropdown so this particular select here is rendering the years so we need to navigate to a particular year so here let's go const new date and set this equal to a new date but we want to base it on the current month the currently visible month in the calendar and we just want to update the year so if for example we're rendering February 2024 in the calendar and we update our year drop down to say 2022 we'll still remain in February ideally we'll still remain in the month of February but we'll just change the year so that's why we want to base our new date here on the current month so then we can go new date do set year or set full year and we'll set it equal to the new value and this new value is a string but we need to pass number here so let's just go pass into here and wrap that new value like so then we just want to navigate to this new date now that we've set a new year for the new date so we can use the go to month function that we destructured from the used navigation Hook from react dat picker and we just want to navigate to the new date and we're going to do exactly the same so we may as well just copy all of this logic let's copy this and paste it in for our month drop down so and I will select here for our months we want to do exactly the same thing but we're just going to navigate to a new month so we want to set a month instead where is it down here we want to use the set month function on our new date instead and we're doing exactly the same thing we're just passing the new value into an integer from a string so let's save this now then and take a look in the browser let's see what happens if we select a new month and there we go everything is updating appropriately we can see all the months and all the years are changing in the calendar we can see anytime we navigate to a new month and to a New Year all these values get updated appropriately and we actually navigate to that month and year now there's one step further we can take this and render the drop down side by side so let's head on back to our code and scroll up to where we have all these class names here now we want to add a class name to we want to Target if we had a new entry here we want to Target the dropdown or the caption dropdowns and we can simply set a flex class and a gap of one for example let's save this now and take a look C in the browser and there we go they're rendering side by side but our caption is ruining everything is ruining this layout so we could as well hide the caption so if we scroll up to the top for example the caption label here we could add hidden on this just to hide that caption label and there we go because we don't really need that caption label if we're entering our drop downs but there we go we've got our drop downs all working and this is how we can render Shad C nuui select for the dropdowns for react they pick up

Channel: WebDevEducation

Views: 5,601

Keywords:

Id: cY5RMVj2GtU

Length: 20min 29sec (1229 seconds)

Published: Sat Feb 17 2024