How to load two datasources inside the scheduler with two different color and information displayed

[shubham sharma]

i  have a project where i create my availability schedule and i have my bookings schedule... i want to display both of the data sources with the corresponding names "availabiliy" and "booking" and they should have different colors...can you help me with it?

[shubham sharma]

I wanted to ask two more things:

1. is it possible that one datasource is view only and the other one can be edited..for example. the bookings datasource events can't be edited or deleted..but the availability schedules can be edited..

2. is it possible that when i click on some booking event i can show some information related to booking i want to  show like some subject or description or price.

[Hareesh Balasubramanian]

Hi Shubham, 

Greetings from Syncfusion Support..! 

We have prepared a sample for all your requirements and same can be available in following link, 

https://stackblitz.com/edit/angular-vjy6rs-hvkbaf?file=app.component.ts  

Q1: is it possible that one datasource is view only and the other one can be edited..for example. the bookings datasource events can't be edited or deleted..but the availability schedules can be edited.. 

Q2: is it possible that when i click on some booking event i can show some information related to booking i want to  show like some subject or description or price. 

We can achieve those requirements by making use of the dataBound event of our scheduler. Kindly refer to the below code snippets and the same can be available in the above sample. 

Code snippet: 

  public onDataBound(): void { 

    if (this.flag) { 

      let length = this.data.length; 

      for (let i = 0; i < length; i++) { 

        if (this.data[i].Type == "Booking") { 

          this.data[i].IsReadonly = true; 

        } 

      } 

      this.scheduleObj.refreshEvents(); 

      this.flag = false; 

    } 

  } 

API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound  

Q3: they should have different colors...can you help me with it?  

T You can achieve this by using eventRendered event of our scheduler. Please refer below codes same can be available in above sample. 

Code snippet: 

  public onEventRendered(args: any): void { 

    if (args.data.Type == "Booking") { 

      args.element.style.backgroundColor = "#4a4040"; 

    } 

  } 

API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#eventrendered  

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh