Set a remainder

[Gilles]

Hi

Is it possible to set a remainder in appointment ?

[Nevitha Ravi]

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]

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

[Ravikumar Venkatesan]

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] 

  <script id="EventEditorTemplate" type="text/x-template"> 

    <table class="custom-event-editor" width="100%" cellpadding="5"> 

             <tbody> 

                 <tr> 

                     <td class="e-textlabel">Status</td> 

                     <td colspan="4"> 

                         <input type="text" id="RemainderMessage" name="RemainderMessage" class="e-field e-input" style="width: 100%" /> 

                     </td> 

                 </tr> 

             </tbody> 

         </table> 

      </script> 

 

  <script id="toastEmail_template" type="text/x-template"> 

    <div class="e-toast-template e-toast-info"> 

          <div class="e-toast-message"> 

            <div class="e-toast-title">${Subject}</div> 

            <div class="e-toast-content">${StartTime.toLocaleTimeString()} - ${EndTime.toLocaleTimeString()}</div> 

            <div class="e-toast-content">${RemainderMessage}</div> 

          </div> 

        </div> 

    </script> 

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