技术需求：创建含后续7天的日历及生成星期列表格的万年历

Alright, let's break down how to build both of these calendar solutions. I'll stick to vanilla HTML/CSS/JS so you can drop this into any project without extra dependencies—easy to adapt to React, Vue, or whatever framework you're using.

This one's straightforward: we'll generate a grid of cards showing today plus the next 6 days, with a highlight for the current date.

HTML Structure #

<div class="seven-day-calendar">
  <h3>Next 7 Days</h3>
  <div class="days-container"></div>
</div>

Basic Styling #

.seven-day-calendar {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.days-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.day-card {
  padding: 15px;
  text-align: center;
  border-radius: 6px;
  background-color: #f8f9fa;
  transition: background-color 0.2s;
}

.day-card:hover {
  background-color: #e9ecef;
}

.day-card.today {
  background-color: #e3f2fd;
  border: 1px solid #2196f3;
  font-weight: bold;
}

JavaScript Logic #

const daysContainer = document.querySelector('.days-container');
const today = new Date();

// Loop through the next 7 days
for (let i = 0; i < 7; i++) {
  const currentDay = new Date(today);
  currentDay.setDate(today.getDate() + i);

  // Create a card for each day
  const dayCard = document.createElement('div');
  dayCard.classList.add('day-card');
  if (i === 0) dayCard.classList.add('today');

  // Format day name and date (swap 'en-US' for your locale if needed)
  const dayName = currentDay.toLocaleDateString('en-US', { weekday: 'short' });
  const dateStr = currentDay.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

  dayCard.innerHTML = `<strong>${dayName}</strong><br>${dateStr}`;
  daysContainer.appendChild(dayCard);
}

This will render a clean, responsive 7-day grid. The toLocaleDateString method handles date formatting automatically—adjust the locale string to match your region's date conventions.

This solution builds a complete monthly calendar with navigation buttons, highlights today, and fills in adjacent month days to keep the week-column structure intact.

HTML Structure #

<div class="perpetual-calendar">
  <div class="calendar-header">
    <button id="prev-month">&lt;</button>
    <h2 id="current-month-year"></h2>
    <button id="next-month">&gt;</button>
  </div>
  <table class="calendar-table">
    <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
    </thead>
    <tbody id="calendar-body"></tbody>
  </table>
</div>

Styling #

.perpetual-calendar {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 30px auto;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.calendar-header button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.calendar-header button:hover {
  background-color: #1976d2;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #eee;
}

.calendar-table th {
  background-color: #f5f5f5;
}

.calendar-table td.other-month {
  color: #ccc;
}

.calendar-table td.today {
  background-color: #e3f2fd;
  font-weight: bold;
}

.calendar-table td:hover {
  background-color: #f0f8ff;
  cursor: pointer;
}

JavaScript Logic #

let currentDate = new Date();

// Helper: Get total days in a given month/year
function getDaysInMonth(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

// Helper: Get first day of the month (0 = Sunday, 6 = Saturday)
function getFirstDayOfMonth(year, month) {
  return new Date(year, month, 1).getDay();
}

// Render the calendar for the current month/year
function renderCalendar() {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  const daysInMonth = getDaysInMonth(year, month);
  const firstDay = getFirstDayOfMonth(year, month);

  // Update header with current month/year
  document.getElementById('current-month-year').textContent = 
    currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });

  const calendarBody = document.getElementById('calendar-body');
  calendarBody.innerHTML = '';

  let dateCounter = 1;

  // Loop through up to 6 rows (max needed for any month)
  for (let row = 0; row < 6; row++) {
    const tableRow = document.createElement('tr');
    
    // Loop through 7 columns (Sunday to Saturday)
    for (let col = 0; col < 7; col++) {
      const tableCell = document.createElement('td');
      
      // Fill in previous month's days if we're in the first row and before the first day of the month
      if (row === 0 && col < firstDay) {
        const prevMonthTotalDays = getDaysInMonth(year, month - 1);
        tableCell.textContent = prevMonthTotalDays - firstDay + col + 1;
        tableCell.classList.add('other-month');
      } 
      // Fill in current month's days
      else if (dateCounter <= daysInMonth) {
        tableCell.textContent = dateCounter;
        
        // Highlight today's date
        const today = new Date();
        if (dateCounter === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
          tableCell.classList.add('today');
        }
        
        dateCounter++;
      } 
      // Fill in next month's days to complete the week
      else {
        tableCell.textContent = dateCounter - daysInMonth;
        tableCell.classList.add('other-month');
        dateCounter++;
      }
      
      tableRow.appendChild(tableCell);
    }
    
    // Stop adding rows once we've filled all current month days
    if (dateCounter > daysInMonth + (7 - firstDay)) break;
    
    calendarBody.appendChild(tableRow);
  }
}

// Add navigation button functionality
document.getElementById('prev-month').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar();
});

// Render the calendar on page load
renderCalendar();

Customization Tips #

• If you want Monday as the first day of the week, adjust the getFirstDayOfMonth function to return (new Date(year, month, 1).getDay() + 6) % 7 and reorder the table headers to start with "Mon".
• Add date selection by attaching a click event listener to table cells and tracking the selected date.
• Tweak the CSS colors, padding, or font sizes to match your project's design system.

内容的提问来源于stack exchange，提问作者logobi