1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Class Schedule Planner</title> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 <body> 10 11 <div class="container"> 12 13 <!-- HEADER --> 14 <div class="header"> 15 <h1>February 2026</h1> 16 <button id="addBtn">+ Add Schedule</button> 17 </div> 18 19 <!-- CALENDAR GRID --> 20 <div class="calendar" id="calendar"> 21 <!-- Columns generated by JS --> 22 </div> 23 24 </div> 25 26 <!-- MODAL --> 27 <div class="modal" id="modal"> 28 <div class="modal-content"> 29 <h3 id="modalTitle">Add Schedule</h3> 30 31 <input type="text" id="eventText" placeholder="Event name"> 32 33 <select id="eventDay"> 34 <option value="16">16 February</option> 35 <option value="17">17 February</option> 36 <option value="18">18 February</option> 37 <option value="19">19 February</option> 38 <option value="20">20 February</option> 39 <option value="21">21 February</option> 40 <option value="22">22 February</option> 41 </select> 42 43 <select id="eventColor"> 44 <option value="yellow">Yellow</option> 45 <option value="green">Green</option> 46 <option value="blue">Blue</option> 47 <option value="pink">Pink</option> 48 <option value="gray">Gray</option> 49 </select> 50 51 <div class="modal-actions"> 52 <button id="saveBtn">Save</button> 53 <button id="deleteBtn">Delete</button> 54 </div> 55 </div> 56 </div> 57 58 <script src="script.js"></script> 59 </body> 60 </html>
1 body { 2 margin: 0; 3 font-family: Arial, sans-serif; 4 background: #e7e2db; 5 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 min-height: 100vh; 10 } 11 12 /* CONTAINER */ 13 .container { 14 width: 1600px; 15 max-width: 95vw; 16 } 17 18 /* HEADER */ 19 .header { 20 display: flex; 21 justify-content: space-between; 22 align-items: center; 23 margin-bottom: 80px; 24 } 25 26 .header h1 { 27 margin: 0; 28 font-size: 60px; 29 } 30 31 #addBtn { 32 background: black; 33 color: white; 34 border: none; 35 padding: 18px 32px; 36 font-size: 22px; 37 cursor: pointer; 38 border-radius: 6px; 39 } 40 41 /* CALENDAR */ 42 .calendar { 43 display: grid; 44 grid-template-columns: repeat(7, 1fr); 45 gap: 50px; 46 } 47 48 .day-column { 49 border-left: 2px solid #cfcac3; 50 padding-left: 25px; 51 min-height: 650px; 52 } 53 54 .date { 55 font-weight: bold; 56 font-size: 30px; 57 margin-bottom: 6px; 58 } 59 60 .day-name { 61 font-size: 22px; 62 color: #7c7c7c; 63 margin-bottom: 25px; 64 } 65 66 /* EVENT — DIPERKECIL */ 67 .event { 68 display: flex; 69 align-items: center; 70 padding: 10px 14px; /* sebelumnya 16px 20px */ 71 border-radius: 8px; 72 margin-bottom: 12px; /* sebelumnya 16px */ 73 font-size: 18px; /* sebelumnya 22px */ 74 cursor: pointer; 75 } 76 77 .event span { 78 margin-left: 12px; /* sebelumnya 16px */ 79 } 80 81 /* Bullet */ 82 .bullet { 83 width: 10px; /* sebelumnya 14px */ 84 height: 10px; 85 border-radius: 50%; 86 background: black; 87 } 88 89 /* Colors */ 90 .yellow { background: #ffeaa7; } 91 .green { background: #c8f7c5; } 92 .blue { background: #d6eaff; } 93 .pink { background: #ffd6e8; } 94 .gray { background: #e0e0e0; } 95 96 /* MODAL */ 97 .modal { 98 display: none; 99 position: fixed; 100 inset: 0; 101 background: rgba(0,0,0,0.4); 102 justify-content: center; 103 align-items: center; 104 } 105 106 .modal-content { 107 background: white; 108 padding: 40px; 109 width: 600px; 110 border-radius: 10px; 111 } 112 113 .modal-content h3 { 114 font-size: 28px; 115 } 116 117 .modal-content input, 118 .modal-content select { 119 width: 100%; 120 margin-bottom: 20px; 121 padding: 14px; 122 font-size: 18px; 123 } 124 125 .modal-actions { 126 display: flex; 127 justify-content: space-between; 128 } 129 130 .modal-actions button { 131 padding: 12px 20px; 132 font-size: 18px; 133 } 134 135 /* RESPONSIVE */ 136 @media (max-width: 1200px) { 137 .container { 138 width: 95%; 139 } 140 141 .calendar { 142 grid-template-columns: repeat(3, 1fr); 143 } 144 } 145 146 @media (max-width: 768px) { 147 .calendar { 148 grid-template-columns: repeat(1, 1fr); 149 } 150 }
1 const calendar = document.getElementById("calendar"); 2 const modal = document.getElementById("modal"); 3 const addBtn = document.getElementById("addBtn"); 4 const saveBtn = document.getElementById("saveBtn"); 5 const deleteBtn = document.getElementById("deleteBtn"); 6 7 const eventText = document.getElementById("eventText"); 8 const eventDay = document.getElementById("eventDay"); 9 const eventColor = document.getElementById("eventColor"); 10 const modalTitle = document.getElementById("modalTitle"); 11 12 let editId = null; 13 14 const days = [ 15 { date: "16", day: "Mon" }, 16 { date: "17", day: "Tue" }, 17 { date: "18", day: "Wed" }, 18 { date: "19", day: "Thu" }, 19 { date: "20", day: "Fri" }, 20 { date: "21", day: "Sat" }, 21 { date: "22", day: "Sun" } 22 ]; 23 24 function loadEvents() { 25 return JSON.parse(localStorage.getItem("events")) || []; 26 } 27 28 function saveEvents(events) { 29 localStorage.setItem("events", JSON.stringify(events)); 30 } 31 32 function renderCalendar() { 33 calendar.innerHTML = ""; 34 const events = loadEvents(); 35 36 days.forEach(d => { 37 const col = document.createElement("div"); 38 col.classList.add("day-column"); 39 40 col.innerHTML = ` 41 <div class="date">${d.date} Feb</div> 42 <div class="day-name">${d.day}</div> 43 `; 44 45 events 46 .filter(e => e.day === d.date) 47 .forEach(e => { 48 const div = document.createElement("div"); 49 div.classList.add("event", e.color); 50 div.innerHTML = ` 51 <div class="bullet"></div> 52 <span>${e.text}</span> 53 `; 54 55 div.onclick = () => editEvent(e.id); 56 col.appendChild(div); 57 }); 58 59 calendar.appendChild(col); 60 }); 61 }