Building an Interactive Calendar with Tailwind UI, React and date-fns

Let's take a predesigned calendar from Tailwind UI and make it functional using React and the fantastic date-fns library!
💻 Calendar demo: stackblitz.com...
🧑‍💻 Diff from this video: github.com/sam...
✨ Tailwind UI Calendars: tailwindui.com...
📆 date-fns library: date-fns.org

[@waldolavaut2800]

This is a master class!! I still can't believe I was looking for this exact implementation of how to do this with TailwindUI, date-fns, and React, and I'm so lucky to find this awesome video!! You're the man!

[@stevecastaneda]

I've been meaning to migate from momentjs, and you just got me excited about date-fns. Love the integration with the new TailwindUI calendar example too. Would love to see a follow up video with the framer animations. 🙏

[@sanketss84]

a vote for framer animations

[@liamsmith6859]

Sam, this is freaking awesome - thanks so much for putting this together. So cool seeing you pull this together and how you approach it.

[@Apparentt]

Think you hit it on the head when you said after using date fns for a while you could kinda just “guess” the API - that’s the sign of a fantastic library

[@MattChinander]

This is great, Sam. Thank you for posting this video. I have a Tailwind-backed project coming up where I've wanted to replace a calendar library with Tailwind and date-fns, and you've done the work for me!

[@MachetesTV]

Thanks very much for this Video, i created a simillary calendar with angular, it was a pleasure beeing guided by you!

[@simonswiss]

I may be missing something, but I _think_ that using `startOfWeek(firstDayOfMonth)` works well for the start of the days range for a given month - lets you skip calculating the grid col-start offset based on what weekday the month starts on. That's how I've done it a few days ago, and it seems to work quite well. I start my weeks on Monday, so I have this: ``` const daysOfTheMonth = eachDayOfInterval({ start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }), end: endOfWeek(endOfMonth(firstDayOfMonth), { weekStartsOn: 1 }), }) ```

[@simonswiss]

Heh, of course 1 minute after writing this comment I see you show that exact thing 😅 Awesome video man.

[@adamtak3128]

Best dev channel. Always come out with banger content!

[@khairulhaaziq2332]

Best tutorial ever. Went from not knowing anything about calendars now I can make a library

[@AlexSmith-sf9qr]

Loving these focused videos, nice work!

[@saurabhdaswant7833]

man! just 10 min into the video and loved the way you teach and how date-fns beautifully works like a magic

[@ShrinidhiShamasunder]

Great video Sam. What calendar backend or server are you using? Hopefully it has APIs that I can call from my React app to actually persist the events.

[@sashaikevich]

How do you decide on the library to use? For eg why date-fns and not moments or dayjs or spend half a day looking for some other lightweight performant library?

[@HeyNoah]

Dude.. this was great!!! Thank you so much, love your vids!!!

[@varsketisLT]

just used it in my first ever full-stack project! Will try to improve and tweak it a a bit, but still, thank you so much! Subbed

[@ogpuzzle4382]

Another Fantastic tutorial Sam! My version came together beautifully. Thx! again.

[@nonsookongwu1556]

Bro, you solved my problem. Thanks so much for this tutorial

[@FreeSkypeGenerator1]

m very new to tail wind css, i have a question do you use it everysingle time or only for selective projects? Thanks

[@samselikoff]

I use it on every project! And try to get every team we consult with to switch to it if they're not using it already :)

[@FreeSkypeGenerator1]

@@samselikoff ah thanks for clearing the confusion ! for some weird reason youtube didnt notify me about your reply.

[@zacharyfreiter4445]

Great Job! Exactly what I was looking for.

[@techspace5373]

These videos are just so interesting and fun to watch!

[@bublikbublikovich2229]

which command did you use to install tailwind? i tried npm install tailwindcss@latest, but styles didn't work

[@ivantotev9343]

Great video, Sam ! Really helped me understand date fns !

[@garyg3327]

I remember about 9 years ago when I started working professionally, I was stunned my work mate was paying for a components library. These UI components are still paid for for premium ones.

[@yvigg]

This is so cool. Thanks mate. You really saved me!

[@sandrahufford8858]

This is the help I've been looking for! Thanks for concise coding. However, trying to convert it to Vue composition API and I got stuck at let firstDayCurrentMonth = parse(currentMonth, 'MMM-yyyy', new Date()) I keep getting invalid date. Any suggestions?

[@dev-mantas]

This is telling date-fns how the date is read, for example if you are displaying your date as Oct, 2022 it should be firstDayCurrentMonth = parse(currentMonth, 'MMM, yyyy', new Date())

[@dev-mantas]

Make sure 'MMM-yyyy' is the same format as currentMonth

[@robinvriens]

What a great explanation, everything was very clear!

[@AlanMontgomery]

Hey Sam. Beautiful tutorial!

[@nazarshvets7501]

Wow! I`m speachless. Great content 🔥🔥🔥

[@salzpro]

Thank you for very useful understandable learning Video, Sam! Would it be possible to extend functionality like: 1) to show 2 months and 2 buttons (next, prev) will switch also 2 months. 2) possibility to select a date range

[@tutoriaisdev]

Amazing video, thank you Sam!!

[@AlexandreLaguardia1]

What if I want to select a period of days? For example, I want to see all meeting from May 22 until May 29, how would I do that?

[@joshuastories]

This is really cool. Thank you very very much!

[@UncleDavid]

can i steal this for a pythononic version and turn it into work schedule thingy?

[@arditgashi8850]

Most underrated youtuber! Sorry for asking again but when are you getting a community discord so we can interact with you? :D

[@djimenezweb]

Loved it, thank you Sam! I wonder if it could be refactored to Styled Components. I've tried to refactor the button styles, but there are too many conditions to check. Any ideas?

[@raskolnikov1873]

This was great! What do I do if I want to show all the events that are scheduled for the month instead of just the selected day? I can't get that to work.

[@LuksFay]

AMAZING. Seens like will be very usefull for my project, so thanks u for share this!

[@treforcoster3377]

Love this video. I have a question though how would you deal with two events at the same time on a css grid calendar?

[@prashank]

What a coincidence, I was working on a renderless calendar but for vue just a week ago. I did all the date calculations with js date objects, that sucked. Would have used date-fns if i knew about it, most of date library are bloated with spotty tree shaking.

[@IamGroot701]

This is great! Thanks for sharing!

[@paulikhane]

Masterfully done!!!

[@sethdavis512]

Great video - thanks for sharing!

[@kwadoskii]

Just what I need now. Thanks

[@vfshera]

Exactly what I am looking for

[@rhidlor8577]

very nice, thank you

[@osman3404]

Another neat video would be doing all this with remix and server side rendering: and lifting state to the route :)

[@enochasandahall2034]

it's really nice, especially the music in the background, can you tell me the music playlist

[@ramnavan]

Probably isSameDay should be used instead of isEqual? isEqual compares time compoent as well which caused problems when UTC and local are in different dates.

[@julietkelechi7785]

Cool video, how do you reduce the height of the calendar?

[@edgardsierra9261]

Nice video!! u have a new member

[@joshuapadron-uy9513]

Awesome Tutorial!! :D 10/10

[@bobdpa]

Wow awesome video! Thanks!

[@engelshentenawy]

what shortcut do u use to collapse sections or tags ?

[@samselikoff]

z then c to close or o to open

[@luckyboy3802]

Excellent , thank you 👍

[@faruksardar8829]

You are Amazing 💥🔥

[@althafabbas5385]

wow, great vdo broii, thanks

[@kariza76record]

Awesome 🎉🎉

[@engelshentenawy]

Thanks.

[@pranavpatel2810]

Thanks for this great video

[@SeanCassiere]

Could we get a follow-up to this?

[@alexg7282]

Thank you!

[@sunil.b]

Great Sir!👏

[@xxidbr9]

great video ✨

[@Tay74514]

Thank you.

[@avinashgardasalgonquin4371]

wow amazing!

[@alihossemedine62]

great stuff

[@wfl-junior]

Do you have a video for the animated version?

[@samselikoff]

Yes, it's actually part of the course I launched! buildui.com/series/framer-motion-recipes/calendar

[@SogMosee]

Make an infinitely scrolling calendar like on todoist

[@sallehshah]

love your content ♥♥♥♥♥♥

[@kobbimensah547]

Wow thanks a lot

[@jimshtepa5423]

why is May 1 falls on Sunday when it should be on Monday in 2023? when I repeat what Sam did in this video I get May 1 on Monday and that is how it is in real calendar

[@samselikoff]

Sounds like a time zone issue...

[@dreamsachiever212]

WOW. That's all I got to say.

[@eshw23]

I was loving everything until you said we have to pay hundreds of dollars for the components to follow this video.

[@RaZziaN1]

I don't like it, you could build it from scratch, vanilla js have everything you need to achieve this, that's not really programming..

[@SamedGaming]

I hope you are being sarcastic, since this is built from scratch

[@RaZziaN1]

@@SamedGaming Vanilla is when you don't use external library. He's using date-fns.

[@hb-707]

This is amazing brother. I suggest to you the following. Instead of refactoring the tailwind UI components with the date-fns conditions. I think better to map the returned array from eachDayOfInterval to make it look the same as the given JSON object from tailwind. example : hosnyben.me/date-fns.png