返回

丰富多彩的活动日历：基于Grid布局的前端日历构建指南

前端

在当今快节奏的世界中，时间管理至关重要。活动日历可以帮助我们跟踪重要日期、截止日期和即将举行的活动，使我们能够有效地规划和安排时间。

前端使用grid布局创建活动日历可以提供诸多好处：

  • 响应式设计：grid布局的响应性使其能够适应不同屏幕尺寸，无论用户使用何种设备，都能获得最佳的视觉效果。

  • 可定制性：grid布局允许您根据自己的喜好和需求自定义日历的外观和功能，使日历更具个性化和实用性。

  • 易于使用：grid布局简单易学，即使是前端开发新手也可以轻松掌握。

  • 兼容性：grid布局得到所有主流浏览器的广泛支持，确保您的日历能够在不同的浏览器中正常显示。

下面，我们将逐步指导您如何使用grid布局和前端技术来构建一个活动日历：

  1. HTML结构
<div class="calendar">
  <div class="header">
    <h1>活动日历</h1>
    <div class="nav">
      <button class="prev-month">上个月</button>
      <button class="next-month">下个月</button>
    </div>
  </div>
  <div class="body">
    <div class="weekdays">
      <div>周一</div>
      <div>周二</div>
      <div>周三</div>
      <div>周四</div>
      <div>周五</div>
      <div>周六</div>
      <div>周日</div>
    </div>
    <div class="days">
      <!-- 动态生成日期单元格 -->
    </div>
  </div>
</div>
  1. CSS样式
.calendar {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  font-family: sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.nav {
  display: flex;
}

.prev-month,
.next-month {
  cursor: pointer;
}

.body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 10px;
  background-color: #ffffff;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  background-color: #f5f5f5;
}

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

.day {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #cccccc;
  text-align: center;
}

.today {
  background-color: #ffeb3b;
}

.event {
  background-color: #f5f5f5;
}
  1. JavaScript代码
const calendar = document.querySelector('.calendar');

// 获取当前日期
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth();

// 创建日历网格
function createCalendarGrid(year, month) {
  // 获取当月第一天是星期几
  const firstDay = new Date(year, month, 1).getDay();

  // 创建日历网格
  const days = [];
  for (let i = 0; i < firstDay; i++) {
    days.push('');
  }

  // 创建当月日期单元格
  for (let i = 1; i <= daysInMonth(year, month); i++) {
    days.push(i);
  }

  // 创建下个月第一天是星期几
  const lastDay = new Date(year, month + 1, 0).getDay();

  // 创建下个月日期单元格
  for (let i = 1; i <= 7 - lastDay; i++) {
    days.push('');
  }

  // 将日期单元格添加到日历网格中
  const daysElement = calendar.querySelector('.days');
  daysElement.innerHTML = days.map(day => `<div class="day${day ? '' : ' empty'}" data-date="${year}-${month + 1}-${day}">${day}</div>`).join('');
}

// 获取当月天数
function daysInMonth(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

// 导航到上个月
function prevMonth() {
  currentMonth--;
  if (currentMonth < 0) {
    currentYear--;
    currentMonth = 11;
  }
  createCalendarGrid(currentYear, currentMonth);
}

// 导航到下个月
function nextMonth() {
  currentMonth++;
  if (currentMonth > 11) {
    currentYear++;
    currentMonth = 0;
  }
  createCalendarGrid(currentYear, currentMonth);
}

// 标记今天
function markToday() {
  const today = new Date();
  const todayElement = calendar.querySelector(`.day[data-date="${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}"]`);
  todayElement.classList.add('today');
}

// 添加事件
function addEvent(date, event) {
  const eventElement = calendar.querySelector(`.day[data-date="${date}"]`);
  eventElement.classList.add('event');
  eventElement.innerHTML += `<div class="event-title">${event}</div>`;
}

// 初始化日历
createCalendarGrid(currentYear, currentMonth);
markToday();
  1. 添加事件

您可以使用以下代码来添加事件到日历中：

addEvent('2023-03-08', '工作会议');
addEvent('2023-03-15', '医生预约');
addEvent('2023-03-20', '朋友聚会');
  1. 运行示例

您可以将上述HTML、CSS和JavaScript代码复制到一个HTML文件中，并将其保存在您的计算机中。然后，使用浏览器打开该HTML文件即可看到活动日历。