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.

<!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 must be set to the start and end properties. We also need to add a color property to the object, because the library requires this as well.

Once again, this isn’t exactly intuitive. This is a part of using ...