Using 'addtocalendar' to add an event in angularJS

Question

Using 'addtocalendar' to add an event in angularJS

1.1k Views Asked by Sunny At 20 October 2024 at 20:18

I'm trying to learn angularJS. I've a set of objects in an array.I'm creating dynamic content with these objects. Now, when I click on "Add to outlook" button in each of the divs, I need to add them to my outlook.

How can I use 'addtocalendar' this over here?

Here's the code, I've written so far -

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:[email protected]\nDTSTAMP:"+ $scope.startDate +"\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:[email protected]\nORGANIZER;CN=Me:MAILTO:[email protected]\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>

Original Q&A

There are 1 best solutions below

**Kanagu** · Accepted Answer

First you have to include your angularjs and addtocalendar scripts in your html. After that in your app.js file you need to specify the dependencies as like below. In your case it is 'angular-atc'

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

And in your 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>

You can refer the site too, As I dig deep into the angular-addtocalendar it breaks with latest version, for my working code I have used v1.3.0

Using 'addtocalendar' to add an event in angularJS

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ARRAYS

Related Questions in PLUGINS

Related Questions in ICALENDAR

Related Questions in CUSTOM-DIRECTIVE

Trending Questions

Popular # Hahtags

Popular Questions