Set a remainder

Question

HiIs it possible to set a remainder in appointment ?

Nevitha Ravi · Answer

Hi Gilles, 

Greetings from Syncfusion Support. 

Yes we can set reminder to an appointment. In the following sample, reminder is set before 5 minutes of the appointment using Toast component. 
https://stackblitz.com/edit/schedule-reminder-sample?file=index.js 

var scheduleObj = new ej.schedule.Schedule({ 
  height: "650px", 
  eventSettings: { dataSource: [eventData] }, 
  created: () => { 
    window.setInterval(refreshEventReminder, 60000); 
  } 
}); 
scheduleObj.appendTo("#schedule"); 
 
var toastObjReminder = new ej.notifications.Toast({ 
  cssClass: "e-schedule-reminder e-toast-info", 
  position: { X: "Right", Y: "Top" }, 
  newestOnTop: true, 
  showCloseButton: true, 
  timeOut: 5000, 
  target: "#schedule", 
  animation: { 
    hide: { effect: "SlideRightOut" }, 
    show: { effect: "SlideRightIn" } 
  } 
}); 
toastObjReminder.appendTo("#schedule_remainder"); 
 
function refreshEventReminder() { 
  var eventCollection = scheduleObj.getCurrentViewEvents(); 
  eventCollection.forEach((event, i) => { 
    var dateFormat = date => 
      new Date( 
        date.getFullYear(), 
        date.getMonth(), 
        date.getDate(), 
        date.getHours(), 
        date.getMinutes() 
      ); 
    var alertBeforeMinutes = 5; 
    var startTime = dateFormat(event[scheduleObj.eventFields.startTime]); 
    var currentTime = dateFormat(new Date()); 
    if ( 
      currentTime.getTime() === 
      startTime.getTime() - 1000 * 60 * alertBeforeMinutes 
    ) { 
      toastObjReminder.show({ 
        template: ej.base.compile( 
          document.getElementById("toastEmail_template").innerHTML.trim() 
        )(event)[0].outerHTML 
      }); 
    } 
  }); 
} 

Please try the sample and let us know if you need any further assistance. 

Regards, 
Nevitha

Gilles · Answer

Is it possible to add input fields to do reminder settings in editor appointment dialog ?

Ravikumar Venkatesan · Answer

Hi Gilles, Thanks for the update. We have validated your requirement at our end. We have achieved your requirement with the help of the editorTemplate property of the Schedule as shown below and for that, we have prepared a sample which can be available below. [index.js] var eventData = { Id: 1, Subject: "Explosion of Betelgeuse Star", Location: "Space Centre USA", StartTime: startTime, EndTime: endTime, RemainderMessage: "test" }; var data = new ej.base.extend([], window.scheduleData, null, true); var scheduleObj = new ej.schedule.Schedule({ height: "650px", eventSettings: { dataSource: [eventData] }, created: () => { window.setInterval(refreshEventReminder, 6000); }, editorTemplate: "#EventEditorTemplate", }); scheduleObj.appendTo("#schedule"); [index.html] Sample: https://stackblitz.com/edit/schedule-reminder-sample-sample-with-editor-template-kf9k4a?file=index.js Kindly try the above sample and get back to us if you need any further assistance. Regards, Ravikumar Venkatesan