Build a Responsive Calendar App with HTML, CSS and Javascript | Tutorial 2024
Hey there! In this video, we’ll create a fully responsive calendar app using just HTML, CSS, and JavaScript. Follow along to learn how to build an interactive calendar with features like event creation, real-time updates, and more. No frameworks or libraries—everything will be built from scratch!
🚀 Live Website: https://vanilla-calendar.mateuszziome...
💻 Source Code: https://github.com/mateuszziomekit/va...
Useful links:
📝 Visual Studio Code: https://code.visualstudio.com
🎨 Lucide Icons: https://lucide.dev/icons
🌍 Netlify Drop: https://app.netlify.com/drop
Features:
📆 Month, week, and day calendar views
🔄 Easy date navigation
✏️ Create, update, and delete events
✅ Form validation for event details
💾 Persist events across page refreshes
⏰ Support for all-day events
💬 Animated dialogs and toasts for smoother interactions
🗂️ Mini calendar for quick navigation
📱 Fully responsive design
📑 Mobile-friendly sidebar
🔗 URL state persistence
🌐 Real-time updates across multiple tabs
🚀 Put the website live on the internet
Enjoy the tutorial, and don’t forget to like, share, and subscribe if you find it helpful!
Timestamps
00:00 Intro
04:39 Setup
06:01 Initial layout
12:33 Nav
28:47 Sidebar
32:47 Month calendar
41:52 Events
46:05 View select
52:09 Week calendar
01:05:10 Day calendar
01:06:56 Scroll
01:08:36 Dynamic event
01:11:14 Dialog
01:29:27 Event form
01:40:56 Event form validation
01:47:39 Toaster
01:59:00 Event creation
02:06:13 Nav logic
02:18:31 Dynamic month calendar
02:36:57 Rendering month calendar events
02:50:06 Dynamic week calendar
03:10:13 Rendering week calendar events
03:40:23 Calendar adjustments
03:54:42 Event details dialog
04:09:12 Event delete dialog
04:19:32 Event edit dialog
04:28:36 Mini calendar
04:50:08 Mobile view
05:13:45 Url state
05:19:23 Tab sync
05:21:57 Deploy
On this page of the site you can watch the video online Build a Responsive Calendar App with HTML, CSS and Javascript | Tutorial 2024 with a duration of hours minute second in good quality, which was uploaded by the user Mateusz Ziomek 20 September 2024, share the link with friends and acquaintances, this video has already been watched 13,417 times on youtube and it was liked by 362 viewers. Enjoy your viewing!
