Learn Front-End Development and Automated Testing with Angular/

...

/

Adding Events to the Calendar

Adding Events to the Calendar

Let's add the functionality to display saved events on the calendar.

We'll cover the following...

At the moment, there’s a calendar within our dashboard, but there are no events under any of the week days.

Below is our updated code. Use this to make further changes.

Please provide values for the following:
your_API_key
Not Specified...
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Updated dashboard view

Add calendar event properties

If you’re not sure if there are any events for your user, simply add a console.log() to the response within ngOnInit.

Press + to interact
// src/app/dashboard/dashboard.component.ts
ngOnInit() {
  const id = this.authService.currentUser()._id;
  this.eventsService.getUserEvents(id).subscribe(res => {
    console.log('events for user ', res);
    if (res) {
      this.events = res;
    }
  });
}

If the console within your browser shows null, create an event, because we’ll need one for display purposes.

At the moment, a sample response from getUserEvents might look like this.

Press + to interact
[{
  '_id': '5a55135639fbc4ca3ee0ce5a',
  '_creator': '5a550ea739fbc4ca3ee0ce58',
  'title': 'My first event',
  'description': 'My first description',
  'city': 'Atlanta',
  'state': 'GA',
  'startTime': '2018-01-09T19:00:00.000Z',
  'endTime': '2018-01-09T20:00:00.000Z',
  '__v': 0,
  'suggestLocations': true,
  'members': [
    '5a550ea739fbc4ca3ee0ce58'
  ]
}]

We need it to look like this.

Press + to interact
[{
  '_id': '5a55135639fbc4ca3ee0ce5a',
  '_creator': '5a550ea739fbc4ca3ee0ce58',
  'title': 'My first event',
  'description': 'My first description',
  'city': 'Atlanta',
  'state': 'GA',
  'startTime': '2018-01-09T19:00:00.000Z',
  'endTime': '2018-01-09T20:00:00.000Z',
  '__v': 0,
  'suggestLocations': true,
  'members': [
    '5a550ea739fbc4ca3ee0ce58'
  ],
  'start': Tue Jan 30 2018 00:00:00 GMT-0500 (EST),
  'end': Thu Feb 01 2018 00:00:00 GMT-0500 (EST),
  'color': {'primary': '#1E90FF', 'secondary': '#D1E8FF'}
}]

Our startTime and endTime, which are dates in ISO format, must be converted to JavaScript dates. More importantly, they ...