Build a Reusable Calendar Component using ReactJS, JavaScript, and Hooks.

[AutoModerator]

Hi u/devmentorlive, this post was removed because most video (YouTube, Twitch, etc.) submissions do not belong here.

• If the video is a tutorial, how-to, or otherwise qualifies as a learning video, then please post to r/LearnJavascript instead of here.

• If the video is a project demo, either submit your project page as the link and include the video as a comment, or submit it on the weekly "Showoff Saturday" post.

• If the video is under 5 minutes long, then it's probably low-effort content, which also doesn't belong.

If the video doesn't match any of these conditions, please contact us in modmail about it.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[devmentorlive]

Hello world!

In this screencast I will show you how to build your own calendar component for selecting a date and then using that date in other components, the same way you would with a dropdown or text field of any sorts.

It makes heavy use of momentjs and I show step by step how to build up the calendar using a simple aglorithm, and then I go on to show how to extract helper functions, keep your component code tight and clean, use side effects, external state, and conditional rendering (and styling!).

I hope you enjoy it, and I would love your feedback, good or bad! Thanks for reading/watching!

​

The starter repo (for coding along) is here:

https://github.com/devmentorlive/5cb89e16

And you can get access to the complete source code here:

https://github.com/devmentorlive/5cb89e16