AngularJS Material 日历组件 —— 简约与强大的完美结合

AngularJS Material 日历组件 —— 简约与强大的完美结合

AngularJS Material 日历是一款轻量级（约2.1kB）的AngularJS和Angular Material Design框架下的日历指令库，它提供了高度的可配置性。

安装

RawGit

在HTML文件中直接引用：

<script src="https://cdn.rawgit.com/bradberger/angular-material-calendar/master/dist/angular-material-calendar.js"></script>

Bower

通过Bower安装：

bower install --save material-calendar

或在你的bower.json文件中添加依赖：

{
   "dependencies": {
    "material-calendar": "~0.2"
  }
}

NPM

使用NPM安装：

npm install --save angular-material-calendar

使用方法

首先，访问demo查看效果。

虽然文档仍在编写中，但通过查看示例example/index.html文件，你应该能轻松理解其工作原理。这个日历组件支持独立的点击事件处理，可以设置ngModel绑定，设定自定义标签，并允许在日期块中显示HTML内容。此外，还有选项可以设置每个日期占据整行宽度，适用于小屏幕设备或展示更多内容。

默认情况下，CSS和模板都已包含在单个编译后的JavaScript文件中，如果你只想快速尝试，这些就足够了。默认模板位于src/angular-material-calendar.html，你可以自定义模板，只需在指令上设置template-url属性，指定一个可被$http服务获取并注入的URL。

<calendar-md flex layout layout-fill
  calendar-direction="direction"
  on-prev-month="prevMonth"
  on-next-month="nextMonth"
  on-day-click="dayClick"
  title-format="'MMMM y'"
  ng-model='selectedDate'
  day-format="'d'"
  day-label-format="'EEE'"
  day-label-tooltip-format="'EEEE'"
  day-tooltip-format="'fullDate'"
  week-starts-on="firstDayOfWeek"
  day-content="setDayContent"></calendar-md>

相关的控制器代码可能像这样：

angular.module("materialExample").controller("calendarCtrl", function($scope, $filter) {
    $scope.selectedDate = null;
    $scope.firstDayOfWeek = 0;
    $scope.setDirection = function(direction) {
      $scope.direction = direction;
    };
    $scope.dayClick = function(date) {
      $scope.msg = "你点击了 " + $filter("date")(date, "MMM d, y h:mm:ss a Z");
    };
    $scope.prevMonth = function(data) {
      $scope.msg = "你点击了 (前一月) " + data.month + ", " + data.year;
    };
    $scope.nextMonth = function(data) {
      $scope.msg = "你点击了 (后一月) " + data.month + ", " + data.year;
    };
    $scope.setDayContent = function(date) {
      // 在这里为特定日期注入任何你想展示的HTML
        return "<p></p>";
    };
});

本地化支持

日历组件遵循AngularJS标准的本地化过程，详细信息参考官方指南。默认支持多种语言环境，如需改变，只需在页面中引入对应的语言包。

例如，对于西班牙语：

<script src="bower_components/angular-i18n/angular-locale_es-es.js"></script>

或从CDN加载：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.7/angular-locale_es-es.js"></script>

加载完成之后，日历将自动转换为你所选择的语言。

开发与贡献

利用Gulp可以启动服务器并实时重新编译资源。运行default任务即可完成这一切，只需确保Selenium已启动：

./node_modules/protractor/bin/webdriver-manager update

然后：

# 分别在不同终端运行以下命令
webdriver-manager start

gulp

Protractor用于开发期间的测试，会检测代码变更并在后台自动运行测试。同样，也可以运行Karma单元测试：

karma start

我们欢迎任何形式的贡献！请遵守已有的ESLint代码风格，并为新功能和修复的bug编写测试用例。如果可能的话，请为现有的测试添加新的测试案例以帮助我们提高覆盖率。

待办事项

• [X] 单元测试（基本架构已完成，需要填充）
• [X] 验证时区正确处理（测试？）
• 编写文档
• 分发工作
• 添加到cdnjs, jsdelivr等CDN平台
• 自动化CI构建后的网站更新过程

让我们一起打造更出色的AngularJS Material 日历组件！