文描述了如何创建日程表的主要步骤，该表显示了大学房间分配到不同课程。用户可以通过讲师过滤课程。

I.初始设置

我们首先复制我们将在项目目录中使用的JavaScript调度程序文件。这些是：

• MindFusion.Scheduling.js - 表示Js Scheduler库
• MindFusion.Scheduling-vsdoc.js - 提供Intellisense支持
• standard.css - 在子目录“themes”中，这是资源表的CSS主题样式
• planner_lic.txt - 将您的许可证密钥粘贴到此处以禁用试用版本标签。

我们专门为我们的应用创建了2个文件：

• ResourceView.html - 应用程序的网页
• ResourceView.js - 实现应用程序动态功能的JavaScript代码。

II.HTML页面

在我们网页的head部分，我们首先创建一个对主题文件的引用：

在网页的最后，只需关闭结束标记，我们添加对Scheduling.js文件的引用，该文件包含我们将为应用程序编写的调度功能和ResourceView.js文件：

<script src=“MindFusion.Scheduling.js” type=“text / javascript” > </ script> <script src=“ResourceView.js” type=“text / javascript” > </ script> 
 

日历库需要HTML

元素，用于呈现它。我们添加一个：

<div id=“calendar” style=“ height ：100 ％; width ：100 ％; ” > </ div> 

为此< div >添加一个id非常重要，因为我们需要在JS代码后面的文件中引用它。

III.基本的JavaScript设置

在JavaScript代码隐藏文件的顶部，我们添加了对Intellisense文件的引用。我们还创建了一个MindFusion.Scheduling命名空间的映射：

/// <reference path="MindFusion.Scheduling-vsdoc.js"></reference>
var p=MindFusion.Scheduling

然后我们创建日历对象。我们需要对将呈现它的< div>元素的引用：

// create a new instance of the calendar
calendar=new p.Calendar(document.getElementById("calendar"));

对于此示例中，我们将使用的ResourceView的currentView属性指定。此外，我们将日历中的可见单元格数设置为7.这是通过日历的resourceViewSettings属性来完成的。

// set the view to ResourceView, which displays the distribution of resources over a period of time:
<pre>calendar.currentView=p.CalendarView.ResourceView;
// set the number of visible cells to 7
calendar.resourceViewSettings.visibleCells=7; 

该itemSettings广告载体让我们定制的项目进度我们使用titleFormat和tooltipFormat指定了每个项目的标题和工具提示将呈现。两个属性都使用特殊格式字符串

• ％s - 将呈现开始日期
• ％e - 将呈现项目的结束日期
• ％d - 将呈现项目的详细信息。

您可以通过在括号中添加所需格式来指定日期和时间的格式：

// show hours on items
calendar.itemSettings.titleFormat="%s[HH:mm] - %e[HH:mm] %h";
calendar.itemSettings.tooltipFormat="%d";

然后我们将日历的主题设置为标准，我们在网页中引用了它的css文件：

calendar.theme="standard";

我们再做一次调整 - 联系人的姓名将取自该人的姓氏。可能的值是“F”，“M”和“L” - 用于名字，中间名和姓氏。

calendar.contactNameFormat="L";

点击“了解更多”下载产品最新版

↓↓↓

言

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

效果

思路

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

开始写代码

• 计算本月天数

 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》