【MindFusion教程】帶有JavaScript事件的互動式日曆(上)
阿新 • • 發佈:2018-12-06
下載MindFusion.WinForms Pack最新版本
在本文中,我們將建立一個類似Google的互動月度日曆,使用者可以在該日曆中實時建立,編輯和刪除約會。我們 將使用JavaScript Scheduler。以下是完成的應用程式的螢幕截圖:
一 專案設定
我們需要引用以下檔案來開始開發:
MindFusion.Scheduling.js
light.css
JavaScript檔案提供排程功能。CSS檔案負責我們日曆的樣式。我們建立一個名為“themes”的子資料夾,然後將light.css檔案放在那裡。
我們建立了一個HTML檔案,一個名為GoogleSchedule的空白網頁,在head部分我們引用了兩個CSS檔案:
<link href="themes/light.css" rel="stylesheet" /> href="themes/light.css" rel="stylesheet" />
對JavaScript檔案的引用位於頁面底部,就在關閉正文標記之前。
<a href="http://MindFusion.Scheduling.js">http://MindFusion.Scheduling.js</a>
我們需要一個代表日曆的元素,我們在HTML程式碼中建立一個元素併為其分配一個id:
<div id="calendar" style="height: 100%; width: 100%;"></div>
我們希望日曆佔據整個頁面,這就是為什麼寬度和高度都是100%。
二 建立和自定義計劃程式
現在我們已經準備好對日曆庫進行真正的JavaScript程式設計了。我們建立一個名為“GoogleSchedule.js”的空JS檔案,並在網頁的底部新增對它的引用:
<a href="http://GoogleSchedule.js">http://GoogleSchedule.js</a>
在這個JavaScript檔案中,我們首先建立一個到MindFusion.Scheduling名稱空間的對映:
var p = MindFusion.Scheduling;
然後我們使用網頁中的Calendar DOM元素建立一個Calendar例項:
// create a new instance of the calendar var calendar = new p.Calendar(document.getElementById("calendar"));
我們將日曆檢視設定為CalendarView .SingleMonth,這意味著日曆一次顯示一個月。我們還設定了我們在CSS檔案中引用的主題:
calendar.currentView = p.CalendarView.SingleMonth; calendar.theme = "light";
我們進行的另一個自定義 - 我們使用itemSettings.titleFormat屬性在每個事件主題之前新增字首。字首是此事件的開始時間。這是你如何設定它:
calendar.itemSettings.titleFormat = "%s[hh:mm tt] %h";
最後,我們渲染日曆:
//visualize the calendar calendar.render();