<div class="container py-5">
  <div class="card bcal-card mx-auto">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <button class="btn btn-sm btn-outline-secondary" id="bcalPrev">&laquo; Prev</button>
        <h5 class="fw-bold mb-0" id="bcalMonthLabel">Month Year</h5>
        <button class="btn btn-sm btn-outline-secondary" id="bcalNext">Next &raquo;</button>
      </div>

      <div class="row row-cols-7 g-1 text-center small text-muted fw-semibold mb-1">
        <div class="col">Sun</div><div class="col">Mon</div><div class="col">Tue</div><div class="col">Wed</div><div class="col">Thu</div><div class="col">Fri</div><div class="col">Sat</div>
      </div>
      <div class="row row-cols-7 g-1" id="bcalGrid"></div>

      <hr>
      <h6 class="fw-bold mb-2" id="bcalEventsLabel">Select a date</h6>
      <ul class="list-group list-group-flush" id="bcalEventsList"></ul>
    </div>
  </div>
</div>

.bcal-card { max-width: 480px; border: 1px solid #eceef1; border-radius: 14px; }
.bcal-day { aspect-ratio: 1 / 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; position: relative; border: 1px solid transparent; }
.bcal-day:hover { background: #f1f3f5; }
.bcal-day.bcal-muted { color: #ced4da; cursor: default; }
.bcal-day.bcal-muted:hover { background: transparent; }
.bcal-day.bcal-selected { background: #212529; color: #fff; }
.bcal-day.bcal-today { border-color: #212529; }
.bcal-dot { width: 5px; height: 5px; border-radius: 50%; background: #d9480f; position: absolute; bottom: 4px; }
.bcal-day.bcal-selected .bcal-dot { background: #fff; }

const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];

// key format: 'YYYY-M-D'
const EVENTS = {};
function addEvent(y, m, d, text) {
  const key = y + '-' + m + '-' + d;
  if (!EVENTS[key]) EVENTS[key] = [];
  EVENTS[key].push(text);
}

const today = new Date();
let viewYear = today.getFullYear();
let viewMonth = today.getMonth();
let selectedKey = null;

// Seed a few sample events relative to the current month so the widget always has something to show.
addEvent(viewYear, viewMonth, today.getDate(), 'Team standup — 9:00 AM');
addEvent(viewYear, viewMonth, today.getDate(), 'Design review — 2:00 PM');
addEvent(viewYear, viewMonth, Math.min(28, today.getDate() + 3), 'Client call');
addEvent(viewYear, viewMonth, Math.max(1, today.getDate() - 4), 'Sprint planning');

const monthLabel = document.getElementById('bcalMonthLabel');
const grid = document.getElementById('bcalGrid');
const eventsLabel = document.getElementById('bcalEventsLabel');
const eventsList = document.getElementById('bcalEventsList');

function renderEventsFor(y, m, d) {
  const key = y + '-' + m + '-' + d;
  eventsLabel.textContent = MONTH_NAMES[m] + ' ' + d + ', ' + y;
  eventsList.innerHTML = '';
  const items = EVENTS[key] || [];
  if (items.length === 0) {
    eventsList.innerHTML = '<li class="list-group-item text-muted small">No events for this day.</li>';
    return;
  }
  items.forEach(text => {
    const li = document.createElement('li');
    li.className = 'list-group-item small';
    li.textContent = text;
    eventsList.appendChild(li);
  });
}

function render() {
  monthLabel.textContent = MONTH_NAMES[viewMonth] + ' ' + viewYear;
  grid.innerHTML = '';

  const firstDayOffset = new Date(viewYear, viewMonth, 1).getDay();
  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
  const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();

  const totalCells = Math.ceil((firstDayOffset + daysInMonth) / 7) * 7;

  for (let i = 0; i < totalCells; i++) {
    const cellNum = i - firstDayOffset + 1;
    const col = document.createElement('div');
    col.className = 'col';
    const day = document.createElement('div');
    day.className = 'bcal-day';

    let cellDate, cellMonth, cellYear, inMonth;
    if (cellNum < 1) {
      cellDate = daysInPrevMonth + cellNum;
      cellMonth = viewMonth - 1;
      cellYear = viewYear;
      inMonth = false;
    } else if (cellNum > daysInMonth) {
      cellDate = cellNum - daysInMonth;
      cellMonth = viewMonth + 1;
      cellYear = viewYear;
      inMonth = false;
    } else {
      cellDate = cellNum;
      cellMonth = viewMonth;
      cellYear = viewYear;
      inMonth = true;
    }

    const normMonth = ((cellMonth % 12) + 12) % 12;
    const normYear = cellYear + Math.floor(cellMonth / 12) - (cellMonth < 0 ? 1 : 0);

    day.textContent = cellDate;

    if (!inMonth) {
      day.classList.add('bcal-muted');
    } else {
      const isToday = normYear === today.getFullYear() && normMonth === today.getMonth() && cellDate === today.getDate();
      if (isToday) day.classList.add('bcal-today');

      const key = normYear + '-' + normMonth + '-' + cellDate;
      if (EVENTS[key] && EVENTS[key].length) {
        const dot = document.createElement('span');
        dot.className = 'bcal-dot';
        day.appendChild(dot);
      }
      if (key === selectedKey) day.classList.add('bcal-selected');

      day.addEventListener('click', () => {
        selectedKey = key;
        render();
        renderEventsFor(normYear, normMonth, cellDate);
      });
    }

    col.appendChild(day);
    grid.appendChild(col);
  }
}

document.getElementById('bcalPrev').addEventListener('click', () => {
  viewMonth -= 1;
  if (viewMonth < 0) { viewMonth = 11; viewYear -= 1; }
  render();
});

document.getElementById('bcalNext').addEventListener('click', () => {
  viewMonth += 1;
  if (viewMonth > 11) { viewMonth = 0; viewYear += 1; }
  render();
});

selectedKey = viewYear + '-' + viewMonth + '-' + today.getDate();
render();
renderEventsFor(viewYear, viewMonth, today.getDate());