下載Mindfusion最新版本

IV.資源

當(dāng)日歷最初加載時(shí)，有幾個(gè)聯(lián)系人和位置可用。表示它們的對(duì)象是Contact和Location類的實(shí)例。創(chuàng)建它們之后，我們將它們添加到日歷計(jì)劃的聯(lián)系人和位置集合中。

var resource;

// Add professor names to the schedule.contacts collection.
resource = new p.Contact();
resource.firstName = "Prof. William";
resource.lastName = "Dyer";
calendar.schedule.contacts.add(resource);

resource = new p.Location();
resource.name = "Room D";
calendar.schedule.locations.add(resource);

現(xiàn)在，當(dāng)用戶創(chuàng)建新課程時(shí)，他們將在“Create Item/創(chuàng)建項(xiàng)目”表單的“Options/選項(xiàng)”窗格中看到“Contact and Location/聯(lián)系人和位置 ”：

V. 項(xiàng)目

這些項(xiàng)是Item類的實(shí)例。他們代表不同講師的班級(jí)。我們使用Item的startTime和endTime屬性來(lái)指定類何時(shí)發(fā)生。該主題屬性賦予類的名稱：

//always start with the current date
var date = p.DateTime.today();

item = new p.Item();
item.startTime = p.DateTime.addHours(date.addDays(1), 14);
item.endTime = p.DateTime.addHours(item.startTime, 1);
item.subject = "Classical Mechanics";.subject = "Classical Mechanics";

我們使用位置和聯(lián)系人屬性來(lái)設(shè)置講座的位置以及講授者。請(qǐng)注意，contacts屬性屬于集合類型，我們可以將多個(gè)講師分配給一個(gè)類：

item.location = calendar.schedule.locations.items()[0];.location = calendar.schedule.locations.items()[0];
item.contacts.add(calendar.schedule.contacts.items()[0]);.contacts.add(calendar.schedule.contacts.items()[0]);

我們從日程表的列表中獲取位置和聯(lián)系人的位置和聯(lián)系人我們還必須設(shè)置項(xiàng)目的詳細(xì)信息 - 如果您記得的話，它們將呈現(xiàn)為工具提示。我們希望工具提示顯示講師的兩個(gè)名字和位置。以下是我們必須如何定義它：

item.details = item.contacts.items()[0].firstName + " " +.details = item.contacts.items()[0].firstName + " " +
item.contacts.items()[0].lastName + " - " + item.location.name;.contacts.items()[0].lastName + " - " + item.location.name;

我們必須將添加項(xiàng)目到項(xiàng)目的集合計(jì)劃，我們呈現(xiàn)的日歷使日歷

calendar.render();
.render();

VI.事件

當(dāng)用戶創(chuàng)建新項(xiàng)目時(shí)，我們必須設(shè)置其詳細(xì)信息以告知新類的名稱和位置。我們處理itemCreating事件來(lái)執(zhí)行此操作：

// attach handler - creating an item
calendar.itemCreating.addEventListener(handleItemCreating); .itemCreating.addEventListener(handleItemCreating); 

function handleItemCreating(sender, args) {function handleItemCreating(sender, args) {
    handleItemModified(sender, args);(sender, args);
    if (args.item.contacts.count() > 0) {if (args.item.contacts.count() > 0) {
        //the details field is used by the tooltip//the details field is used by the tooltip
        args.item.details = args.item.contacts.items()[0].firstName + " " +.item.details = args.item.contacts.items()[0].firstName + " " +
                args.item.contacts.items()[0].lastName;.item.contacts.items()[0].lastName;

        if (args.item.location != null)if (args.item.location != null)
            args.item.details += " - " + args.item.location.name;.item.details += " - " + args.item.location.name;
    }}

}}

所述itemCreating事件提供的實(shí)例ItemModifyingEventArgs類作為第二個(gè)參數(shù)處理程序方法。我們使用item屬性告訴我們正在修改哪個(gè)項(xiàng)目。然后，我們從項(xiàng)目的聯(lián)系人和位置屬性中獲取所需的聯(lián)系人和位置信息。

當(dāng)新課程項(xiàng)目被拖動(dòng)到另一個(gè)位置時(shí)，我們必須相應(yīng)地更改其顏色。我們通過(guò)處理itemModified事件來(lái)完成此操作。

// attach handler - modifying an item
calendar.itemModified.addEventListener(handleItemModified);.itemModified.addEventListener(handleItemModified);

項(xiàng)目的不同背景顏色是通過(guò)自定義CSS類實(shí)現(xiàn)的。我們使用Item類的cssClass屬性。CSS樣式在網(wǎng)頁(yè)的< HEAD >部分中定義：

.mfp-planner.standard .itemClass1 .mfp-item {.mfp-planner.standard .itemClass1 .mfp-item {
            background-color: 	#0c71af;-color: 	#0c71af;
        }}

.mfp-planner.standard .itemClass2 .mfp-item {.mfp-planner.standard .itemClass2 .mfp-item {
            background-color: #f81e1e;-color: #f81e1e;
        }}
......................

處理程序方法檢查新位置并分配適當(dāng)?shù)腃SS樣式：

function handleItemModified(sender, args) handleItemModified(sender, args)
{{
    // you don't have to check any other conditions like dragging to another room, // you don't have to check any other conditions like dragging to another room, 
    // as it will stay the same color if you make other changes (other than dragging to a different room)// as it will stay the same color if you make other changes (other than dragging to a different room)
    if (args.item != null){if (args.item != null){
        switch (args.item.location.name) {switch (args.item.location.name) {
            case "Room A":  //we can also implement it with forcase "Room A":  //we can also implement it with for
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
                console.log("a");.log("a");
                break;break;
            case "Room B":case "Room B":
                args.item.cssClass = 'itemClass2';.item.cssClass = 'itemClass2';
                break;break;
            case "Room C":case "Room C":
                args.item.cssClass = 'itemClass3';.item.cssClass = 'itemClass3';
                break;break;
            case "Room D":case "Room D":
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
                break;break;
            case "Room E":case "Room E":
                args.item.cssClass = 'itemClass2';.item.cssClass = 'itemClass2';
                break;break;
            case "Room F":case "Room F":
                args.item.cssClass = 'itemClass3';.item.cssClass = 'itemClass3';
                break;break;
            default:default:
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
        }}
    }}
}}

handler方法的args參數(shù)的item屬性提供對(duì)已修改項(xiàng)的訪問(wèn)。

VII.過(guò)濾Professors

我們想在我們的應(yīng)用程序中添加最后一個(gè)功能。我們希望用戶只能由給定的教授渲染課程。

我們首先添加帶有講師姓名的復(fù)選框。每個(gè)復(fù)選框都具有與click事件相同的處理程序方法：

<input id="dyer" checked="checked" name="subscribe" type="checkbox" value="Dyer> id="dyer" checked="checked" name="subscribe" type="checkbox" value="Dyer>
<label for=">Prof. William Dyer<label for=">Prof. William Dyer

<input id="fletcher" checked="checked" name="subscribe" type="checkbox" value="Fletcher"><input id="fletcher" checked="checked" name="subscribe" type="checkbox" value="Fletcher">
<label for="fletcher">Prof. Ann Fletcher</label><label for="fletcher">Prof. Ann Fletcher</label>
...........................

處理程序方法需要查看兩種情況。第一種情況是由一位教授講授課程。在這種情況下，我們循環(huán)瀏覽所有項(xiàng)目并使項(xiàng)目可見(jiàn)或不顯示，具體取決于是否選中了具有教授姓名的復(fù)選框：

// if there is at least one present professor from the lecture professors, the lecture will not disappear
function handleClick(cb) {function handleClick(cb) {
for (var i = 0; i < calendar.schedule.items.count(); i++) {for (var i = 0; i < calendar.schedule.items.count(); i++) {
        var item = calendar.schedule.items.items()[i]; //we iterate through every elementvar item = calendar.schedule.items.items()[i]; //we iterate through every element
        if (item.contacts.count() == 1) {if (item.contacts.count() == 1) {
            if (item.contacts.items()[0].lastName == cb.value)if (item.contacts.items()[0].lastName == cb.value)
                item.visible = cb.checked;.visible = cb.checked;
        }}
      }}
..............................................
}}

在第二種情況下，我們會(huì)查看由多位講師講授的課程。在這種情況下，如果選中了至少有一位講師姓名的復(fù)選框，我們會(huì)顯示該項(xiàng)目：

else if (item.contacts.count() > 1) { if (item.contacts.count() > 1) {
for (var j = 0; j < item.contacts.count() ; j++) {for (var j = 0; j < item.contacts.count() ; j++) {
                if (item.contacts.items()[j].lastName == cb.value) { // the checked/unchecked professor is in the contacts of this itemif (item.contacts.items()[j].lastName == cb.value) { // the checked/unchecked professor is in the contacts of this item
                    if (cb.checked == true) item.visible = true; // if there is a check, the item must be visibleif (cb.checked == true) item.visible = true; // if there is a check, the item must be visible
                    else { // if there is no check, we see if there is at least one professor in the list of contacts of the itemelse { // if there is no check, we see if there is at least one professor in the list of contacts of the item
                        item.visible = professorPresent(item);.visible = professorPresent(item);
                    }}

                }}
            }}
        }}

最后我們重新繪制日歷：

// repaint the calendar
this.calendar.repaint(true);this.calendar.repaint(true);

在這里，professorPresent方法檢查是否至少選中了一個(gè)帶有教授的復(fù)選框，這些復(fù)選框在我們作為參數(shù)提供的項(xiàng)目中作為講師出現(xiàn)：

// return true if even 1 professor from the item's contacts is present, false otherwise
function professorPresent(item) {function professorPresent(item) {
    console.log(item.contacts.count());.log(item.contacts.count());
    for (var j = 0; j < item.contacts.count() ; j++) {for (var j = 0; j < item.contacts.count() ; j++) {
        var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();
        var checkBox = document.getElementById(checkBoxId);var checkBox = document.getElementById(checkBoxId);
        if (checkBox!= null && checkBox.checked == true) {if (checkBox!= null && checkBox.checked == true) {
            return true;return true;
        }}
    }}
    return false;return false;
}}

購(gòu)買Mindfusion正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！