彩票走势图

MindFusion:在JavaScript Scheduler中自定义表格标题的两种方法

翻译|使用教程|编辑:何跃|2021-09-27 14:21:56.073|阅读 140 次

概述:在这篇博文中,我们将向你展示如何在MindFusion Scheduler for JavaScript中定制表格上出现的标题。你可以使用同样的技术来改变日历的用户界面上出现的任何字符串或格式。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在这篇博文中,我们将向你展示如何在MindFusion Scheduler for JavaScript中定制表格上出现的标题。你可以使用同样的技术来改变日历的用户界面上出现的任何字符串或格式。我们将通过本地化文件做到这一点。下面是最终应用程序的截图。

当你下载试用版的JavaScript scheduler或JavaScript包时,你会看到一个名为 "本地化 "的文件夹。那里有JSON和JS文件,代表日历用户界面的标题和格式化字符串。它们都可以用来定制日历。

I. 使用 JavaScript 本地化文件

JavaScript本地化文件定义了一个对象,它代表本地化信息。你应该在其中编辑你想要改变的字符串。下面是我们如何编辑英语本地化文件的,它被称为en.js(中文对应zh.js)。

"strings": {
   "newFormHeader": "New Class",
   "editFormHeader": "Edit Class",
   "newRecurrenceFormHeader": "New Recurrence",
   "editRecurrenceFormHeader": "Edit Recurrence",
   "cueFormHeader": "Cue items",
   "dateCaption": "Date",
   "datesCaption": "Dates",
   "subjectCaption": "Subject",
   "startTimeCaption": "Start time",
   "endTimeCaption": "End time",
   "allDayEventCaption": "All day event",
   "reminderCaption": "Reminder",
   "detailsCaption": "Details",
   "contactsCaption": "Teachers",
................................
为了使日历库加载这个文件,我们需要在网页中包含它。这可以通过引用来完成。<script src="./Localization/en1.js" type="text/javascript"></script>

在你定义了Calendar对象的JavaScript代码中,你必须将locale对象分配给在本地化文件夹中的en.js文件中定义的 enlocale对象。

calendar.locale = enlocale;
2. 使用JSON本地化文件

改变文字展示的另一个选择是编辑本地化文件夹中的一个*.json文件。在这种情况下,你必须加载该文件,解析JSON字符串并将其分配给locale属性。
en.json文件和en.js文件是一样的,区别在于对 enlocale对象的定义:JSON文件没有定义任何对象,只有数据。
我们在json文件中就标题字符串做同样的修改。我们输入 "新班级"、"教师 "和 "房间",而不是默认的字符串。由于这是一个JSON文件,我们需要从服务器上加载它。我们使用XMLHttpRequest来做到这一点。

 const xhr = new XMLHttpRequest(),
    method = "GET";
	
	var fileName = "./Localization/en.json"

xhr.open(method, fileName, true);
xhr.onreadystatechange = function () {
  // In local files, status is 0 upon success in Mozilla Firefox
  if(xhr.readyState === XMLHttpRequest.DONE) {
    var status = xhr.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // The request has been completed successfully
      console.log(xhr.responseText);
	  var result = JSON.parse(xhr.responseText);
	  calendar.locale = JSON.parse(xhr.responseText);
    } else {
      // Oh no! There has been an error with the request!
    }
  }
};
xhr.send();
当你重新加载项目时,你应该能够看到与JavaScript文件完全相同的结果。

MindFusion除此之外JavaScript图标库提供了很多商业图表、仪表盘等,是一套比较完备的组件。

点击这里下载MindFusion Javascript Chart


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP