CCS小技巧，如何使用CSS Grid制作简单的日历，简单有趣

历是人类文明的重要工具之一。然后可以记住许多重要事件，并从事件的确切日期追溯到真相。

在本文中，我们将学习如何利用CSS Grid系统（最近在前端开发人员中流行的一种布局技术）来使用HTML和CSS设计日历。以下是日历的最终设计效果：

制作HTML

从图片中我们可以看出日历包含三个部分：月指标；工作日/周末指标；日期本身。

编写HTML的最佳方法是遵循正确的感觉。现在，我们将根据以下三个部分创建HTML：

我们还应该能够看到日历上网格的七个列的需求。

我们将重点放在上面的代码.day-of-week和.date-grid上面的代码上，因为现在我们只在谈论网格。

网格排列

有两种创建CSS Box的方法。第一种方法是在内部组合元素.day-of-week并.date-grid 成为一个选择器。如果要这样做，我们可以安排display: grid。如果执行此操作，HTML将是什么样的：

我们应该避免这种方法，因为HTML失去了它的结构意义，因为它结合起来，让我们尝试保存.day-of-week并date-grid 作为一个独立的元素，如果可能的。因为这使得我们更容易阅读/理解已经写入的代码。这是最好的HTML结构：

创建具有简单结构的CSS网格的最佳方法是使用子网格。但是，大多数浏览器尚不支持子网格。同时，最好的办法就是让两个独立的电网，一个是.day-of-week和一个.date-grid。因此，它可以解释.day-of-week并.date-grid可以使用相同的七个柱网。

实际日期调整

2019年2月从星期五开始。如果我们希望日历正确无误，则需要确保：2019年2月1日为星期五；2019年2月2日为星期六；2019年2月3日是星期日等等...

使用CSS Grid，可以简化这一部分。

CSS Grid的放置算法在某种程度上遵循以下规则（如果我们未将其设置grid-auto-flow为dense）：放置具有显式grid-column或grid-row第一位的项目；根据最后放置的项目填写其余部分

这表示：如果第一项属于第6列；第二项将放置在第7列中。；第三项将放置在第一行的下一行中（因为只有七列）；第四项将放置在第2列中等等...

因此，如果我们将2月1日放置在第六列（星期五），则其余日期将正确放置。像这样的简单逻辑...

以下是整个使用的代码：源代码HTML

avaScript实现的日历效果，如下图所示：

JavaScript实现的日历效果图

可以尝试在多个浏览器中，测试运行网页的效果，我这里在如下几个浏览器运行，如下图所示：

实现代码如下：

<!doctype html>

<head>

<title>Document</title>

<style type="text/css">

/*日历标题样式 */

#divTitle

{

width:400px;

height:30px;

font-size:20px;

color:#0000ff;

text-align:center;

}

/*日历表格布局样式 */

#divDate

{

width:400px;

height:320px;

border:4px solid gray;

background-color:#ddd;

padding-top:4px;

font-size:20px;

}

/*日历文字样式 */

.tableStyle

{

width:400px;

height:300px;

text-align:center;

color:blue;

}

</style>

<script type="text/javascript">

var weekDays = new Array("日","一","二","三","四","五","六");//星期

var days = new Array("31","28","31","30","31","30","31","31","30","31","30","31");//天

var months = new Array("1","2","3","4","5","6","7","8","9","10","11","12");//月

document.write("<div id='divTitle'>我的日历</div>");

var now = new Date();

var month = now.getMonth();//获得月份

var day = now.getDate();//获得日期

var f = 1;

now.setDate(1);

var first = now.getDay();

var str = new String();

//在<div>中创建<table>标签显示日历

document.write("<div id='divDate'>");

document.write("<table class='tableStyle'>");

document.write("<tr>");

//输出周日到周六

for(var t in weekDays)

{

document.write("<th style='height:25px'>"+weekDays[t] + "</th>");

}

document.write("</tr>");

var rows = (parseInt(days[month]) + parseInt(first) + 7 ) / 7;

//输出日历表格的行和列

for (var i= 0 ; i < parseInt(rows) ; i++ )//日历表格的行

{

document.write("<tr>");

for (var j= 0 ; j < 7 ; j++ )//日历表格的列

{

document.write("<td id="+f+">");

if (i == 0 && j < first)

{

document.write("");

}

else

{

if (f == day)

{

document.getElementById(f).style.background = "red";//以红色背景显示"今天"

}

if (f > days[month])

f = days[month];

else

document.write(f);

f++;

}

document.write("</td>");

}

document.write("</tr>");

}

document.write("</table></div>");

</script>

</head>

<body>

</body>

</html>

这就是用JavaScript实现的日历效果，请大家动起手来试试吧，展示你的实现效果。

言

作为一名前端开发人员，设计师给的UI要实现日历，找了找开源的项目，发现不是样式不符合就是交互不符合，改源码看不懂？头都大，今天就教教大家用200行不到的代码实现精美日历(h5+微信小程序都适用)

效果

思路

以window10系统的日历为例，我们可以看出，一个月份的日历组成总共为7列6行，日期有三个部分组成，1为上月由于该月第一天的周几产生的空白部分，2为本月的所有天数，3，为6x7-(上月空白部分 + 本月天数)

win10日历

开始写代码

计算本月天数

 getDates (d, t = 0) {
 var curDate = new Date(d.replace(/-/g, '/'))
 var curMonth = curDate.getMonth()
 curDate.setMonth(curMonth + t + 1)
 curDate.setDate(0)
 var curDates = new Array(curDate.getDate()).fill(0).map((item, key) => {
 return key + 1
 })
 return curDates
 }

getDates（d）中的参数d为该月的任意一天，方法放回该月有效的所有天数

计算该月第一天是星期几

 getWeek (d) {
 var curDate = new Date(d.replace(/-/g, '/'))
 curDate.setDate(1)
 return curDate.getDay()
 }

计算该月+前后留白天数

 getFullChunkDates (d) {
 var curDates = this.getDates(d)
 var preDates = this.getDates(d, -1)
 var nexDates = this.getDates(d, 1)
 var curWeek = this.getWeek(d)
 curDates = curDates.map((i, k) => {
 return {
 num: i,
 fullDate: /(^\d{4})-(\d{1,2})-/.exec(d)[0] + i,
 show: 1
 }
 })
 preDates = preDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 nexDates = nexDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 var preCurDates = preDates.slice(preDates.length - (curWeek === 0 ? 6 : curWeek - 1), preDates.length).concat(curDates)
 return preCurDates.concat(nexDates.slice(0, 42 - preCurDates.length))
 }

获取天数用于图层渲染(计算2019-10-16所在月份的日历)

#js--------------------
data () {
 return {
 days: []
 }
}
created () {
 this.days = this.getFullChunkDates('2019-10-16')
}
#html--------------------
<view class="c-day">
 <view class="d-item"
 :key="key" v-for="(item, key) in days">
 <text>{{item.num}}</text>
 </view>
</view>

为了保证渲染不出现胡乱，必须保证.c-day节点下的.d-item为7x6的分布状态

结语

今天教大家如何自己实现日历就完成了，觉得不错就点几下关注和分享呗

《原文发表于本人博客kyeteo.cn》

在线咨询

上一篇：WordPress评论弹幕，让你的博客变得好玩儿
下一篇：网页模版设计布局的使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CCS小技巧，如何使用CSS Grid制作简单的日历，简单有趣

制作HTML

网格排列

实际日期调整

以下是整个使用的代码：源代码HTML

言

效果

思路

开始写代码

结语

您的项目需求