深入探讨 NativeScript UI 的日历

如果你问一群开发者：“最难实现的 UI 是什么？”，我猜大多数人会提到日期、日历和日程安排。日历很难。闰年、节日、周末 - 这些都是需要管理的。你不应该为了写代码而记住“三十天九月，四月、六月、十一月……”。

当你把“移动”加进来，事情就变得更加复杂。如何在有限的画布上，创建一个有效地展示一个月甚至一年的事件数据的 UI？

NativeScript UI 来拯救！NativeScript UI 是在 iOS 和 Android 提供的原生日历 UI 之上建立的简洁抽象层。借助 NativeScript UI，我们秉承 Telerik 的传统，提供易于使用的组件，让开发者轻松使用，并以其引人入胜的功能为最终用户带来愉悦体验。

这篇文章是我们“NativeScript UI 周”的一部分，介绍了每个 NativeScript UI 组件的如何操作指南。今天我们来谈谈 日历，这也是我们系列文章的最后一篇。

• ListView
• Chart
• SideDrawer
• DataForm
• AutoCompleteTextView
• Calendar

什么是 NativeScript UI？

NativeScript UI 是一套针对使用 NativeScript 框架编写的原生跨平台移动应用的优质 UI 组件。我们的目标是通过提供预先构建的、可立即使用的、易于在您的应用中实现的组件（并且同样易于进行样式设置以匹配您的应用外观和风格）来简化 NativeScript 应用开发。

让我们开始学习关于日历组件的知识。

日历（又名 RadCalendar）

日历组件（在代码中称为 RadCalendar）是在 iOS 和 Android 提供的原生日历控件之上公开的统一 API。不再需要单独的、特定于平台的事件/日程安排 UI 实现。**借助 RadCalendar，我们为您完成繁重的工作，并让您能够以最少的代码量，将复杂、针对移动设备优化的 UI 小部件添加到您的应用中。**

 

RadCalendar 允许您以内联方式（如上例所示）显示事件，自定义周/月/年视图，使用 CSS 对日历进行样式设置，并根据用户交互处理日历事件。

安装 NativeScript UI 的日历

导航到您的 NativeScript 项目目录，并使用以下命令安装 NativeScript UI 日历（无需手动下载）。

tns plugin add nativescript-ui-calendar

开始使用 RadCalendar

请注意，此处展示的所有代码都可以在 此 GitHub 存储库中找到。有关更多代码示例，请查看官方的 NativeScript UI 示例存储库。

插件安装好了吗？太好了！现在我们需要在要使用 RadCalendar 的页面的根目录中添加一个 XML 命名空间。如果“XML 命名空间”让你感到害怕，那就别担心。您只需要将一个属性添加到您的根 <Page> 元素中，如下所示。

<Page xmlns:calendar="nativescript-ui-calendar">

接下来，我们需要将 RadCalendar 组件添加到我们的 XML 标记中，如下所示。

<Page xmlns:calendar="nativescript-ui-calendar">
    <calendar:RadCalendar id="myCalendar" />
</Page>

信不信由你，这样一个简单的代码示例就能生成一个漂亮的日历。

但让我们添加一些事件，看看 RadCalendar 还能为我们做些什么！

添加事件数据

RadCalendar 允许我们通过 CalendarEvent 类轻松地添加事件数据，该类描述单个事件并公开各种属性。

让我们先对我们的 XML 标记进行一些小的更改。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:calendar="nativescript-ui-calendar" loaded="pageLoaded">
    <ActionBar title="RadCalendar Demo" class="action-bar" />
    <calendar:RadCalendar id="myCalendar" eventSource="{{ events }}" />
</Page>

有什么变化？

• 我们在 loaded 事件（见下文）中添加了一个 pageLoaded 函数。
• 我们插入了一个 ActionBar 以在我们的视图中显示标题。
• 我们添加了 eventSource="{{ events }}" 以将数据源与我们的日历关联。

接下来，让我们在 JavaScript 代码隐藏文件中添加一些代码。

var Observable = require("data/observable").Observable;
var calendarModule = require("nativescript-telerik-ui-pro/calendar");

var page;
var pageData = new Observable();

exports.pageLoaded = function(args) {
    page = args.object;
    page.bindingContext = pageData;

    var eventTitles = ["Lunch with Steve", "Meeting with Jane", "Q1 Recap Meeting"];
    var events = [];

    var j = 1;
    for (var i = 0; i < eventTitles.length; i++) {
        var now = new Date();
        var startDate = new Date(now.getFullYear(), now.getMonth(), j * 2, 12);
        var endDate = new Date(now.getFullYear(), now.getMonth(), (j * 2) + (j % 3), 13);
        var event = new calendarModule.CalendarEvent(eventTitles[i], startDate, endDate);
        events.push(event);
        j++;
    }

    pageData.set("events", events);
}

在这个代码示例中，我们为我们的日历提供了一些模拟事件数据。关键代码行是：

var event = new calendarModule.CalendarEvent(eventTitles[i], startDate, endDate);

在这里，我们使用 CalendarEvent 类创建了单个事件。请注意，startDate 和 endDate 变量只是普通的 JavaScript 日期对象！

想要寻找 Angular 代码示例？请查看我们的 Angular 的完整文档！

这会导致我们的日历应用发生以下变化。

请注意，您看到的样式来自 NativeScript 的一部分 核心浅色主题，以及使用 NativeScript 主题构建器 进行的一些自定义。

查看事件数据

我们的日历中有数据（我们可以根据 iOS 中的点和 Android 中的简短事件预览来查看）。但是，我们希望能够实际**看到**事件数据！

这可以通过使用 RadCalendar 提供的 事件视图模式 来实现。通过调整我们的标记，我们可以以 Inline 或 Popover 的方式查看我们的事件数据。

<calendar:RadCalendar id="myCalendar" eventSource="{{ events }}" eventsViewMode="Inline|Popover" />

iOS 上的内联显示

Android 上的弹出窗口

更改日历视图

我们并不总是想要以完整的月视图（这是默认视图）查看我们的日历。在您想要显示不同日期视图的场景中，可以使用 RadCalendar 的 viewMode 属性，该属性支持 以下选项

• Week（显示一周的日期）
• Month（一次显示一个月 - 默认）
• MonthNames - （显示一年中的所有月份名称）
• Year - （在一个屏幕上显示一整年的日期 - 请见下文）

精美日历过渡

在滑动以在周/月/年之间移动时，NativeScript 将使用主机平台的原生过渡。使用 RadCalendar，您可以指定不同的 过渡模式

• 无
• 滑动
• 堆叠
• 翻转（仅限 iOS）
• 折叠（仅限 iOS）
• 浮动（仅限 iOS）
• 旋转（仅限 iOS）
• 普通（仅限 Android）
• 自由（仅限 Android）
• 组合（仅限 Android）
• 重叠（仅限 Android）

您可以通过设置 RadCalendar 的 transitionMode 属性来尝试这些过渡。以下是在 iOS 和 Android 上使用 Stack 过渡的示例。

还有其他吗？

RadCalendar 允许您轻松创建自定义日历控件。想象一下，添加一个 RadDataForm 来创建一个功能齐全的日程安排系统！