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 with Calendar Picker is an interactive frontend project built using HTML, CSS, and JavaScript. It provides a simple interface where users can select a meeting date, choose a suitable time, and enter the required meeting details. The project creates a practical scheduling experience similar to the calendar interfaces commonly used for appointments and meetings.

First, users select a date through the calendar picker and choose a meeting time from the available options. Next, JavaScript handles the selected values and validates the scheduling form. Finally, the interface provides feedback after the meeting details are submitted. This project demonstrates date picker integration, form handling, user input validation, DOM manipulation, and interactive UI design.

Key Features

Calendar Date Selection: Users can select a preferred meeting date through the calendar interface. This provides a more convenient way to choose a date than manually entering one.
Meeting Time Selection: The interface allows users to choose a suitable meeting time. This makes the scheduling process more organized and easier to complete.
Interactive Calendar UI: The calendar provides a visual way to navigate and select dates. Users can interact with the calendar instead of relying only on text-based date fields.
Meeting Details Form: Users can enter the information required for scheduling a meeting. The form keeps the scheduling details together in one simple interface.
Date Picker Integration: The project demonstrates how a date picker can work with a web form. This is useful for appointment booking, meeting scheduling, and event management interfaces.
Form Validation: JavaScript checks the required scheduling information before processing the form. Therefore, users receive feedback when important details are missing.
Dynamic User Feedback: After the scheduling action, JavaScript updates the interface with the relevant result or confirmation message. This gives users immediate feedback without refreshing the page.
Clean Scheduling Layout: The project uses a simple card-based interface with organized form controls and calendar elements. As a result, users can focus on selecting their meeting details.
Responsive Interface: The scheduling components are arranged to work within the available screen space. This helps maintain a usable experience across different device sizes.
Reusable Scheduling Component: The same UI approach can be adapted for appointment booking, interviews, consultations, events, and other date-based scheduling systems.

What You'll Learn

How to create a meeting scheduling interface using HTML
How to integrate a calendar or date picker into a form
How to handle date and time inputs with JavaScript
How to validate form information
How to handle form submission events
How to update the DOM dynamically
How to display confirmation or feedback messages
How to build a practical scheduling UI

HTML Code

The HTML creates the basic structure of the Meeting Scheduler interface. First, it provides the main container and heading for the scheduling application. Next, the form contains the controls needed to select a meeting date and time along with the required meeting information. The calendar picker provides a visual date-selection experience, while the time control allows users to select the preferred meeting time.

Finally, the scheduling button submits the form, and a separate result area provides space for JavaScript to display the scheduling feedback.

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

The CSS controls the appearance of the scheduling interface. The main container uses a clean card-style layout with spacing, rounded corners, and a clear visual hierarchy. Next, the form controls receive consistent padding, borders, and spacing so that the date and time selection process remains easy to follow. The calendar area is also styled to fit naturally within the overall interface.

Buttons use clear styling and hover effects to provide visual feedback. The layout remains flexible so the scheduling interface can adjust to smaller screen sizes.

*{
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

JavaScript handles the date selection, form interaction, validation, and scheduling feedback. First, it accesses the form controls and reads the date, time, and other meeting details entered by the user. Next, the scheduling function checks whether the required information has been provided. If any required field is missing, JavaScript displays a message asking the user to complete the form.

After that, JavaScript processes the selected date and time and updates the result area with the scheduling information. Finally, the interface provides confirmation feedback without requiring the page to reload. This demonstrates how JavaScript can connect form inputs with dynamic UI updates.

// 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} ✅`;
});