In this section you will add the ability to create events on the user's calendar.

Create a new event form

  1. Add the following function to ui.js to render a form for the new event.

    function showNewEventForm() {
      let form = document.createElement('form');
    
      let subjectGroup = createElement('div', 'form-group');
      form.appendChild(subjectGroup);
    
      subjectGroup.appendChild(createElement('label', '', 'Subject'));
    
      let subjectInput = createElement('input', 'form-control');
      subjectInput.setAttribute('id', 'ev-subject');
      subjectInput.setAttribute('type', 'text');
      subjectGroup.appendChild(subjectInput);
    
      let attendeesGroup = createElement('div', 'form-group');
      form.appendChild(attendeesGroup);
    
      attendeesGroup.appendChild(createElement('label', '', 'Attendees'));
    
      let attendeesInput = createElement('input', 'form-control');
      attendeesInput.setAttribute('id', 'ev-attendees');
      attendeesInput.setAttribute('type', 'text');
      attendeesGroup.appendChild(attendeesInput);
    
      let timeRow = createElement('div', 'form-row');
      form.appendChild(timeRow);
    
      let leftCol = createElement('div', 'col');
      timeRow.appendChild(leftCol);
    
      let startGroup = createElement('div', 'form-group');
      leftCol.appendChild(startGroup);
    
      startGroup.appendChild(createElement('label', '', 'Start'));
    
      let startInput = createElement('input', 'form-control');
      startInput.setAttribute('id', 'ev-start');
      startInput.setAttribute('type', 'datetime-local');
      startGroup.appendChild(startInput);
    
      let rightCol = createElement('div', 'col');
      timeRow.appendChild(rightCol);
    
      let endGroup = createElement('div', 'form-group');
      rightCol.appendChild(endGroup);
    
      endGroup.appendChild(createElement('label', '', 'End'));
    
      let endInput = createElement('input', 'form-control');
      endInput.setAttribute('id', 'ev-end');
      endInput.setAttribute('type', 'datetime-local');
      endGroup.appendChild(endInput);
    
      let bodyGroup = createElement('div', 'form-group');
      form.appendChild(bodyGroup);
    
      bodyGroup.appendChild(createElement('label', '', 'Body'));
    
      let bodyInput = createElement('textarea', 'form-control');
      bodyInput.setAttribute('id', 'ev-body');
      bodyInput.setAttribute('rows', '3');
      bodyGroup.appendChild(bodyInput);
    
      let createButton = createElement('button', 'btn btn-primary mr-2', 'Create');
      createButton.setAttribute('type', 'button');
      createButton.setAttribute('onclick', 'createNewEvent();');
      form.appendChild(createButton);
    
      let cancelButton = createElement('button', 'btn btn-secondary', 'Cancel');
      cancelButton.setAttribute('type', 'button');
      cancelButton.setAttribute('onclick', 'getEvents();');
      form.appendChild(cancelButton);
    
      mainContainer.innerHTML = '';
      mainContainer.appendChild(form);
    }
    

Create the event

  1. Add the following function to graph.js to read the values from the form and create a new event.

    async function createNewEvent() {
      const user = JSON.parse(sessionStorage.getItem('graphUser'));
    
      // Get the user's input
      const subject = document.getElementById('ev-subject').value;
      const attendees = document.getElementById('ev-attendees').value;
      const start = document.getElementById('ev-start').value;
      const end = document.getElementById('ev-end').value;
      const body = document.getElementById('ev-body').value;
    
      // Require at least subject, start, and end
      if (!subject || !start || !end) {
        updatePage(Views.error, {
          message: 'Please provide a subject, start, and end.'
        });
        return;
      }
    
      // Build the JSON payload of the event
      let newEvent = {
        subject: subject,
        start: {
          dateTime: start,
          timeZone: user.mailboxSettings.timeZone
        },
        end: {
          dateTime: end,
          timeZone: user.mailboxSettings.timeZone
        }
      };
    
      if (attendees)
      {
        const attendeeArray = attendees.split(';');
        newEvent.attendees = [];
    
        for (const attendee of attendeeArray) {
          if (attendee.length > 0) {
            newEvent.attendees.push({
              type: 'required',
              emailAddress: {
                address: attendee
              }
            });
          }
        }
      }
    
      if (body)
      {
        newEvent.body = {
          contentType: 'text',
          content: body
        };
      }
    
      try {
        // POST the JSON to the /me/events endpoint
        await graphClient
          .api('/me/events')
          .post(newEvent);
    
        // Return to the calendar view
        getEvents();
      } catch (error) {
        updatePage(Views.error, {
          message: 'Error creating event',
          debug: error
        });
      }
    }
    
  2. Save your changes and refresh the app. Click the Calendar nav item, then click the Create event button. Fill in the values and click Create. The app returns to the calendar view once the new event is created.

    A screenshot of the new event form