使用 'addtocalendar' 在 angularJS 中添加事件

Question

我正在努力学习 angularJS。我在 array.I 中有一组对象，正在使用这些对象创建动态内容。现在，当我单击每个 div 中的 "Add to outlook" 按钮时，我需要将它们添加到我的 outlook 中。

我如何在此处使用“addtocalendar”？

这是代码，到目前为止我已经写好了 -

angular.module('myApp', []).controller('myCtrl', function($scope){
  $scope.card = [{
  Name: "New Year Celebration",
  Description: "",
  Venue: "",
  StartDate: "Fri Dec 29 2017 23:30:00 GMT+0530",
  EndDate: "Sat Dec 30 2017 00:30:00 GMT+0530",
  EventID: "1"
}, {
  Name: "25th Anniversary Celebration",
  Description: "25th Anniversary Celebration of organization",
  Venue: "Auditorium",
  StartDate: "Wed May 31 2017 17:30:00 GMT+0530",
  EndDate: "Wed May 31 2017 20:30:00 GMT+0530",
  EventID: "2"
}, {
  Name: "Annual Day",
  Description: "",
  Venue: "",
  StartDate: "Fri Oct 13 2017 14:30:00 GMT+0530",
  EndDate: "Fri Oct 13 2017 17:30:00 GMT+0530",
  EventID: "3"
}];



  $scope.add = function(eventObj) {
  $scope.eventID= this.eventObj.EventID;
  $scope.startDate= this.eventObj.StartDate;
    $scope.endDate= this.eventObj.EndDate;
    $scope.venue= this.eventObj.Venue;
    $scope.subject= this.eventObj.Name;
    $scope.result= this.eventObj.Description;
  //console.log(this);
    $scope.icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nUID:me@google.com\nDTSTAMP:"+ $scope.startDate +"\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO:me@gmail.com\nDTSTART:" + $scope.startDate +"\nDTEND:" + $scope.endDate +"\nLOCATION:" + $scope.venue + "\nSUMMARY:"+ $scope.subject + "\nEND:VEVENT\nEND:VCALENDAR";
    window.open( "data:text/calendar;charset=utf8," + escape($scope.icsMSG));
  };
});

.event {
  height: 150px;
  width: 250px;
  border: 1px solid lightgrey;
  background-color: skyblue;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="eventObj in card" class="event">
  Subject: <span>{{eventObj.Name}}</span>
  <br /><br /> 
  Venue:<span>{{eventObj.Venue}}</span>
  <br /><br /> 
  Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
  <br /><br />
  <button ng-click="add(eventObj.EventID)">Add to Outlook</button>
  </div>
</div>

Answer 1

首先，您必须在 html 中包含 angularjs 和 addtocalendar 脚本。之后，在 app.js 文件中，您需要指定依赖项，如下所示。在你的情况下是 'angular-atc'

    angular.module('myApp', ['angular-atc']).controller('myCtrl', function($scope) {
        ...
        // All your code here
        ...
    }

在你的 html

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <div ng-repeat="eventObj in card">
            <addtocalendar
                start-date="{{eventObj.StartDate}}"
                end-date="{{eventObj.EndDate}}"
                title="{{eventObj.Name}}"
                location="{{eventObj.Venue}}"
                class-name="btn btn-sm btn-default dropdown-toggle"
                description="{{eventObj.Description}}">
            </addtocalendar>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="./path/to/your/addtocalender.js"></script>
    <script src="./path/to/your/controller.js"></script>
</body>

您也可以参考 site，当我深入研究 angular-addtocalendar 时，它与最新版本不兼容，对于我的工作代码，我使用了 v1.3.0

使用 'addtocalendar' 在 angularJS 中添加事件

Using 'addtocalendar' to add an event in angularJS

arrays

plugins

icalendar

angularjs

custom-directive