Calendar App

Example Code

```javascript
import React, { useState } from 'react';
import './Calendar.css'; // Assume a basic CSS file for styling

function CalendarApp() {
  const [currentDate, setCurrentDate] = useState(new Date()); // Tracks the month being displayed
  const [events, setEvents] = useState([
    { id: 1, date: new Date(2023, 10, 15), title: 'Team Meeting' }, // Nov 15, 2023
    { id: 2, date: new Date(2023, 10, 20), title: 'Project Deadline' }, // Nov 20, 2023
    { id: 3, date: new Date(2023, 11, 5), title: 'Client Presentation' }, // Dec 5, 2023
    { id: 4, date: new Date(2023, 11, 25), title: 'Christmas Holiday' }, // Dec 25, 2023
    { id: 5, date: new Date(2023, 9, 30), title: 'Halloween Party' }, // Oct 30, 2023
  ]);

  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  // Helper to get the number of days in a given month and year
  const getDaysInMonth = (year, month) => {
    return new Date(year, month + 1, 0).getDate();
  };

  // Helper to get the day of the week for the first day of the month
  const getFirstDayOfMonth = (year, month) => {
    return new Date(year, month, 1).getDay(); // 0 for Sunday, 6 for Saturday
  };

  const renderCalendarDays = () => {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth(); // 0-indexed

    const numDaysInMonth = getDaysInMonth(year, month);
    const firstDayOfMonth = getFirstDayOfMonth(year, month); // Day of week (0-6)
    
    const days = [];

    // Add empty cells for the days before the 1st of the month
    for (let i = 0; i < firstDayOfMonth; i++) {
      days.push(<div key={`empty-prev-${i}`} className="calendar-day empty"></div>);
    }

    // Add days of the current month
    for (let i = 1; i <= numDaysInMonth; i++) {
      const date = new Date(year, month, i);
      const isToday = date.toDateString() === new Date().toDateString();
      const dayEvents = events.filter(event => 
        event.date.getFullYear() === year &&
        event.date.getMonth() === month &&
        event.date.getDate() === i
      );

      days.push(
        <div key={`day-${i}`} className={`calendar-day ${isToday ? 'today' : ''}`}>
          <span className="day-number">{i}</span>
          {dayEvents.map(event => (
            <div key={event.id} className="event" title={event.title}>
              {event.title}
            </div>
          ))}
        </div>
      );
    }

    // Add empty cells for the days after the last day of the month to fill the last row
    const totalCells = days.length;
    // A typical calendar grid has 6 rows * 7 days = 42 cells. Fill remaining cells up to the next Saturday.
    const remainingCellsCount = (7 - (totalCells % 7)) % 7; // Number of cells to fill the last row
    for (let i = 0; i < remainingCellsCount; i++) {
      days.push(<div key={`empty-next-${i}`} className="calendar-day empty"></div>);
    }

    return days;
  };

  const handlePrevMonth = () => {
    setCurrentDate(prevDate => {
      const newDate = new Date(prevDate.getFullYear(), prevDate.getMonth() - 1, 1);
      return newDate;
    });
  };

  const handleNextMonth = () => {
    setCurrentDate(prevDate => {
      const newDate = new Date(prevDate.getFullYear(), prevDate.getMonth() + 1, 1);
      return newDate;
    });
  };

  const monthName = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(currentDate);
  const yearName = currentDate.getFullYear();

  return (
    <div className="calendar-app">
      <div className="calendar-header">
        <button onClick={handlePrevMonth}><</button>
        <h2>{monthName} {yearName}</h2>
        <button onClick={handleNextMonth}>></button>
      </div>
      <div className="calendar-grid">
        {daysOfWeek.map(day => (
          <div key={day} className="calendar-day-header">{day}</div>
        ))}
        {renderCalendarDays()}
      </div>
    </div>
  );
}

export default CalendarApp;
```

```css
/* Calendar.css */
.calendar-app {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background-color: #fff;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #eee;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.calendar-header h2 {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.calendar-header button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s;
}

.calendar-header button:hover {
  background-color: #0056b3;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: #eee; /* Grid line color */
}

.calendar-day-header {
  text-align: center;
  padding: 10px 5px;
  font-weight: bold;
  background-color: #e9e9e9;
  color: #555;
}

.calendar-day {
  background-color: #fff;
  padding: 10px;
  min-height: 100px; /* Adjust as needed */
  display: flex;
  flex-direction: column;
  border: 1px solid #eee; /* Cell borders */
}

.calendar-day .day-number {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.calendar-day.empty {
  background-color: #f9f9f9;
  color: #ccc;
}

.calendar-day.today {
  background-color: #e6f7ff;
  border: 2px solid #007bff;
}

.calendar-day .event {
  background-color: #d1e7dd; /* Light green */
  color: #0f5132; /* Dark green */
  padding: 3px 5px;
  border-radius: 3px;
  margin-bottom: 3px;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.calendar-day.today .event {
  background-color: #aed9ed;
}
```