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

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!

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!

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

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

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

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

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

These videos are just so interesting and fun to watch!

Best dev channel. Always come out with banger content!

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

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

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

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!!

What a great explanation, everything was very clear!

Great Job! Exactly what I was looking for.

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

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

This is really cool. Thank you very very much!

Hey Sam. Beautiful tutorial!

Great video - thanks for sharing!

This is great! Thanks for sharing!

Masterfully done!!!

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

Just what I need now. Thanks

Wow awesome video! Thanks!

Awesome Tutorial!! :D 10/10

wow, great vdo broii, thanks

great video ✨

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

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

Excellent , thank you 👍

Thanks for this great video

very nice, thank you

Nice video!! u have a new member

great stuff

Great Sir!👏

Awesome 🎉🎉

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

2 жыл бұрын

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

wow amazing!

Thank you!

You are Amazing 💥🔥

Thank you.

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?

love your content ♥♥♥♥♥♥

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

Thanks.

Wow thanks a lot

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

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.

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

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?

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.

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

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?

@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

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

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.

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

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

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

@samselikoff

2 жыл бұрын

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

2 жыл бұрын

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

what shortcut do u use to collapse sections or tags ?

@samselikoff

2 жыл бұрын

z then c to close or o to open

Could we get a follow-up to this?

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

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.

WOW. That's all I got to say.

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

@samselikoff

Жыл бұрын

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..

@SamedGaming

2 жыл бұрын

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.

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