「MindFusion教程」JavaScript中的

「MindFusion教程」JavaScript中的交互式事件時(shí)間表（上）

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

I.初始設(shè)置

我們首先復(fù)制我們將在項(xiàng)目目錄中使用的JavaScript調(diào)度程序文件。這些是：

MindFusion.Scheduling.js - 表示Js Scheduler庫
MindFusion.Scheduling-vsdoc.js - 提供Intellisense支持
standard.css - 在子目錄“themes”中，這是資源表的CSS主題樣式
planner_lic.txt - 將您的許可證密鑰粘貼到此處以禁用試用版本標(biāo)簽。

我們專門為我們的應(yīng)用創(chuàng)建了2個(gè)文件：

ResourceView.html - 應(yīng)用程序的網(wǎng)頁
ResourceView.js - 實(shí)現(xiàn)應(yīng)用程序動(dòng)態(tài)功能的JavaScript代碼。

II.HTML頁面

在我們網(wǎng)頁的head部分，我們首先創(chuàng)建一個(gè)對(duì)主題文件的引用：

在網(wǎng)頁的最后，只需關(guān)閉結(jié)束標(biāo)記，我們添加對(duì)Scheduling.js文件的引用，該文件包含我們將為應(yīng)用程序編寫的調(diào)度功能和ResourceView.js文件：

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

日歷庫需要HTML

元素，用于呈現(xiàn)它。我們添加一個(gè)：

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

為此< div >添加一個(gè)id非常重要，因?yàn)槲覀冃枰贘S代碼后面的文件中引用它。

III.基本的JavaScript設(shè)置

在JavaScript代碼隱藏文件的頂部，我們添加了對(duì)Intellisense文件的引用。我們還創(chuàng)建了一個(gè)MindFusion.Scheduling命名空間的映射：

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

然后我們創(chuàng)建日歷對(duì)象。我們需要對(duì)將呈現(xiàn)它的< div>元素的引用：

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

對(duì)于此示例中，我們將使用的ResourceView的currentView屬性指定。此外，我們將日歷中的可見單元格數(shù)設(shè)置為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廣告載體讓我們定制的項(xiàng)目進(jìn)度我們使用titleFormat和tooltipFormat指定了每個(gè)項(xiàng)目的標(biāo)題和工具提示將呈現(xiàn)。兩個(gè)屬性都使用特殊格式字符串

％s - 將呈現(xiàn)開始日期
％e - 將呈現(xiàn)項(xiàng)目的結(jié)束日期
％d - 將呈現(xiàn)項(xiàng)目的詳細(xì)信息。

您可以通過在括號(hào)中添加所需格式來指定日期和時(shí)間的格式：

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

然后我們將日歷的主題設(shè)置為標(biāo)準(zhǔn)，我們?cè)诰W(wǎng)頁中引用了它的css文件：

calendar.theme="standard";

我們?cè)僮鲆淮握{(diào)整 - 聯(lián)系人的姓名將取自該人的姓氏。可能的值是“F”，“M”和“L” - 用于名字，中間名和姓氏。

calendar.contactNameFormat="L";

點(diǎn)擊“了解更多”下載產(chǎn)品最新版

↓↓↓

言

作為一名前端開發(fā)人員，設(shè)計(jì)師給的UI要實(shí)現(xiàn)日歷，找了找開源的項(xiàng)目，發(fā)現(xiàn)不是樣式不符合就是交互不符合，改源碼看不懂？頭都大，今天就教教大家用200行不到的代碼實(shí)現(xiàn)精美日歷(h5+微信小程序都適用)

效果

思路

以window10系統(tǒng)的日歷為例，我們可以看出，一個(gè)月份的日歷組成總共為7列6行，日期有三個(gè)部分組成，1為上月由于該月第一天的周幾產(chǎn)生的空白部分，2為本月的所有天數(shù)，3，為6x7-(上月空白部分 + 本月天數(shù))

win10日歷

開始寫代碼

計(jì)算本月天數(shù)

 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）中的參數(shù)d為該月的任意一天，方法放回該月有效的所有天數(shù)

計(jì)算該月第一天是星期幾

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

計(jì)算該月+前后留白天數(shù)

 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))
 }

獲取天數(shù)用于圖層渲染(計(jì)算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>

為了保證渲染不出現(xiàn)胡亂，必須保證.c-day節(jié)點(diǎn)下的.d-item為7x6的分布狀態(tài)

結(jié)語

今天教大家如何自己實(shí)現(xiàn)日歷就完成了，覺得不錯(cuò)就點(diǎn)幾下關(guān)注和分享唄

《原文發(fā)表于本人博客kyeteo.cn》

近有做日歷的需求，找了很久，分享一款優(yōu)秀的日歷組件。

關(guān)于 Mpvue Calendar

Mpvue Calendar 是一款簡(jiǎn)單實(shí)用，功能強(qiáng)大的 Vue 日歷組件，適合用在日期選擇、日期范圍選取以及日歷展示場(chǎng)景，使用非常簡(jiǎn)單，是一款非常值得收藏使用的優(yōu)秀 Vue 組件。

支持中國農(nóng)歷

Mpvue Calendar 的特性

基于TypeScript 和 Vue 3.0+，開箱即用，體驗(yàn)流暢
界面簡(jiǎn)潔優(yōu)雅，操作簡(jiǎn)單，用戶體驗(yàn)符合常規(guī)日歷組件
支持中文界面，也支持中國農(nóng)歷
支持 web PC 端和移動(dòng)端，適配了手勢(shì)滑動(dòng)操作

上手體驗(yàn)

日期和日歷在很對(duì)產(chǎn)品上都有需求，眾所周知，原生 javascript 中的關(guān)于時(shí)間和日期的語法復(fù)雜難記，手寫一個(gè)本地化的日歷，需要考慮較全面。

而 Mpvue Calendar 是一款使用非常簡(jiǎn)單的開源日歷組件，目前只提供 Vue 3.0+ 版本，只提供 npm 安裝的方式使用，滿足了產(chǎn)品對(duì)日期選擇、日期范圍選取以及日歷展示等需求，實(shí)現(xiàn)了對(duì)日歷的需求的絕大多數(shù)功能。官網(wǎng)上有充足的例子，上手沒有難度，新手也可以很快上手使用。

周視圖

當(dāng)然了，這個(gè)組件是開源的，源碼代碼量也不多，完全可以二次開發(fā)修改成自己想要的樣子，也非常適合作為學(xué)習(xí) Vue 3.x 的項(xiàng)目，收下吧。

免費(fèi)開源說明

Mpvue Calendar 是一個(gè)免費(fèi)使用，開源的前端組件項(xiàng)目，基于 MIT 開源協(xié)議在 Github 上開源，各位可以直接下載源碼使用，也可以根據(jù) api 文檔通過 npm 安裝使用。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。

在線咨詢

上一篇：使用CefSharp和Javascript實(shí)現(xiàn)網(wǎng)絡(luò)爬
下一篇：css基礎(chǔ)篇10-文本樣式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商