1. Python技术站首页
  2. css

CSS 制作有弹性的日历表

• css

下面是关于“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日

相关文章

  • jQuery过滤选择器用法分析

    jQuery过滤选择器用法分析 jQuery是一款优秀的JavaScript框架，它提供了许多强大而又方便的功能来操作文档。其中，过滤选择器作为一种常用的功能，可以帮助我们根据特定的条件来选取元素，以达到更加方便的操作。 基本用法 使用jQuery选择器的基本语法是： $(selector).filter(expression) 其中，selector是需要…

    css 2023年6月10日
    00

  • CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

    下面是针对“CSS3系列教程:背景图片(背景大小和多背景图) 应用说明”的完整攻略。 1. 背景图片的应用说明 在网页开发中，背景图片是很重要的一部分，可以为网页增加美感和视觉效果。CSS3不仅提供了多种背景图片的设置方式，还提供了更多的背景属性可以设置。 1.1 背景图片的设置方式 设置背景图片可以通过以下的CSS属性： background-image：…

    css 2023年6月9日
    00

  • 利用css制作3D照片墙效果

    下面是制作3D照片墙效果的完整攻略： 1. 概述 制作3D照片墙效果需要使用CSS3的transform属性来控制元素的位置和旋转角度，同时还需要使用伪元素和z-index属性来实现层叠效果。总体实现过程包括以下几个步骤： 创建一个包含图片的HTML结构，每个图片需要设置一个固定大小的容器和一个img标签。 对图片容器设置透视距离，以及一些基础的样式，比如宽…

    css 2023年6月10日
    00

  • 基于ASP.NET+easyUI框架实现图片上传功能（表单）

    下面我将详细讲解“基于ASP.NET+easyUI框架实现图片上传功能（表单）”的完整攻略。 一、前置条件 在开始实现图片上传功能之前，我们需要确保以下环境和条件已经满足： 本地已经安装了Visual Studio 集成开发工具； 项目中已经引用了easyUI框架； 已经配置好了上传文件的保存路径。 二、实现步骤 （1） filebox控件的配置 首先，在A…

    css 2023年6月11日
    00

  • 兼容主流浏览器的CSS透明代码(必看篇)

    下面详细讲解“兼容主流浏览器的CSS透明代码(必看篇)”的完整攻略。 什么是CSS透明代码 CSS透明代码是指在Web页面中，通过CSS样式实现元素背景透明的技术。 通过调节透明度值，可以让元素显示成半透明或全透明，从而带来更好的视觉效果，让页面看起来更加美观。 如何实现兼容主流浏览器的CSS透明代码 下面是一些常用的CSS透明代码实现方式： 使用RGBA颜…

    css 2023年6月9日
    00

  • div+css实现自适应宽度按钮

    让我来给您详细讲解一下 “div+css实现自适应宽度按钮” 的完整攻略。 什么是自适应宽度按钮 自适应宽度按钮是指可以根据所在容器的尺寸自动调整自身宽度的按钮，通常用于响应式网站设计中的移动端页面布局。下面我们将讲解如何使用 div + css 实现自适应宽度按钮。 实现思路 自适应宽度按钮的实现思路主要是： 使用 <div> 元素作为按钮的容…

    css 2023年6月10日
    00

  • 前端jquery部分很精彩

    前端jquery部分很精彩，是因为它为前端开发带来了很多优秀的库和插件，可以快速地实现很多功能，节省了很多时间和精力。同时，jQuery还具有很好的兼容性，能够兼容各种浏览器。在实际项目中，正是由于jQuery的使用，实现了很多复杂的功能。 下面以两个具体的示例来说明： 1. 图片懒加载 图片懒加载是一种优化策略，可以显著提高网站性能。使用jQuery实现图…

    css 2023年6月9日
    00

  • 吃透移动端 1px的具体用法

    吃透移动端 1px 的具体用法 在移动端开发中，经常会遇到 1px 的边框显示问题，因为移动端的屏幕分辨率很高，CSS 的像素一般是对应于物理像素的两倍甚至三倍。这就导致边框在高像素密度设备上可能会变得很细，有时候会留出空隙或虚化。 为了解决这个问题，可以使用下面介绍的几种方法。 方法一：使用 viewport 与 rem 我们可以通过 viewport 和…

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