MindFusion.Diagramming for WinForms使用教程：在JavaScript Scheduler中设置时间表视图的样式

在此博客文章中，我们将基于我们收到的有关Java Script的MindFusion Scheduler库的问题，来研究开发人员希望做出的时间表上最常见的调整。

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 datevar 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 AMcalendar.timetableSettings.  = 600;// set the end time to 16:00 PMcalendar.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;}

为单元设置样式的类称为mfo-cell-wrap。此类可调节所有单元格的样式，因此我们只需要在我们感兴趣的单元格上应用红色边框，它们是第1、4、9等单元格。我们希望其余单元格为黄色。这是通过CSS“ not”关键字完成的：

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

这会将时间表的行涂成红色/黄色，但不会使时间刻度之间的分界线着色。它们由另一个CSS类管理，并且是div元素：

.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;}

请注意，CSS样式名称带有后缀“ gray”。这是主题的名称。在许多情况下，需要更改的类绑定到某个主题。

我们要添加为样式的最后一件事是周末的背景。我们再次使用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);}

我们还要注意一件事。创建约会时，主题文本不可见，因为行高对于项目样式而言太小。我们有两个选择：或者增加单元格的高度（设置为cellSize并设置为20），或者对该项进行样式设置，以使主题可见。我们选择后者。我们将减小尺寸调整线，因为这是隐藏主题的地方：较大的尺寸调整线：

.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;}

这是最终结果：

想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】

标签：