Project 24: Calendar UI

HTML Masterclass

Builds on these lessons

Step 1 of 3

Project

Calendar Grid & an Import Button

Build a month view as a <table> — reusing what you learned building the Restaurant Menu — with a header row of weekday abbreviations and a few day cells. Then add an <input type="file" accept=".ics"> for importing an existing calendar file; accept restricts the file picker to that one extension.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>March 2026 | Calendar</title>
</head>
<body>
  <h1>March 2026</h1>
  <label for="import-ics">Import Calendar (.ics)</label>
  <input type="file" id="import-ics" name="importIcs" accept=".ics">
  <table>
    <thead>
      <tr>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

← Previous Next →