整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
历是人类文明的重要工具之一。然后可以记住许多重要事件，并从事件的确切日期追溯到真相。
在本文中，我们将学习如何利用CSS Grid系统（最近在前端开发人员中流行的一种布局技术）来使用HTML和CSS设计日历。以下是日历的最终设计效果：
从图片中我们可以看出日历包含三个部分：月指标；工作日/周末指标；日期本身。
编写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日放置在第六列（星期五），则其余日期将正确放置。像这样的简单逻辑...
今每个人的事情都变的越来越多了，没有一个好的提醒工具，你会不会错过很多，比如：交房贷、追剧、看球等等，我们知道手机上的日历，时钟，都能提醒我们，可是作为程序员的我们，是不是也该尝试一下，弄一个日历处理？
首先明确，我们需要什么功能：通过日历来展示我们的待办事项？
如果从头写，是不是有点费时？这里，我们推荐一个jQuery插件：FullCalendar
我们先目的一下它的风采吧。
首先，FullCalendar最大的特点是，可以全日历上拖放的，比如：我5月19号添加的备忘，可以拖放到5月31号上。添加的备忘事件还可以跨好几天来拖放，真的很方便。
那么FullCalendar是什么？
严格的说，它是一个开源的，并可定制的JavaScript事件日历，支持全尺寸拖放。
这里有个比较重要的声明：它是一个很好的活动展示库，不是一个完整的事件管理解决方案，就是说不能修改活动事件的名称。你需要通过它的JS函数和配置等来设置。
那么如何获取它？
你可以通过github来搜索FullCalendar，它也有官网可以查看各种示例（当然也包括Google日历的Style）
那么它的兼容性如何？
它支持Firefox、Chrome、Safari、IE9+等所有现代浏览器。它依赖于jQuery 2.0.0+、Moment 2.9.0+（这是一个对日历和时间进行解析、验证、操作、显示的js库）
那么如何使用它呢？
通过上图的Head部分引用，Script，Html，就可以完成一个日历的展示了。
至此，这个开源的日历库就介绍完了，如果工作中有需要，它是个不错的选择。看文章累了吗？来张图片养养眼？（图片来源网络，如有侵权请告知。）
图片来自网络，如有侵权请告知，我们会尽快删除。谢谢。
果图：
方案描述：
开发工具：Hbuilder X（html + javasc）
代码（html文件）：
*请认真填写需求信息，我们会在24小时内与您取得联系。
