【MindFusion教程】带有JavaScript事件的交互式日历

翻译|使用教程|编辑:王香|2018-12-06 10:01:54.000|阅读 86 次

概述:在本文中,我们将创建一个类似Google的互动月度日历。

相关链接:

下载MindFusion.WinForms Pack最新版本

在本文中,我们将创建一个类似Google的互动月度日历,用户可以在该日历中实时创建,编辑和删除约会。我们 将使用JavaScript Scheduler。以下是完成的应用程序的屏幕截图:

MindFusion

一 项目设置

我们需要引用以下文件来开始开发:

  • 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();

购买MindFusion正版授权,请点击“咨询在线客服”哟!



标签:JavaScript 图表ActiveX图表控件流程图

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
MindFusion.Diagramming for ActiveX

它能帮助你创建工作流图,流程图和图表处理

MindFusion.Diagramming for WinForms

FlowChart.NET是一款能够帮助你轻松创建流程图和示意图的.NET控件,可以自定义设计样式和图表框颜色。

MindFusion.Diagramming for ASP.NET

ASP.NET下灵活的图表组件

MindFusion.Diagramming for Java

为您图表的自定义以及个性化提供了多种不同选项

MindFusion.Scheduling for WinForms

帮助你管理时间以及重新安排即将到来的预约与事件

MindFusion.Diagramming for WPF

创建任何类型示意图包括流程图、方案图、类层次图、树形图和算法等在内的理想的图形工具。

MindFusion.WinForms Pack

专业的多功能Winforms图表控件套包

MindFusion.WPF Pack

集合了图表控件、日程控件以及报表控件,用于创建所有类型的流程图、方案、图形、表格、图表、日程、调度、商业报表、计量表等

MindFusion ASP.NET Pack

为程序员构建图表、流程图、日程安排、图表等等提供一系列理想的工具集

MindFusion.Silverlight Pack

帮助你快速开发图表、日历、表格和报表

MindFusion.Scheduling Pack

提供一整套完备的功能用于创建日程表、时间、资源表和调度表

MindFusion.Reporting for WinForms

原生的Windows Forms编程组件,可为任何.NET应用程序提供专业的报表功能

MindFusion.Reporting for WPF

智能编程型报表组件,具有强大的可视化和编辑关系数据的功能

MindFusion.Reporting for Silverlight

为你快速创建及定制报表

MindFusion.Scheduling for ASP.NET

为WebForms应用程序提供一个完整的功能集,用于显示日程表、时间表、日程安排、资源视图等

MindFusion.Scheduling for WPF

快速为你的WPF应用程序添加一个完整的日程表和时间管理功能集

MindFusion.Scheduling for Silverlight

具有时尚外观且易于使用的时间管理组件

MindFusion.Charting for WPF

轻松为你的WPF应用程序添加漂亮的仪表板

MindFusion.Charting for WinForms

WinForms应用程序完美的图表解决方案

MindFusion Diagramming Pack

支持iOS、Android等10多个平台的强大图表库

MindFusion.Charting for Silverlight

为您的Silverlight应用程序创建漂亮的图表

MindFusion.Charting for WebForms

适用于任何ASP.NET应用程序的完美图表控件

MindFusion.Charting for Android

用简单易懂的图表呈现您的数据,可以在任何Android设备上运行,让您的应用脱颖而出!

MindFusion.Scheduling for Java

专为智能Java应用程序打造的智能日历

MindFusion.Scheduling for Xamarin

Android和iOS应用程序项目管理功能、风格和性能的完美组合

MindFusion.Scheduling for .NET CF

为使用Microsoft .NET Compact Framework的应用程序设计的计划和时间安排组件

MindFusion.Mapping for WinForms

拥有创建、定制和显示地图的全套功能

MindFusion.Mapping for WPF

快速且容易地为Wpf应用程序添加一个漂亮的地图

MindFusion Pack for Java Swing

MindFusion Pack for Java Swing是一款有效的JAVA工具。

MindFusion Xamarin Pack

MindFusion Xamarin Pack是适用于独立于平台的应用程序的一组独特控件。使用MindFusion专业控件加速您的Xamarin应用程序的开发,为您提供需要数月才能开发的即用型功能。

MindFusion Diagram for UWP

MindFusion Diagram for UWP是一款WINRT的图表库,使您的移动应用程序在Windows shop中脱颖而出,其中包含易于构建和自定义的图表

MindFusion Wpf Gantt Chart

Wpf Gantt Chart.MindFusion包含在MindFusion.Scheduling for WPF里,MindFusion.Scheduling for WPF是一款添加日程表、时间表和资源视图的适用于WPF的调度工具。

MindFusion iOS Diagram

MindFusion iOS Diagram是一个原生的Swift组件,它提供了一个强大的功能集,可以让您呈现任何类型的流程图,组织结构图,类图,层次结构,树和图。

MindFusion Android Diagram

MindFusion Android Diagram可以为任何类型的Android设备构建图表。

MindFusion Wpf Gantt Chart & Gauge

MindFusion Wpf Gantt Chart & Gauge是一款结合了2D和3D图表、仪表和高级实时图表控制的WPF组件。

MindFusion ASP.NET Scheduler

一个非常易于使用和自定义的ASP.NET调度组件。

MindFusion Java Swing Chart

MindFusion Java Swing Chart不仅是可用于渲染图表的普通编程工具,还是可组合排列图表、仪表和UI元素、创建高级数据可视化解决方案的智能组件。

MindFusion ASP.NET Chart

MindFusion ASP.NET Chart包含在MindFusion.Charting for WebForms里,MindFusion.Charting for WebForms是一款适用于任何ASP.NET应用程序的完美图表控件。

MindFusion JavaScript Chart

MindFusion JavaScript Chart结合了2D和3D图表、金融图表、仪表和仪表板,提供了优秀的API 、丰富的事件集、无限数量和类型的数据系列以及在JavaScript和HTML中创建完美数据可视化所需的一切。

MindFusion Xamarin Diagram

MindFusion Xamarin Diagram是一款Xamarin.Forms流程图控件。

MindFusion Wpf Virtual Keyboard

MindFusion Wpf Virtual Keyboard是一款外观和感觉像移动应用程序的WPF应用程序,可提供与触摸屏应用程序相同的可访问性。

MindFusion Xamarin Chart

MindFusion Xamarin Chart是用于仪表板、2D和3D图表的Xamarin Forms组件,有丰富的图表类型集、多个数据选项和样式设置。

MindFusion WinForms Virtual Keyboard

MindFusion WinForms Virtual Keyboard是适用于每个WinForms应用程序的全功能屏幕键盘,内置键盘布局、主题和广泛的API文档。

MindFusion Java Swing Virtual Keyboard

MindFusion Java Swing Virtual Keyboard是用于Java Swing软件的屏幕键盘。

MindFusion Wpf Spreadsheet

MindFusion Wpf Spreadsheet是WPF的电子表格,可在应用程序中实现熟悉的类似Excel的功能。

MindFusion WinForms Spreadsheet

MindFusion WinForms Spreadsheet是MindFusion WinForms电子表格控件,是一个功能强大的.net电子表格组件,具有编辑、样式化和格式化大量数据的强大功能。

MindFusion Java Swing Spreadsheet

MindFusion Java Swing Spreadsheet是适用于Java的电子表格。能快速创建任何类型的电子表格。添加各种图表、数据功能并根据需要设置样式,结果可以导出为不同的格式。

购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat