Add to Calendar Button with React & Tailwind

Learn how to dynamically generate Google Calendar, Outlook, and other calendar links to create an Add to Calendar button in React and Tailwind.
We'll walk through using the Calendar Link package to generate new event links for various calendar services then see how we can use Tailwind to create a popup with all of the calendar links inside.
🧰 Resources
Tutorial: spacejelly.dev...
Code: github.com/col...
Demo: my-calendar-li...
📺 TH-cam: th-cam.com/users/co...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #react #tailwindcss #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@waqasfareed62]

Nicely explained

[@colbyfayock]

thanks!

[@designerjehovah4453]

This is Very helpful!! Thank you

[@colbyfayock]

no problem!

[@datdat6894]

this is a really helpful content .
but i realize that we can't open apple calendar on iphone , have any solution for this case ?

[@colbyfayock]

hm good question, tested this and got the same thing. i tested learnwithjason.dev/schedule and it appears that seems to work. a quick searhc popped this up: stackoverflow.com/questions/1752342/how-to-create-add-to-calendar-link-on-web-page-for-iphone where they say you need a mime type of the .ics file for text/calendar, but i haven't tested it

[@datdat6894]

@@colbyfayock tks for your answer , i found that safari not allow download .ics file from localhost . i worked when we deploy to https domain

[@AhmadJS]

Thank you ..💚

[@colbyfayock]

You're welcome!

[@iplaxtech]

Love it..😍..thanks!

[@colbyfayock]

no problem!

[@aguhenry5579]

🎉🎉🎉🎉

[@colbyfayock]

🙌