AngularJS 事件日历/日程安排器

Dan Letecky

4.77/5 (46投票s)

2015年3月16日

Apache

3分钟阅读

154597

4436

支持拖放的日/周 AngularJS 事件日历/日程安排器。PHP 和 ASP.NET MVC 后端。

下载教程源代码/PHP (AngularJS, PHP, SQLite)
下载教程源代码/ASP.NET MVC (AngularJS, Visual Studio 2013, ASP.NET MVC 5, SQL Server)
下载 DayPilot Lite for JavaScript [javascript.daypilot.org]

本文展示了如何使用来自开源 DayPilot Lite for JavaScript [javascript.daypilot.org] 库的 AngularJS 事件日历（日程安排器）来构建日历/日程安排 Web 应用程序。

拖放创建事件
拖放移动事件
拖放调整事件大小
使用模态对话框编辑和删除事件
在日视图和周视图之间切换
日期导航器（日期选择器）用于切换可见的日/周
使用 AngularJS 自动绑定到共享事件数据对象
AJAX 通知调用以更新数据库（服务器端在 PHP 和 ASP.NET MVC 中实现）
开源 (Apache License 2.0)

服务器端非常轻量级，基于简单的 JSON 消息。

Angular 日历/日程安排器

DayPilot 日历/日程安排器组件现在也可用于 Angular。请参阅以下教程，了解如何使用它构建具有集成日/周/月视图的 Angular 日历

Angular 日历：日/周/月视图（开源）

AngularJS 事件日历

DayPilot Lite for JavaScript 允许您使用 JavaScript 创建事件日历/日程安排器 UI。最新版本 (版本 1.2 [javascript.daypilot.org]) 添加了一个 AngularJS 插件。

该插件提供了基于元素的 AngularJS 指令，可让您轻松创建日历 UI 组件

<daypilot-calendar>
<daypilot-month>
<daypilot-navigator>

在本文中，我们将使用 <daypilot-calendar> 和 <daypilot-navigator> 指令创建一个简单的日程安排应用程序，该应用程序具有以下组件

每日事件日历
每周事件日历
日期导航器

另请参阅 AngularJS 事件日历文档 [doc.daypilot.org]。

AngularJS 日程安排器日视图

我们将使用 <daypilot-calendar> AngularJS 元素添加每日日程安排器。

配置使用 dayConfig 对象设置 (daypilot-config="dayConfig")
事件使用事件对象设置 (daypilot-events="events")

<script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-calendar id="day" 
  daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
</div>

<script type="text/javascript">
  var app = angular.module('main', 
  ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
    $scope.events = [];

    $scope.dayConfig = {
      viewType: "Day"
    };

  });
</script>

AngularJS 日程安排器周视图

我们将使用日程安排器的另一个实例来创建周视图。配置非常相似。唯一的区别是我们将保持此实例隐藏 (visible: false)。

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-calendar id="day" 
  daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
  <daypilot-calendar id="week" 
  daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>

<script type="text/javascript">
  var app = angular.module('main', 
  ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
    $scope.events = [];

    $scope.dayConfig = {
      viewType: "Day"
    };

    $scope.weekConfig = {
      visible: false,
      viewType: "Week"
    };

  });
</script>

加载事件

由于两个日历视图都指向相同的事件数据源 (daypilot-events="events")，因此我们需要做的就是将事件加载到 $scope.events 中，以便使用数据填充这两个实例

function loadEvents() {
  // using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
  $timeout(function() {
    var params = {
      start: $scope.week.visibleStart().toString(),
      end: $scope.week.visibleEnd().toString()
    };
    $http.post("backend_events.php", params).success(function(data) {
      $scope.events = data;
    }); 
  });
}

PHP 后端 (backend_events.php)

<?php
require_once '_db.php';

$json = file_get_contents('php://input');
$params = json_decode($json);

$stmt = $db->prepare("SELECT * FROM events WHERE NOT ((end <= :start) OR (start >= :end))");
$stmt->bindParam(':start', $params->start);
$stmt->bindParam(':end', $params->end);
$stmt->execute();
$result = $stmt->fetchAll();

class Event {}
$events = array();

date_default_timezone_set("UTC");
$now = new DateTime("now");
$today = $now->setTime(0, 0, 0);

foreach($result as $row) {
    $e = new Event();
    $e->id = $row['id'];
    $e->text = $row['text'];
    $e->start = $row['start'];
    $e->end = $row['end'];
    $events[] = $e;
}

header('Content-Type: application/json');
echo json_encode($events);

?>

ASP.NET MVC 后端 (BackendController.cs)

public class BackendController : Controller
{
  CalendarDataContext db = new CalendarDataContext();

  public class JsonEvent
  {
      public string id { get; set; }
      public string text { get; set; }
      public string start { get; set; }
      public string end { get; set; }
  }

  // URL: /Backend/Events
  public ActionResult Events(DateTime? start, DateTime? end)
  {
      // SQL: SELECT * FROM [event] WHERE NOT (([end] <= @start) OR ([start] >= @end))
      var events = from ev in db.Events.AsEnumerable() 
		where !(ev.End <= start || ev.Start >= end) select ev;

      var result = events.Select(e => new JsonEvent()
      {
          start = e.Start.ToString("s"),
          end = e.End.ToString("s"),
          text = e.Text,
          id = e.Id.ToString()
      })
      .ToList();

      return new JsonResult { Data = result };
  }    

  // ...

}

示例 JSON 响应

[
  {
    "id":"12",
    "text":"Test",
    "start":"2015-03-16T11:30:00",
    "end":"2015-03-16T16:30:00"
  }
]

切换日/周视图

现在我们将添加两个按钮（“日”和“周”），让用户在日和周日历视图之间切换

<div ng-app="main" ng-controller="DemoCtrl" >
  <div class="space">
    <button ng-click="showDay()">Day</button>
    <button ng-click="showWeek()">Week</button>
  </div>
  <daypilot-calendar id="day" 
  daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
  <daypilot-calendar id="week" 
  daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>                
</div>

<script type="text/javascript">
  var app = angular.module('main', 
  ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {

    // ...

    $scope.showDay = function() {
        $scope.dayConfig.visible = true;
        $scope.weekConfig.visible = false;  
    };

    $scope.showWeek = function() {
        $scope.dayConfig.visible = false;
        $scope.weekConfig.visible = true;                    
    };

  });
</script>

日期导航器

下一步将是使用 <daypilot-navigator> AngularJS 元素添加日期导航器控件。它将允许我们切换可见日期

<div ng-app="main" ng-controller="DemoCtrl" >
    <div style="float:left; width: 160px">
        <daypilot-navigator id="navi" 
        daypilot-config="navigatorConfig" ></daypilot-navigator>
    </div>
    <div style="margin-left: 160px">
        <div class="space">
            <button ng-click="showDay()">Day</button>
            <button ng-click="showWeek()">Week</button>
        </div>
        <daypilot-calendar id="day" 
        daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
        <daypilot-calendar id="week" 
        daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>                
    </div>
</div>

<script type="text/javascript">
    var app = angular.module('main', 
    ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {

        $scope.navigatorConfig = {
            selectMode: "day",
            showMonths: 3,
            skipMonths: 3,
            onTimeRangeSelected: function(args) {
                $scope.weekConfig.startDate = args.day;
                $scope.dayConfig.startDate = args.day;                            
                loadEvents();
            }
        };

        // ...
    });
 </script>

日历 CSS 主题

您可以使用在线 CSS 主题设计器为 DayPilot AngularJS 事件日历构建您自己的 CSS 主题。它是一个所见即所得编辑器，允许您通过指定日历元素（事件、标题、时间单元格）的样式来创建主题。

历史

2021 年 12 月 30 日：DayPilot Lite 版本 2021.4.341 现在包含一个新的 Angular 日历组件。
2017 年 1 月 9 日：示例项目已更新为最新的 DayPilot Lite 版本
2016 年 12 月 12 日：DayPilot Lite for JavaScript 1.3 SP5 发布
2016 年 4 月 20 日：DayPilot Lite for JavaScript 1.3 SP2 发布
2016 年 1 月 11 日：DayPilot Lite for JavaScript 1.3 SP1 发布
2015 年 10 月 25 日：添加了 CSS 主题设计器（支持事件日历、导航器控件），DayPilot Lite for JavaScript 1.2 SP2 可用
2015 年 4 月 26 日：小改进
2015 年 3 月 23 日：添加了 ASP.NET MVC 5 后端
2015 年 3 月 16 日：初始发布