How to validate the wrong Room/Owner selection in appointment window?
The following steps shows how to create an alert, when wrong resource names are manually typed onto the resource fields of appointment window.
Step 1: Create a scheduler default sample using the below link.
https://help.syncfusion.com/js/schedule/getting-started
Step 2: Bind the appointmentWindowOpen event as shown below,
$("#Schedule1").ejSchedule({ width: "100%", height: "525px", currentDate: new Date(2017, 5, 5), group: { resources: ["Rooms", "Owners"] }, resources: [ { field: "roomId", title: "Room", name: "Rooms", allowMultiple: false, resourceSettings: { dataSource: [ { text: "ROOM 1", id: 1, groupId: 1, color: "#cb6bb2" }, { text: "ROOM 2", id: 2, groupId: 1, color: "#56ca85" }], text: "text", id: "id", groupId: "groupId", color: "color" } }, { field: "ownerId", title: "Owner", name: "Owners", allowMultiple: false, resourceSettings: { dataSource: [ { text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" }, { text: "Steven", id: 3, groupId: 2, color: "#f8a398" }, { text: "Michael", id: 5, groupId: 1, color: "#7499e1" } ], text: "text", id: "id", groupId: "groupId", color: "color" } }], appointmentSettings: { dataSource: dManager, id: "Id", subject: "Subject", startTime: "StartTime", endTime: "EndTime", description: "Description", allDay: "AllDay", recurrence: "Recurrence", recurrenceRule: "RecurrenceRule", resourceFields: "roomId,ownerId" }, appointmentWindowOpen: "OnAppointmentWindowOpen" }); });
Step 2: Define the appointmentWindowOpen event function OnAppointmentWindowOpen in which we can check for the wrong owner and resources when the respective field is focused out. The following code example shows the logic.
function OnAppointmentWindowOpen() { roomData = this.model.resources[0].resourceSettings.dataSource; ownerData = this.model.resources[1].resourceSettings.dataSource; this._appointmentAddWindow.find('.owner_' + 0).ejAutocomplete({ focusOut: function (argument) { //trigger when room resource focus out var flag = false; for (var i = 0; i < roomData.length; i++) { if (argument.value == roomData[i].text) flag = true } if (!flag) alert('please choose correct Room'); } }); this._appointmentAddWindow.find('.owner_' + 1).ejAutocomplete({ //trigger when owner resource focus out focusOut: function (argument) { var flag = false; for (var i = 0; i < ownerData.length; i++) { if (argument.value == ownerData[i].text) flag = true } if (!flag) alert('please choose correct Owner'); } }); }
Sample: http://jsplayground.syncfusion.com/j22urj1c
Step 3: Run the above sample and alert window will pop up when resource fields are entered wrongly as shown below.
Figure 1: Alert window when wrong room is entered.
Figure 2: Alert window when wrong owner is entered