How to show alert messages in the JavaScript Scheduler when resource data is empty?

13 mins read

The following steps used to show the alert message in Javascript Schedule component when resource data is empty.

Step 1: Implement the Scheduler component using our Getting Started documentation.

Step 2: To bind the resource datasource with the required fields in the Schedule component, follow the Resource data-binding documentation.

Step 3: Follow the Getting Started documentation of the Toast component to show an alert message.

Step 4: By using the created event of the Scheduler, check whether the resource datasource is empty. If the datasource is empty (i.e., its length is 0), it means there are no resources available. In such a case, an alert message is displayed inside the planner using the Toast component.

Step 5: The show method of the Toast component is invoked with an object parameter that contains the title and content of the alert message. The title is set as 'Resource Datasource' and the content as 'No Resources found'. This serves as a reminder or notification to the user about the absence of resources in the Schedule component.

[index.ts]

let toastObjReminder: Toast = new Toast({

cssClass: 'e-schedule-reminder e-toast-info',

position: { X: 'Right', Y: 'Top' },

showCloseButton: true,

target: '.e-schedule',

animation: {

hide: { effect: 'SlideRightOut' },

show: { effect: 'SlideRightIn' },

});

toastObjReminder.appendTo('#schedule-reminder');

let scheduleObj: Schedule = new Schedule({

..........

resources: [

{

dataSource: [

// Datasource as empty

created: OnCreate,

});

scheduleObj.appendTo('#Schedule');

function OnCreate(): void {

if (this.resources[0].dataSource.length == 0) {

toastObjReminder.show({

title: 'Resource Datasource',

content: 'No Resources found',

});

}

Sample: To-show-alert-message

Conclusion

I hope you enjoyed learning about how to show alert messages in the JavaScript Scheduler when resource data is empty.

You can refer to our JavaScript Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Scheduler example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

How to show alert messages in the JavaScript Scheduler when resource data is empty?

Access denied