Add reminder to appointment

Question

Looking at documentation for the Angular schedule component, I cant seem to find a way to add an option for a user to set a reminder when creating an appointment. Is it possible and if so, how?

Ravikumar Venkatesan · Accepted Answer

Hi Alexei, 

Thanks for the update. 

We have validated your requirement based on your shared images and we have added the additional dropdown list to customize the Reminder value of the appointments with help of popupOpen event of the Schedule for the same, we have prepared a sample that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-appointment-remainder-sample?file=app.component.ts 
 
[app.component.ts] 




  onPopupOpen(args): void { 
    if (args.type === "Editor") { 
      // Create required custom elements in initial time 
      if (!args.element.querySelector(".custom-field-row")) { 
        let row: HTMLElement = createElement("div", { className: "custom-field-row" }); 
        let formElement: HTMLElement = <HTMLElement>(args.element.querySelector(".e-schedule-form")); 
        formElement.firstChild.insertBefore(row, args.element.querySelector(".e-title-location-row")); 
        let container: HTMLElement = createElement("div", { className: "custom-field-container" }); 
        let inputEle: HTMLInputElement = createElement("input", { className: "e-field", attrs: { name: "Remainder" } }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: [ 
            { text: "Never", value: 0 }, 
            { text: "5 minutes before", value: 5 }, 
            { text: "15 minutes before", value: 15 } 
          ], 
          fields: { text: "text", value: "value" }, 
          value: args.data.Remainder || 0, 
          floatLabelType: "Always", 
          placeholder: "Add Remainder" 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute("name", "Remainder"); 
      } 
    } 
  } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Nevitha Ravi · Answer

Hi Alexi, 

Greetings from Syncfusion Support. 

You can add remainder to appointments, in the following sample we have shown the remainder before five minutes of the appointment using toast component. 
https://stackblitz.com/edit/angular-reminder-using-toast-ajyw2i?file=app.component.ts 

  onCreated(): void { 
    window.setInterval((this.refreshEventReminder as any), 60000); 
  } 
  refreshEventReminder(a) { 
    let scheduleObj: any = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
    let toastObj: any = (document.querySelector('.e-toast') as any).ej2_instances[0]; 
    let eventCollection = scheduleObj.getCurrentViewEvents(); 
    eventCollection.forEach((event: { [key: string]: Object }, i: number) => { 
      let dateFormat: Function = (date: Date): Date => 
        new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()); 
      let alertBeforeMinutes: number = 5; 
      let startTime: Date = dateFormat(event[scheduleObj.eventFields.startTime] as Date); 
      let currentTime: Date = dateFormat(new Date()); 
      if (currentTime.getTime() === startTime.getTime() - 1000 * 60 * alertBeforeMinutes) { 
        toastObj.show({ 
          template: (compile(document.getElementById("toastEmail_template").innerHTML.trim())(event)) 
        }); 
      } 
    }); 
  } 
 

Please let us know if you need any further assistance. 

Regards, 
Nevitha

Alexei Konovalov · Answer

Hi Nevitha,

Thank you for your
response. Unfortunately, that's not what I'm looking for. I don't need to
programmatically add a reminder. What I need is for an end user to be able to
specify if they want to have a reminder associated with an appointment and how
soon that reminder should pop up for the user. 

In ideal scenario, the
New/Edit Event view (that the schedule component has) have a label “Remind me”
and a dropdown box right next to that label and that dropdown box would have
options like “Never”, “5 minutes before”, “15 minutes before”, etc. That way
the user can specify if they want the reminder and how soon. Going through your
documentation here https://ej2.syncfusion.com/angular/documentation/schedule/appointments/,
I could not find how to accomplish that.Please let me know if my question is still not clear.

Hareesh Balasubramanian · Answer

HI Alexi, 
  
Thanks for the update. 
  
We have modified our previously updated sample based on your shared query “need to dynamically alert the events based on the Remainder value” in that we have dynamically add a custom “Remainder” field for every event based on that value the Toast component will popups, which can be viewed from the following link. 
  
Sample: https://stackblitz.com/edit/angular-reminder-using-toast-fhmbbt?file=app.component.ts  
  




  public eventData: any = [ 
    { 
      Id: 1, 
      Subject: "Explosion of Betelgeuse Star", 
      StartTime: new Date(2021, 3, 20, 8, 0), 
      EndTime: new Date(2021, 3, 20, 12, 0), 
      Remainder: 5 
    }, 
    { 
      Id: 2, 
      Subject: "Meeting", 
      StartTime: new Date(2021, 3, 21, 12, 0), 
      EndTime: new Date(2021, 3, 21, 16, 0), 
      Remainder: 15 
    }, 
    { 
      Id: 3, 
      Subject: "Test Meeting", 
      StartTime: new Date(2021, 3, 23, 6, 0), 
      EndTime: new Date(2021, 3, 23, 13, 0), 
      Remainder: 0 
    } 
  ]; 
  
  
  
refreshEventReminder(a) { 
    let scheduleObj: any = (document.querySelector(".e-schedule") as any) 
      .ej2_instances[0]; 
    let toastObj: any = (document.querySelector(".e-toast") as any) 
      .ej2_instances[0]; 
    let eventCollection = scheduleObj.getCurrentViewEvents(); 
    eventCollection.forEach((event: { [key: string]: Object }, i: number) => { 
      let dateFormat: Function = (date: Date): Date => 
        new Date( 
          date.getFullYear(), 
          date.getMonth(), 
          date.getDate(), 
          date.getHours(), 
          date.getMinutes() 
        ); 
      let alertBeforeMinutes: any = event.Remainder; 
      let startTime: Date = dateFormat(event[ 
        scheduleObj.eventFields.startTime 
      ] as Date); 
      let currentTime: Date = dateFormat(new Date()); 
      if ( 
        alertBeforeMinutes !== 0 && 
        currentTime.getTime() === 
          startTime.getTime() - 1000 * 60 * alertBeforeMinutes 
      ) { 
        toastObj.show({ 
          template: compile( 
            document.getElementById("toastEmail_template").innerHTML.trim() 
          )(event) 
        }); 
      } 
    }); 
  } 
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Hareesh

Alexei Konovalov · Answer

Hareesh,Appreciate your response but you totally lost me. Where in either of my two previous notes did you find my request "need to dynamically alert the events based on the Remainder value"? I never asked for this. I've asked about an option for the end user to be able to add a reminder to the appointment. In my second post I provided detailed specifics. If you could please check my second post and help find a solution that would be greatly appreciated.Thanks,Alexei

Hareesh Balasubramanian · Answer

Hi Alexei, 
  
Thanks for the update. 
  
We have validated your shared query and suspect that the “User needs to specify the remainder value dynamically while creating/editing an event”. Kindly confirm whether you need to dynamically render an additional field in the editor window, then we can be able to select the remainder value that need be applied in our previously updated sample or not? 
  
If we misunderstood your requirement, kindly let us know more details about your use case scenario/Scheduler rendering code snippets/video demo/image of your requirement to provide the prompt solution. 
  
If you have any other concerns, please revert for further assistance. 
  
Regards, 
Hareesh

Alexei Konovalov · Answer

Hi Hareesh,Not sure why the word "dynamically" keeps coming up, even though I've never used it here. Let me provide some screenshots (in the attached zip file called Screenshots.zip).If you look at the link I referred you in my second post here - https://ej2.syncfusion.com/angular/documentation/schedule/appointments/. In that link let's take the very first example. When you switch to preview tab of that example, as a user (not a developer), you can either add a new event/appointment or edit an existing one. In both cases you get almost the same popup view (refer to the attached screenshots NewEvent.png and EditEvent.png).I would like to modify these views by adding 2 UI elements - label "Remind me” and a dropdown box right next to that label and that dropdown box would have options like “Never”, “5 minutes before”, “15 minutes before”, etc. This is exactly how it is done in virtually any other calendar. For example, MS Outlook provides that option - see the screenshot Outlook.png with these 2 elements circled in red.Hopefully, this helps.Attachment: Screenshots_e4b2025c.zip