How to send sms, email and whatsapp using react scheduler component when appointment is booked?

[Parthasarathy Mandayam]

How to send sms, email and whatsapp using react scheduler component when appointment is booked?

[Ruksar Moosa Sait]

Hi Parthasarathy ,

Currently, we have no sample code to sends SMS and WhatsApp now from the scheduler. You can achieve it through the following the ways.

1. Third-party licensed software
2. SMS and WhatsApp services

We didn’t recommend any third-party software. You can proceed based on your requirement.

For reference, we have prepared a sample that sends a mail when creating an appointment in the Schedule with help of EmailJS and actionComplete event of the Schedule as shown in the below code snippet.

[App.js]

import emailjs from 'emailjs-com';

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';

 

function App() {

 

  const onActionComplete = function (args) {

    if (args.requestType === 'eventCreated') {

      var data = args.data[0];

      data['user_name'] = 'YOUR NAME';

      // Sending mail using EmailJS send method

      emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', data, 'YOUR_USER_ID')

        .then(function (response) {

          console.log('SUCCESS!', response.status, response.text);

        }, function (error) {

          console.log('FAILED...', error);

        });

    }

  }

 

  return (

    <div className="App">

      <ScheduleComponent actionComplete={onActionComplete}>

      </ScheduleComponent>

    </div>

  );

}

 

export default App;

Steps to send email using EmailJS:

1. Install the EmailJS package into your project by using the command “npm install emailjs-com”.
2. Create an account in EmailJS.
3. Create a new Email service as shown in the below snip.

4. Create a new Email template as shown in the below snip. (In the send method, we have passed the added appointment data value. So, we can access the appointment field values in the email template. Here we have used the Subject and StartTime fields.)

5. Send your created service, template, and used id through the EmailJS send method as mentioned in the shared code snippet.

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ruksar Moosa Sait

Attachment: ej2reactschedulesendemailoneventcreationsample_9ec54858_6445784a.zip

[Parthasarathy Mandayam]

How will eventCreated be triggered?

[Satheesh Kumar Balasubramanian]

Hi Parthasarathy,

The actionComplete event of the Scheduler triggers after the successful completion of the Scheduler actions. The eventCreated request type block will be executed once the newly created appointment data is processed at the Scheduler source end and is ready to add to the Scheduler data source. So, you can send a mail based on the final processed appointment details. Please find the API link for more reference.

https://ej2.syncfusion.com/react/documentation/api/schedule/#actioncomplete

Please let us know if you need any further assistance.

Regards,

Satheesh Kumar B