Building an Interactive Calendar with Tailwind UI, React and date-fns
HTML-код
- Опубликовано: 12 май 2022
- 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/github/samseli...
🧑💻 Diff from this video: github.com/samselikoff/2022-0...
✨ Tailwind UI Calendars: tailwindui.com/components/app...
📆 date-fns library: date-fns.org 
Развлечения
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!
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!
Sam, this is freaking awesome - thanks so much for putting this together. So cool seeing you pull this together and how you approach it.
Loving these focused videos, nice work!
man! just 10 min into the video and loved the way you teach and how date-fns beautifully works like a magic
Great video, Sam ! Really helped me understand date fns !
Dude.. this was great!!! Thank you so much, love your vids!!!
Another Fantastic tutorial Sam! My version came together beautifully. Thx! again.
Best dev channel. Always come out with banger content!
These videos are just so interesting and fun to watch!
Best tutorial ever. Went from not knowing anything about calendars now I can make a library
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. 🙏
a vote for framer animations
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
What a great explanation, everything was very clear!
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
Amazing video, thank you Sam!!
Thanks very much for this Video, i created a simillary calendar with angular, it was a pleasure beeing guided by you!
This is so cool. Thanks mate. You really saved me!
Wow! I`m speachless. Great content 🔥🔥🔥
Hey Sam. Beautiful tutorial!
This is really cool. Thank you very very much!
Masterfully done!!!
This is great! Thanks for sharing!
Bro, you solved my problem. Thanks so much for this tutorial
Great video - thanks for sharing!
Awesome Tutorial!! :D 10/10
Wow awesome video! Thanks!
Just what I need now. Thanks
wow, great vdo broii, thanks
great video ✨
AMAZING. Seens like will be very usefull for my project, so thanks u for share this!
Thanks for this great video
Great Sir!👏
Excellent , thank you 👍
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.
Exactly what I am looking for
very nice, thank you
Awesome 🎉🎉
great stuff
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 }),
})
```
Heh, of course 1 minute after writing this comment I see you show that exact thing 😅 Awesome video man.
Nice video!! u have a new member
Love this video. I have a question though how would you deal with two events at the same time on a css grid calendar?
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?
wow amazing!
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.
You are Amazing 💥🔥
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
Thank you!
Most underrated youtuber! Sorry for asking again but when are you getting a community discord so we can interact with you? :D
love your content ♥♥♥♥♥♥
Cool video, how do you reduce the height of the calendar?
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.
Another neat video would be doing all this with remix and server side rendering: and lifting state to the route :)
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?
Thank you.
Wow thanks a lot
Thanks.
it's really nice, especially the music in the background, can you tell me the music playlist
which command did you use to install tailwind? i tried npm install tailwindcss@latest, but styles didn't work
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?
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?
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())
Make sure 'MMM-yyyy' is the same format as currentMonth
can i steal this for a pythononic version and turn it into work schedule thingy?
what shortcut do u use to collapse sections or tags ?
z then c to close or o to open
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.
m very new to tail wind css, i have a question do you use it everysingle time or only for selective projects?
Thanks
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 :)
@@samselikoff ah thanks for clearing the confusion ! for some weird reason youtube didnt notify me about your reply.
Could we get a follow-up to this?
Do you have a video for the animated version?
Yes, it's actually part of the course I launched! buildui.com/series/framer-motion-recipes/calendar
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.
Make an infinitely scrolling calendar like on todoist
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
Sounds like a time zone issue...
I was loving everything until you said we have to pay hundreds of dollars for the components to follow this video.
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..
I hope you are being sarcastic, since this is built from scratch
@@SamedGaming Vanilla is when you don't use external library. He's using date-fns.
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