Appointment form with SMS OTP verification

[Ishan Shah]

Hello!

I am working on a project, in which I want to add an appointment form which is verified by SMS OTP for security purposes. so, please provide me the best solution for me with SMS API which is best and more secure in terms of everything.

[Hareesh Balasubramanian]

Hi Ishan, 

Greetings from Syncfusion Support. 

We have validated your requirement. The requirement “verify the SMS OTP” is feasible with our Scheduler control by adding an event by making use of actionBegin event. But we didn’t provide any SMS API from Scheduler and the requirement can be achievable from your application by integrating your API service.  

Please refer the below code snippet. In the below sample, we have verified the subject text to add the event. You can use the return result from your service. 

public onActionBegin(args: any): void { 

    if (args.requestType == "eventCreate" || args.requestType == "eventChange") { 

      let subject = isNullOrUndefined(args.data[0]) ? args.data.Subject : args.data[0].Subject; 

      if (subject == "test") {//SMS OTP verification 

         // If otp validation success then this part will execute and the events will save into the scheduler. 

      } else { 

        args.cancel = true; // If otp validation fails. Events are prevented from saving 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-nucg69-y5nqsj?file=app.component.ts  

Kindly try the above sample link and if you have any further assistance please let us know. 

Regards, 

Hareesh 

[Parthasarathy Mandayam]

How to send email using react scheduler component when appointment is booked

[Ravikumar Venkatesan]

Hi Parthasarathy,

Greetings from Syncfusion support.

Currently, we have no sample code to send SMS and WhatsApp now from the scheduler. You can achieve it in the following 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,

Ravikumar Venkatesan

Attachment: ej2reactschedulesendemailoneventcreationsample_9ec54858.zip

[Parthasarathy Mandayam]

Why reminder facility is not there when we create event?

[Mugilraj Govindarajan]

Hi Parthasarathy,

When we create appointment, the actionComplete event will be invoked with all necessary information of newly created appointment, we can set reminder in application end based on the actionComplete event data.

let us know if you need any further assistance.

Regards,
Mugilraj G