Build Attendance Management App #12 | Laravel Holidays CRUD API + Reusable React Calendar DatePicker

Build a dynamic Holidays module in Laravel and React — CRUD APIs for holiday management, full day vs half day support, and a custom reusable React calendar date picker shared across the Attendance and Holidays screens.

In this episode of the Attendance Management series we make the Holidays page fully dynamic and then refactor the date picker into a reusable React component used by both the Attendance and Holidays screens — a common real-world need that most CRUD tutorials skip.

Backend (Laravel):

We create the holidays table:
Then four REST endpoints scaffolded with Claude Code:
GET /holidays — list
POST /holidays — create
PUT /holidays/{id} — update
DELETE /holidays/{id} — destroy
Frontend (React + Vite):

HolidaysScreen fetches from the new API instead of using static template data
Create / edit flows wired to the POST and PUT endpoints
Holiday card visibility improved so full day vs half day reads clearly at a glance
Empty state added for months with no holidays

The reusable date picker upgrade (worth the watch on its own):

The biggest refactor in this episode — we replace two separate date inputs (one on the Attendance screen, one on the Holidays screen) with a single reusable React calendar component. Includes:
Click-anywhere-to-open behavior
Proper z-index handling so the picker floats above modals
Alignment fixes so the popover anchors correctly
Visual differentiation between full day and half day holiday markers
This is a clean pattern for any project where the same date input needs to appear in multiple screens with consistent behavior.

🔔 Next episode: we use the holidays data to start blocking attendance entries on non-working days.

────────────────────
CHAPTERS
────────────────────
00:00 — Make the Holidays module dynamic
01:50 — Build migration & API routes
04:01 — Load holidays into the screen
05:42 — Add save and edit functionality
07:24 — Reusable calendar picker upgrade
13:34 — Prepare for next-episode attendance blocking

────────────────────
WHAT YOU'LL LEARN
────────────────────
Designing a holidays schema with full_day / half_day types
Building Laravel CRUD endpoints for a holiday calendar
Replacing static React holiday data with API-driven data
Refactoring a date input into a reusable React component used across multiple screens
Fixing z-index / overlap issues when popovers sit next to modals
Designing visual differentiation between full-day and half-day holidays in a calendar UI
A reusable date picker pattern you can drop into any React project
────────────────────
TECH STACK
────────────────────

Laravel (PHP) — backend
Laravel Sanctum — token-based authentication (set up in #4)
MySQL — database
ReactJS with Vite — admin frontend
React Router DOM — client-side routing
React Native — employee mobile app (later in the series)
Claude AI — Claude Design + Claude Code
────────────────────
SERIES PLAYLIST & LINKS
────────────────────
Previous episode (#11) — Employee Overtime Tracking with Laravel + React:
[paste URL once uploaded]

Series Intro (#1):
[paste URL once uploaded]

Previous series — Car Fleet & Rental App:
https://www.youtube.com/playlist?list=PLTEHk1kYc47SDUEfTOO5B85NYl0pV_akY

My channel:
https://www.youtube.com/@LifeDiariesWithDanny

────────────────────
LET'S TALK
────────────────────
Reusable components — do you build your own date pickers, or always reach for react-datepicker / react-day-picker? And how do you mark different holiday types visually? Drop a comment.

#Laravel #LaravelAPI #LaravelTutorial #ReactJS #ReactDatePicker #ReusableComponents #ClaudeCode #ClaudeAI #FullStack #HRSystem #HolidayManagement #AttendanceManagement

Видео Build Attendance Management App #12 | Laravel Holidays CRUD API + Reusable React Calendar DatePicker канала Life Diaries WD