MindFusion.Diagramming for WinForms是一個能幫助你創建工作流和進程圖表的.NET控件；數據庫實體關系圖表；組織圖表；對象層次和關系圖表；圖表和樹。它是基于對象－圖表框，表格和箭頭類型，將其歸類分派給其他并結合成復雜的結構。該控件提供超過預先定義的50多種圖表框，如自定義設計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現已加入在線訂購，現在搶購立享優惠，查看詳情>>

點擊下載MindFusion.Diagramming for WinForms最新試用版

在此博客文章中，我們將基于我們收到的有關Java Script的MindFusion Scheduler庫的問題，來研究開發人員希望做出的時間表上最常見的調整。

這是時間表的結尾：

一，外觀

調度庫的整體外觀由主題控制。MindFusion Scheduler帶有9個預定義主題的集合。為了應用主題，您需要：

• 在要顯示日歷的網頁中添加對CSS文件的引用：

• 將主題名稱分配給Calendar類的theme屬性：

calendar.theme = "gray";

主題可以顯著改變控件的配色方案，包括用于創建項目的形式。我們建議您選擇與想要查看的顏色最相關的主題，并在必要時對其進行自定義。

每個主題都在一個CSS文件中，您可以按顏色代碼進行搜索，并用另一種顏色替換給定顏色的出現以微調配色方案。

二。時間表設定

最初，時間表只顯示一天-今天。該timetableSettings財產，就像由支持的所有意見*設置的屬性日歷（-SingleMonth，RespurceView， MonthRange等）暴露，讓你自定義日歷的外觀特性。

在使用timetableView的情況下，呈現的列數取決于添加到timetableSettings屬性的日期中的日期數。在本例中，我們要顯示星期，因此我們添加7個日期：

//get the current date
var currDay = schedule.DateTime.today();
calendar.timetableSettings.dates.clear();

for (var i = 1; i < 8; i++) { calendar.timetableSettings.dates.add(currDay.addDays(-1 * currDay.dayOfWeek + i)); } }

我們還想每周滾動。默認情況下，時間表滾動一天。為了滾動更多，您需要將scrollStep屬性設置為更大的數字：

calendar.timetableSettings.scrollStep = 7;

我們需要做的下一件事是更改時間范圍。我們希望刻度為每20分鐘一次，并且希望覆蓋從10點到16點的時間間隔。這些由時間表設置的startTime和endTime字段進行調節。這些屬性將分鐘數作為參數。因此，如果希望一天從8點開始，則開始時間必須為8×60 = 480分鐘，或者需要將480作為值分配給startTime屬性。

// set the start time to 10:00 AM
calendar.timetableSettings.  = 600;
// set the end time to 16:00 PM
calendar.timetableSettings.endTime = 1020;

我們要指定的是標題的格式。默認格式基于運行應用程序的用戶的區域設置。在我們的應用程序中，時間表標題中的日期顯示為DD / MM / YYYY。我們將使用titleFormat屬性。我們還使用cellTime來更改每兩個小時之間的時間標度。默認值為30分鐘。我們使用cellTime屬性將其更改為20 。

calendar.timetableSettings.titleFormat = "d MMMM dddd";
calendar.timetableSettings.cellTime = schedule.TimeSpan.fromMinutes(20);
calendar.timetableSettings.cellSize = 20;

我們還增加了單元格的大小，這是每20分鐘間隔定義的行的高度。日歷還僅顯示一個標題-帶有日期的標題。我們要渲染days標頭，該標頭顯示星期幾。該屬性是showDayHeader

calendar.timetableSettings.showDayHeader = true;

三，CSS樣式

我們已經通過Calendar控件的屬性和字段盡最大可能自定義了時間表。我們想添加一些其他樣式，可以通過css完成。我們使用瀏覽器的樣式檢查器來識別應用于我們感興趣的元素的樣式。我們想用黃色顯示分隔20分鐘單元格的行，用紅色顯示分隔小時的行。讓我們從小時線開始。將它們呈現為紅色的css是這樣的：

.mfp-timetable-view .mfp-content .mfp-column .mfp-cell-wrap:nth-child(3n+1) .mfp-cell { 
			border-top: 1px solid red; 
}

.mfp-timetable-view .mfp-content .mfp-column .mfp-cell-wrap:not(:nth-child(3n+1)) .mfp-cell {  
			border-top: 1px solid yellow; 
	}

.mfp-timetable-view.gray .mfp-header-timeline .mfp-group-time div:not(:first-child)
	{

		border-top: solid 1px yellow;
	}
		
	.mfp-timetable-view.gray .mfp-header-timeline .mfp-hour
	{
		border-top: solid 1px red;
	}

我們要添加為樣式的最后一件事是周末的背景。我們再次使用nth-child CSS屬性。這次，“孩子”是第六和第七元素，因此我們為它們定義樣式：

.mfp-timetable-view .mfp-content .mfp-column:nth-child(5n + 6), .mfp-column:nth-child(5n + 7) {
			background-color: rgba(145, 179, 188, 0.4);
		}

.mfp-item-vertical-detail .mfp-subject {
	flex-shrink: 0 !important;
}

.mfp-item-vertical-detail .mfp-resize-start,
.mfp-item-vertical-detail .mfp-resize-end {
	flex-shrink: 1 !important;
}