Meeting Scheduler UI | HTML CSS JavaScript

Meeting Scheduler UI with Calendar Picker with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #40

Project Overview

The Meeting Scheduler UI is a frontend tool developed using HTML, CSS, and JavaScript that enables users to book meetings by selecting a date through a calendar picker and choosing available time slots. It provides instant confirmation and a smooth user experience. This project demonstrates concepts like date handling, event handling, DOM manipulation, and dynamic UI updates, making it useful for appointment booking and scheduling applications.

Key Features

Select date using calendar picker
Choose available time slots
Schedule meetings instantly
Interactive and user-friendly interface
Real-time booking confirmation
Responsive design for all devices
Dynamic updates using JavaScript
Useful for appointment booking and scheduling

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meeting Scheduler</title>

<link rel="stylesheet" href="style.css">

<!-- Flatpickr (Calendar Picker) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>

<body>

<div class="container">

    <h2>Meeting Scheduler</h2>

    <!-- Name -->
    <input type="text" id="name" placeholder="Enter your name">

    <!-- Date Picker -->
    <input type="text" id="datePicker" placeholder="Select Date">

    <!-- Time Slots -->
    <div class="time-slots">
        <button class="slot">10:00 AM</button>
        <button class="slot">11:00 AM</button>
        <button class="slot">12:00 PM</button>
        <button class="slot">02:00 PM</button>
        <button class="slot">04:00 PM</button>
    </div>

    <!-- Submit -->
    <button id="scheduleBtn">Schedule Meeting</button>

    <!-- Result -->
    <p id="result"></p>

</div>

<script src="script.js"></script>
</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#0f172a;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
color:#fff;
}

.container{
background:#1e293b;
padding:30px;
border-radius:12px;
width:320px;
text-align:center;
}

h2{
margin-bottom:20px;
}

input{
width:100%;
padding:10px;
margin-bottom:10px;
border:none;
border-radius:6px;
}

.time-slots{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:15px;
}

.slot{
flex:1 1 45%;
padding:8px;
border:none;
border-radius:6px;
background:#334155;
color:white;
cursor:pointer;
}

.slot.active{
background:#2563eb;
}

#scheduleBtn{
width:100%;
padding:10px;
border:none;
background:#22c55e;
color:white;
border-radius:6px;
cursor:pointer;
}

#scheduleBtn:hover{
background:#16a34a;
}

#result{
margin-top:15px;
font-size:14px;
}

Javascript Code

// Calendar
flatpickr("#datePicker", {
    minDate: "today",
    dateFormat: "Y-m-d"
});

const slots = document.querySelectorAll(".slot");
let selectedTime = "";

// Select time slot
slots.forEach(slot => {
    slot.addEventListener("click", () => {

        slots.forEach(s => s.classList.remove("active"));
        slot.classList.add("active");

        selectedTime = slot.innerText;
    });
});

const scheduleBtn = document.getElementById("scheduleBtn");
const result = document.getElementById("result");

scheduleBtn.addEventListener("click", () => {

    const name = document.getElementById("name").value;
    const date = document.getElementById("datePicker").value;

    if(!name || !date || !selectedTime){
        result.innerText = "Please fill all details ❗";
        return;
    }

    result.innerText = `Meeting scheduled for ${name} on ${date} at ${selectedTime} ✅`;
});