1. Python技术站首页
  2. css

CSS 制作有弹性的日历表

• css
yizhihongxing

下面是关于“CSS 制作有弹性的日历表”的完整攻略：

1. 分析需求

首先，我们要明确自己要制作的日历表应该具备哪些功能和特性，比如：

  • 支持显示任意年月的日历
  • 以表格形式呈现，包括日历视图和周视图两种模式
  • 对于当前月份的日期，应该以不同颜色或样式标识出来
  • 可以通过点击日历中的日期实现对应日期的选择和显示

当我们明确了需求之后，就可以开始着手制作了。

2. 准备工作

在开始之前，我们需要准备好以下内容：

  • 一个 HTML 文件，用于搭建页面结构和组件
  • 一个 CSS 文件，用于设置样式和布局
  • 一个 JavaScript 文件，用于实现交互和选择逻辑

3. 搭建页面结构

首先，我们需要在 HTML 文件中搭建好页面结构，包括日历的容器和包含日期的表格。具体结构可以参考代码示例：

<div class="calendar-container">
  <div class="calendar-header">
    <span class="prev-month">&lt;</span>
    <span class="current-month"></span>
    <span class="next-month">&gt;</span>
  </div>
  <table class="calendar-table">
    <thead>
      <tr>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

在这个页面结构中，我们定义了一个名为“calendar-container”的容器元素，用于包裹整个日历表格和其它组件。日历表格本身是一个 <table> 元素，其中包含一个 <thead> 元素和一个空的 <tbody> 元素。<thead> 用于放置表头信息，而<tbody>通过 JavaScript 脚本来动态生成日期的行和列。

4. 设置样式和布局

接下来，我们需要通过 CSS 文件来设置日历表的样式和布局。具体可以参考以下代码示例：

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th {
  padding: 10px;
  text-align: center;
}

.calendar-table td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked {
  background-color: #ccc;
}

在这个样式文件中，我们设置了日历表格的容器和其它组件的样式，以及日期表格的边框和字体等样式。特别地，我们为当前月份的日期单独设置了背景颜色，以及对于已经被点击过的日期也设置了一个灰色背景。

5. 实现交互和选择

最后，我们需要通过 JavaScript 文件来实现日历表格的交互和日期选择功能。具体可参考以下代码示例：

let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar(month, year) {
  let startDate = new Date(year, month, 1);
  let endDate = new Date(year, month + 1, 0);
  let daysInMonth = endDate.getDate();

  let tbody = document.querySelector('.calendar-table tbody');
  tbody.innerHTML = '';

  for (let i = 0; i < 6; i++) {
    let tr = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      let td = document.createElement('td');
      let day = i * 7 + j + 1 - startDate.getDay();

      if (day > 0 && day <= daysInMonth) {
        td.textContent = day;
        td.classList.add('current-month');

        if (j == 0 || j == 6) {
          td.classList.add('weekend');
        }

        tr.appendChild(td);
      } else {
        tr.appendChild(document.createElement('td'));
      }
    }

    tbody.appendChild(tr);
  }

  let currentDateCells = document.querySelectorAll(`.calendar-table td.current-month`);
  currentDateCells.forEach((cell) => {
    cell.addEventListener('click', (event) => {
      currentDateCells.forEach((c) => {
        c.classList.remove('clicked');
      });
      event.target.classList.add('clicked');
    });
  });

  let currentMonth = document.querySelector('.current-month');
  currentMonth.textContent = `${year} - ${startDate.toLocaleString('default', { month: 'long' })}`;
}

renderCalendar(currentMonthIndex, currentYear);

let prevMonth = document.querySelector('.prev-month');
prevMonth.addEventListener('click', () => {
  currentMonthIndex -= 1;
  if (currentMonthIndex < 0) {
    currentMonthIndex = 11;
    currentYear -= 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

let nextMonth = document.querySelector('.next-month');
nextMonth.addEventListener('click', () => {
  currentMonthIndex += 1;
  if (currentMonthIndex > 11) {
    currentMonthIndex = 0;
    currentYear += 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

在这个 JavaScript 脚本中，我们定义了一个名为“renderCalendar”的函数，用于动态生成日期表格并添加选择逻辑。同时，我们也定义了一些事件监听器，用于实现通过左右箭头来切换不同月份的日历。具体实现细节可以详见代码注释。

6. 示例说明

为了更好地理解和实践上述攻略，下面我将为您演示两个具体的实例。

示例1：日历表的基本显示和交互

在这个示例中，我们先建立好一个空的 HTML 文件和 CSS、JS 文件，并按照上述攻略进行搭建和编写。同时，我们为网页添加一个标题，用于说明页面的用途。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>弹性日历表 DEMO1</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar-container">
    <div class="calendar-header">
      <span class="prev-month">&lt;</span>
      <span class="current-month"></span>
      <span class="next-month">&gt;</span>
    </div>
    <table class="calendar-table">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>
</html>

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th {
  padding: 10px;
  text-align: center;
}

.calendar-table td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked {
  background-color: #ccc;
}

let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar(month, year) {
  let startDate = new Date(year, month, 1);
  let endDate = new Date(year, month + 1, 0);
  let daysInMonth = endDate.getDate();

  let tbody = document.querySelector('.calendar-table tbody');
  tbody.innerHTML = '';

  for (let i = 0; i < 6; i++) {
    let tr = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      let td = document.createElement('td');
      let day = i * 7 + j + 1 - startDate.getDay();

      if (day > 0 && day <= daysInMonth) {
        td.textContent = day;
        td.classList.add('current-month');

        if (j == 0 || j == 6) {
          td.classList.add('weekend');
        }

        tr.appendChild(td);
      } else {
        tr.appendChild(document.createElement('td'));
      }
    }

    tbody.appendChild(tr);
  }

  let currentDateCells = document.querySelectorAll(`.calendar-table td.current-month`);
  currentDateCells.forEach((cell) => {
    cell.addEventListener('click', (event) => {
      currentDateCells.forEach((c) => {
        c.classList.remove('clicked');
      });
      event.target.classList.add('clicked');
    });
  });

  let currentMonth = document.querySelector('.current-month');
  currentMonth.textContent = `${year} - ${startDate.toLocaleString('default', { month: 'long' })}`;
}

renderCalendar(currentMonthIndex, currentYear);

let prevMonth = document.querySelector('.prev-month');
prevMonth.addEventListener('click', () => {
  currentMonthIndex -= 1;
  if (currentMonthIndex < 0) {
    currentMonthIndex = 11;
    currentYear -= 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

let nextMonth = document.querySelector('.next-month');
nextMonth.addEventListener('click', () => {
  currentMonthIndex += 1;
  if (currentMonthIndex > 11) {
    currentMonthIndex = 0;
    currentYear += 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

在浏览器中打开此 HTML 文件，即可看到呈现日历的页面。同时还可以通过左右箭头切换不同月份的日历，并且点击任意日期单元格后，该单元格会以灰色背景标识为已选择状态。

示例2：添加周视图模式

在这个示例中，我们在上一个示例的基础上，增加了一个名为“week-view”的按钮，并为其添加了一个“点击切换至周视图”的监听事件。同时，我们还要修改一些 CSS 样式，以便能够支持周视图模式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>弹性日历表 DEMO2</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar-container">
    <div class="calendar-header">
      <span class="prev-month">&lt;</span>
      <span class="current-month"></span>
      <span class="next-month">&gt;</span>
      <button class="week-view">周视图</button>
    </div>
    <table class="calendar-table">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>
</html>

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table,
.calendar-table-week {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th,
.calendar-table-week th {
  padding: 10px;
  text-align: center;
}

.calendar-table td,
.calendar-table-week td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month,
.calendar-table-week td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked,
.calendar-table-week td.clicked {
  background-color: #ccc;
}

.calendar-table-week tbody {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.calendar-table-week tbody tr {
  flex: 1;
}

```javascript
let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();
let isWeekView = false;

function renderCalendar(month, year) {
let startDate = new Date(year, month, 1);
let endDate = new Date(year, month + 1, 0);
let daysInMonth = endDate.getDate();

if (isWeekView) {
startDate = new Date(startDate.getTime() - startDate.getDay() * 24 * 60 * 60 * 1000);
endDate = new Date(startDate.getTime() + 6 * 24 * 60 * 60 * 1000);
}

let tbody = document.querySelector('.calendar-table tbody');
tbody.innerHTML = '';

if (isWeekView) {
let tr = document.createElement('tr');
for (let i = 0; i < 7; i++) {
let td = document.createElement('td');
td.textContent = ${startDate.getDate() + i} ${startDate.toLocaleString('default', { month: 'long' })};
td.classList.add('current-month');
if (i == 0 || i == 6) {
td.classList.add('weekend');
}
tr.appendChild(td);
}
tbody.appendChild(tr);
} else {
for (let i = 0; i < 6; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < 7; j++) {
let td = document.createElement('td');
let day = i * 7 + j + 1 - startDate.getDay();

    if (day > 0 && day <= daysInMonth) {
      td.textContent = day;
      td.classList.add('current-month');

      if (j == 0 || j == 6) {
        td.classList.add('weekend');
      }

      tr.appendChild(td);
    } else {
      tr.appendChild(document.createElement('td'));
    }
  }
  tbody.appendChild(tr);
}

}

let currentDateCells = document.querySelectorAll(.calendar-table td.current-month);
currentDateCells.forEach((cell) => {
cell.addEventListener('click', (event) => {
currentDateCells.forEach((c) => {
c.classList.remove('clicked');
});
event.target.classList.add('clicked');
});
});

let currentMonth = document.querySelector('.current-month');
if (isWeekView) {
let startOfWeek = new Date(startDate.getTime());
let endOfWeek = new Date(endDate.getTime());
if (startOfWeek.getMonth() !== endOfWeek.getMonth()) {
currentMonth.textContent = ${startOfWeek.toLocaleString('default', { month: 'short' })} ${startOfWeek.getDate()} - ${endOfWeek.toLocaleString('default', { month: 'short' })} ${endOfWeek.getDate()};
} else {
currentMonth.textContent = ${startOfWeek.toLocaleString('default', { month: 'short' })} ${startOfWeek.getDate()} - ${endOfWeek.getDate()};
}
} else {
currentMonth.textContent = ${year} - ${startDate.toLocaleString('default', { month: 'long' })};

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 制作有弹性的日历表 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 纯CSS3实现鼠标悬停提示气泡效果

    下面是详细讲解”纯CSS3实现鼠标悬停提示气泡效果”的完整攻略： 一、简介 在Web开发中，经常需要对某些元素添加提示信息，尤其是一些带有缩略语或者关键词的标签，需要在鼠标悬停时显示具体的解释。常见的方法是通过JavaScript实现，但其需要额外的代码和操作，而纯CSS呈现这种效果更简单、更轻量级、更优雅。这种效果通常被称作”鼠标悬停提示气泡效果”。 二、…

    css 2023年6月10日
    00

  • dnf大转移远古3套装掉落规则详解_dnf大转移远古3套装掉落具体位置

    DNF大转移远古3套装掉落规则详解 DNF大转移远古3套装是很多玩家追求和期待的装备之一。以下是掉落规则和具体位置的详细介绍。 远古3套装掉落规则 远古3套装是十字军、永恒和埃及三个套装的总称。 远古3套装掉落的难度从低到高为：埃及套装，永恒套装，十字军套装。 远古3套装掉落的难度也与等级分别为75、80和85有关。 远古3套装的掉落位置包括：黄金枪鱼、弑神…

    css 2023年6月10日
    00

  • JQuery实现鼠标移动到图片上显示边框效果

    JQuery实现鼠标移动到图片上显示边框效果是一个很常见的前端开发需求。本文将为大家提供一份完整的攻略。 实现方式 要实现这个效果，我们需要用到JQuery的鼠标移入移出事件，以及CSS的边框样式。具体步骤如下： 在HTML中加入图片 在HTML文件中加入需要实现效果的图片，如下所示： html <img src=”example.jpg” alt=”…

    css 2023年6月11日
    00

  • React diff算法原理详细分析

    那么我将为您详细讲解”React diff算法原理详细分析”。 什么是React Diff算法？ React中的Diff算法是一个优化策略，帮助我们减少页面重新渲染的次数。基于旧虚拟DOM，React会计算出新的虚拟DOM，通过比较两个虚拟DOM的不同，React会计算出最小化的操作，将更新反映到页面上。React为了提高性能，采用了一种叫做分层的优化策略。…

    css 2023年6月10日
    00

  • JS实现div内部的文字或图片自动循环滚动代码

    实现div内部的文字或图片自动循环滚动，可以使用JavaScript来实现。下面是实现的完整攻略： 1. 准备工作 首先需要一个包含滚动内容的div容器，例如： <div id="scroll-container"> <ul> <li><img src="img1.jpg" a…

    css 2023年6月10日
    00

  • elementui下image组件的使用

    下面是详细的ElementUI下组件使用攻略。 ElementUI的组件 ElementUI的组件提供了一种简单易用的方式来展示和控制图片。它允许您指定image的url、宽度和高度，并提供了一些事件用于在加载、错误和缩放过程中控制图片。 基本使用方法 要在ElementUI中使用组件，您需要首先安装ElementUI和Vue.js，然后将组件导入您的项目中…

    css 2023年6月10日
    00

  • js实现背景图片感应鼠标变化的方法

    下面提供详细的 JS 实现背景图片感应鼠标变化的方法的攻略： 一、实现原理 利用鼠标的移动事件，将鼠标的位置转换成图片的坐标，然后将图片的位置与鼠标位置相对应，从而实现背景图片随鼠标移动。 二、实现步骤 首先需要确定使用的背景图片。 在 HTML 中定义一个容器，用于放置要实现背景图片响应鼠标变化的元素。 在 JavaScript 中获取容器元素，并为其添加…

    css 2023年6月10日
    00

  • 关于css设置层透明

    设置层透明可以使用CSS3中的opacity属性或RGBA颜色值，以下是详细的攻略： 使用opacity属性设置层透明 opacity的范围为0到1，0表示完全透明，1表示完全不透明。可以将opacity属性应用于想要设置透明度的HTML元素的样式中，如下示例： div { background-color: #000; opacity: 0.5; } 以上…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部