文描述了如何創建日程表的主要步驟，該表顯示了大學房間分配到不同課程。用戶可以通過講師過濾課程。

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》