157 lines
5.6 KiB
HTML
157 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Month View Calendar Template</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="calendar-wrapper">
|
|
<header class="calendar-header">
|
|
<h1 class="view-title">Month View</h1>
|
|
|
|
<nav class="calendar-nav">
|
|
<a href="?month=09&year=2023" class="nav-link">« Prev Month</a>
|
|
<a href="?month=10&year=2023" class="nav-link">This Month</a>
|
|
<a href="?month=11&year=2023" class="nav-link">Next Month »</a>
|
|
</nav>
|
|
|
|
<h2 class="month-name">October 2023</h2>
|
|
</header>
|
|
|
|
<table class="calendar-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Mon</th>
|
|
<th>Tue</th>
|
|
<th>Wed</th>
|
|
<th>Thu</th>
|
|
<th>Fri</th>
|
|
<th>Sat</th>
|
|
<th>Sun</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="other-month">
|
|
<span class="day-number">25</span>
|
|
</td>
|
|
<td class="other-month">
|
|
<span class="day-number">26</span>
|
|
</td>
|
|
<td class="other-month">
|
|
<span class="day-number">27</span>
|
|
</td>
|
|
<td class="other-month">
|
|
<span class="day-number">28</span>
|
|
</td>
|
|
<td class="other-month">
|
|
<span class="day-number">29</span>
|
|
</td>
|
|
<td class="other-month">
|
|
<span class="day-number">30</span>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">1</span>
|
|
<ul class="event-list">
|
|
<li class="event-item">Rent Due</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<span class="day-number">2</span>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">3</span>
|
|
<ul class="event-list">
|
|
<li class="event-item">Team Meeting (10am)</li>
|
|
<li class="event-item urgent">Project Deadline</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">4</span>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">5</span>
|
|
</td>
|
|
<td class="current-day">
|
|
<span class="day-number">6</span>
|
|
<ul class="event-list">
|
|
<li class="event-item personal">Dentist Appt</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">7</span>
|
|
<ul class="event-list">
|
|
<li class="event-item">Grocery shopping</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<span class="day-number">8</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="day-number">9</span></td>
|
|
<td><span class="day-number">10</span></td>
|
|
<td><span class="day-number">11</span></td>
|
|
<td><span class="day-number">12</span></td>
|
|
<td><span class="day-number">13</span></td>
|
|
<td>
|
|
<span class="day-number">14</span>
|
|
<ul class="event-list">
|
|
<li class="event-item">Birthday Party</li>
|
|
</ul>
|
|
</td>
|
|
<td><span class="day-number">15</span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="day-number">16</span></td>
|
|
<td><span class="day-number">17</span></td>
|
|
<td>
|
|
<span class="day-number">18</span>
|
|
<ul class="event-list">
|
|
<li class="event-item urgent">Server Maintenance</li>
|
|
</ul>
|
|
</td>
|
|
<td><span class="day-number">19</span></td>
|
|
<td><span class="day-number">20</span></td>
|
|
<td><span class="day-number">21</span></td>
|
|
<td><span class="day-number">22</span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="day-number">23</span></td>
|
|
<td><span class="day-number">24</span></td>
|
|
<td><span class="day-number">25</span></td>
|
|
<td><span class="day-number">26</span></td>
|
|
<td><span class="day-number">27</span></td>
|
|
<td><span class="day-number">28</span></td>
|
|
<td><span class="day-number">29</span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="day-number">30</span></td>
|
|
<td>
|
|
<span class="day-number">31</span>
|
|
<ul class="event-list">
|
|
<li class="event-item">Halloween Party</li>
|
|
</ul>
|
|
</td>
|
|
<td class="other-month"><span class="day-number">1</span></td>
|
|
<td class="other-month"><span class="day-number">2</span></td>
|
|
<td class="other-month"><span class="day-number">3</span></td>
|
|
<td class="other-month"><span class="day-number">4</span></td>
|
|
<td class="other-month"><span class="day-number">5</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|