1<div class="calendar-container">
2  <div class="calendar-header">
3    <button id="prev-month">&lt;</button>
4    <h2 id="month-year">March 2026</h2>
5    <button id="next-month">&gt;</button>
6  </div>
7
8  <div class="calendar-grid">
9    <div class="day-header">Sun</div>
10    <div class="day-header">Mon</div>
11    <div class="day-header">Tue</div>
12    <div class="day-header">Wed</div>
13    <div class="day-header">Thu</div>
14    <div class="day-header">Fri</div>
15    <div class="day-header">Sat</div>
16    <!-- Day cells generated by JavaScript -->
17  </div>
18</div>

1.calendar-container {
2  max-width: 900px;
3  margin: 0 auto;
4  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5}
6
7.calendar-header {
8  display: flex;
9  justify-content: space-between;
10  align-items: center;
11  padding: 16px;
12}
13
14.calendar-header button {
15  background: none;
16  border: 1px solid #ddd;
17  border-radius: 4px;
18  padding: 8px 16px;
19  cursor: pointer;
20  font-size: 16px;
21}
22
23.calendar-grid {
24  display: grid;
25  grid-template-columns: repeat(7, 1fr);
26  border: 1px solid #e0e0e0;
27}
28
29.day-header {
30  padding: 8px;
31  text-align: center;
32  font-weight: 600;
33  background: #f5f5f5;
34  border-bottom: 1px solid #e0e0e0;
35}
36
37.day-cell {
38  min-height: 120px;
39  border: 1px solid #e0e0e0;
40  padding: 4px;
41  position: relative;  /* For positioning event divs */
42}
43
44.day-cell.other-month {
45  background: #fafafa;
46  color: #ccc;
47}
48
49.day-cell.today {
50  background: #e3f2fd;
51}
52
53.day-number {
54  font-size: 14px;
55  font-weight: 500;
56  margin-bottom: 4px;
57}
58
59.event-div {
60  background: #1976d2;
61  color: white;
62  padding: 2px 6px;
63  margin: 2px 0;
64  border-radius: 3px;
65  font-size: 12px;
66  cursor: pointer;
67  overflow: hidden;
68  white-space: nowrap;
69  text-overflow: ellipsis;
70}
71
72.event-div:hover {
73  opacity: 0.85;
74}
75
76.event-div.multi-day {
77  border-radius: 0;
78  margin-right: -4px;
79  margin-left: -4px;
80}
81
82.event-div.multi-day.start {
83  border-radius: 3px 0 0 3px;
84  margin-left: 0;
85}
86
87.event-div.multi-day.end {
88  border-radius: 0 3px 3px 0;
89  margin-right: 0;
90}
91
92/* Event color categories */
93.event-div.work { background: #1976d2; }
94.event-div.personal { background: #388e3c; }
95.event-div.urgent { background: #d32f2f; }
96.event-div.meeting { background: #7b1fa2; }

1class Calendar {
2  constructor(container) {
3    this.container = container;
4    this.currentDate = new Date();
5    this.events = [];
6    this.init();
7  }
8
9  init() {
10    document.getElementById("prev-month").addEventListener("click", () => {
11      this.currentDate.setMonth(this.currentDate.getMonth() - 1);
12      this.render();
13    });
14
15    document.getElementById("next-month").addEventListener("click", () => {
16      this.currentDate.setMonth(this.currentDate.getMonth() + 1);
17      this.render();
18    });
19
20    this.render();
21  }
22
23  render() {
24    const year = this.currentDate.getFullYear();
25    const month = this.currentDate.getMonth();
26
27    // Update header
28    const monthNames = [
29      "January", "February", "March", "April", "May", "June",
30      "July", "August", "September", "October", "November", "December",
31    ];
32    document.getElementById("month-year").textContent =
33      `${monthNames[month]} ${year}`;
34
35    // Calculate grid
36    const firstDay = new Date(year, month, 1).getDay();
37    const daysInMonth = new Date(year, month + 1, 0).getDate();
38    const daysInPrevMonth = new Date(year, month, 0).getDate();
39
40    // Clear existing day cells
41    const grid = document.querySelector(".calendar-grid");
42    grid.querySelectorAll(".day-cell").forEach((el) => el.remove());
43
44    // Previous month's trailing days
45    for (let i = firstDay - 1; i >= 0; i--) {
46      const day = daysInPrevMonth - i;
47      this.createDayCell(grid, day, year, month - 1, true);
48    }
49
50    // Current month days
51    const today = new Date();
52    for (let day = 1; day <= daysInMonth; day++) {
53      const isToday =
54        day === today.getDate() &&
55        month === today.getMonth() &&
56        year === today.getFullYear();
57      this.createDayCell(grid, day, year, month, false, isToday);
58    }
59
60    // Next month's leading days
61    const totalCells = firstDay + daysInMonth;
62    const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
63    for (let day = 1; day <= remaining; day++) {
64      this.createDayCell(grid, day, year, month + 1, true);
65    }
66  }
67
68  createDayCell(grid, day, year, month, isOtherMonth, isToday = false) {
69    const cell = document.createElement("div");
70    cell.className = "day-cell";
71    if (isOtherMonth) cell.classList.add("other-month");
72    if (isToday) cell.classList.add("today");
73
74    const number = document.createElement("div");
75    number.className = "day-number";
76    number.textContent = day;
77    cell.appendChild(number);
78
79    // Add events for this day
80    const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
81    const dayEvents = this.getEventsForDate(dateStr);
82    dayEvents.forEach((event) => {
83      const eventDiv = document.createElement("div");
84      eventDiv.className = `event-div ${event.category || ""}`;
85      eventDiv.textContent = event.title;
86      eventDiv.addEventListener("click", (e) => {
87        e.stopPropagation();
88        this.onEventClick(event);
89      });
90      cell.appendChild(eventDiv);
91    });
92
93    // Click to add event
94    cell.addEventListener("click", () => {
95      if (!isOtherMonth) {
96        this.onDayClick(dateStr);
97      }
98    });
99
100    grid.appendChild(cell);
101  }
102
103  addEvent(event) {
104    this.events.push(event);
105    this.render();
106  }
107
108  getEventsForDate(dateStr) {
109    return this.events.filter((e) => e.date === dateStr);
110  }
111
112  onDayClick(dateStr) {
113    const title = prompt(`Add event for ${dateStr}:`);
114    if (title) {
115      this.addEvent({ title, date: dateStr, category: "work" });
116    }
117  }
118
119  onEventClick(event) {
120    alert(`Event: ${event.title}\nDate: ${event.date}`);
121  }
122}
123
124// Initialize
125const calendar = new Calendar(document.querySelector(".calendar-container"));
126
127// Add sample events
128calendar.addEvent({ title: "Team Meeting", date: "2026-03-05", category: "meeting" });
129calendar.addEvent({ title: "Deploy v2.0", date: "2026-03-12", category: "work" });
130calendar.addEvent({ title: "Doctor Appt", date: "2026-03-18", category: "personal" });
131calendar.addEvent({ title: "Deadline", date: "2026-03-25", category: "urgent" });

1// Add to Calendar class
2renderMultiDayEvent(event) {
3  const start = new Date(event.startDate);
4  const end = new Date(event.endDate);
5  const cells = document.querySelectorAll('.day-cell');
6
7  cells.forEach(cell => {
8    const cellDate = cell.dataset.date;
9    if (!cellDate) return;
10
11    const current = new Date(cellDate);
12    if (current >= start && current <= end) {
13      const div = document.createElement('div');
14      div.className = `event-div multi-day ${event.category || ''}`;
15      div.textContent = current.getTime() === start.getTime()
16        ? event.title
17        : '';
18
19      if (current.getTime() === start.getTime()) div.classList.add('start');
20      if (current.getTime() === end.getTime()) div.classList.add('end');
21
22      cell.appendChild(div);
23    }
24  });
25}

1// Example event structure
2const events = [
3  {
4    id: 1,
5    title: "Sprint Planning",
6    date: "2026-03-02",
7    startTime: "09:00",
8    endTime: "10:30",
9    category: "meeting",
10    color: "#7b1fa2",
11  },
12  {
13    id: 2,
14    title: "Conference",
15    startDate: "2026-03-15",
16    endDate: "2026-03-17",
17    category: "work",
18    allDay: true,
19  },
20];