1. Home
  2. Forum
  3. React - EJ 2
  4. React scheduler remote data from api not showing on schedule

React scheduler remote data from api not showing on schedule

Hey guys!

I followed the docs and tutorial and tried for weeks, but something seems wrong with the remote data implementation on my side, I would really like your help on that.

I'm using a post request with axios as followed in the code I attached, which gets array of dictionaries with the required fields inside. including resourceId's.

I'm using typescript in a tsx file and react in a class component and fetching the data from my api I developed, nothing crazy.

**Code in zip file attached - sorry for the inconvenience with the photos

Thanks in advance !!


Attachment: photos_1b0b17d9.rar


12 Replies 1 reply marked as answer
YO Yosi January 17, 2022 11:50 AM UTC

Upppp!


SK Satheesh Kumar Balasubramanian Syncfusion Team January 17, 2022 02:06 PM UTC

Hi Yosi, 
  
We have prepared a sample based on your shared query using Axios library method for performing CRUD actions in scheduler, which can be downloaded from the following link. 
  
  
  onBound(args) { 
    if (this.flag) { 
      axios.get('http://localhost:54738/Home/GetData').then(response => { 
        var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
        schObj.eventSettings.dataSource = response.data; 
      }); 
      this.flag = false; 
    } 
  } 
  
  onBegin(args) { 
    if (args.requestType === 'eventCreate') { 
      axios 
        .post('http://localhost:54738/Home/Insert', args.data[0]) 
        .then(response => { 
          var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
          schObj.eventSettings.dataSource = response.data; 
        }); 
    } else if (args.requestType === 'eventChange') { 
      axios 
        .post('http://localhost:54738/Home/Update', args.data) 
        .then(response => { 
          var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
          schObj.eventSettings.dataSource = response.data; 
        }); 
    } else if (args.requestType === 'eventRemove') { 
      axios 
        .post('http://localhost:54738/Home/Delete', args.data[0]) 
        .then(response => { 
          var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
          schObj.eventSettings.dataSource = response.data; 
        }); 
    } 
  } 
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Satheesh Kumar B

YO Yosi replied to Satheesh Kumar Balasubramanian January 17, 2022 04:09 PM UTC

Hey, im using tsx like your tutorial in youtube.

Do you have a tsx version of exactly this? thank you so much!


And where do you define the datasource in the class component?


BS Balasubramanian Sattanathan Syncfusion Team January 18, 2022 04:53 PM UTC

We have prepared React TSX sample for your reference which can be available from the below link. You can define the datasource anywhere in the Class component and can use it through this variable.

Sample: https://stackblitz.com/edit/ej2-react-tsx-schedule-app-customization-7o59ot?file=package.json


YO Yosi January 19, 2022 09:16 AM UTC

Hey ty so much, I managed to get it with jsx functional component, it only works without resource. When I add groupData of resources. data is dissapearing... im saving the resource ids in the db with the tasks from args.data. please help with that :)

its actually the groupdata which ruins it for me , im attaching groupData as followed in the video


BS Balasubramanian Sattanathan Syncfusion Team January 21, 2022 06:58 AM UTC

Can you please share your scheduler related code snippet along with the package version and error messages that you have faced while adding groupData? It will be very helpful to validate the issue and provide a prompt solution ASAP?


Marked as answer
YO Yosi January 21, 2022 10:36 AM UTC

Hey! I got it to work, the problem was the resourceId was passed as a string to the db instead of integer.

Now I have a custom dropdown I made in the editor window of mission status. I want to have a green background when mission is complete, and red when not etc. I managed to color all missions on click but not a specific one.. any help on that ?

ty so much!


BS Balasubramanian Sattanathan Syncfusion Team January 24, 2022 08:20 AM UTC

We have achieved your requirement by using eventRendered and popupOpen events of the Scheduler like the below code snippet. 

private onEventRendered(args) {

  switch (args.data.EventType) {

    case 'completed':

      args.element.style.backgroundColor = 'green';

      break;

    case 'onhold':

      args.element.style.backgroundColor = 'yellow';

      break;

    case 'rejected':

      args.element.style.backgroundColor = 'red';

      break;

  }

}

private onPopupOpen(args: PopupOpenEventArgs): void {

  if (args.type === 'Editor') {

    // Create required custom elements in initial time

    if (!args.element.querySelector('.custom-field-row')) {

      let row: HTMLElement = createElement('div', { className: 'custom-field-row' });

      let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');

      formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);

      let container: HTMLElement = createElement('div', { className: 'custom-field-container' });

      let inputEle: HTMLInputElement = createElement('input', {

        className: 'e-field', attrs: { name: 'EventType' }

      }) as HTMLInputElement;

      container.appendChild(inputEle);

      row.appendChild(container);

      let dropDownList: DropDownList = new DropDownList({

        dataSource: [

          { text: 'Completed', value: 'completed' },

          { text: 'Onhold', value: 'onhold' },

          { text: 'Rejected', value: 'rejected' }

        ],

        fields: { text: 'text', value: 'value' },

        value: args.data.EventType as string,

        floatLabelType: 'Always', placeholder: 'Chosse event Type'

      });

      dropDownList.appendTo(inputEle);

      inputEle.setAttribute('name', 'EventType');

    }

  }

}


Sample: https://stackblitz.com/edit/ej2-react-tsx-schedule-app-customization-ycjusf?file=index.tsx

Kindly refer and follow the above solution and let us know if this is helpful.


YO Yosi replied to Balasubramanian Sattanathan February 13, 2022 12:10 PM UTC

Thank you so much mate!

I’m trying to implement weather by user input in the header of each day. 

I added an input of weather type in the modal editor. Now I want the weather that the user inputed be in each header related to the day he picked when editing/creating a mission in the modal window.


I saw the weather in case of day in your docs. Could figure out how to make it related to the editor window modal and weather type field I added there.

Thanks in advance!!!


BS Balasubramanian Sattanathan Syncfusion Team February 14, 2022 02:18 PM UTC


Hi Yosi,

We can have the WeatherType in the editor window by using the editorTemplate property of the Scheduler like the below sample.

Code snippet:

editorTemplate(props) {

. . .

. . .

            <DropDownListComponent id="WeatherType" placeholder='Choose weather' data-name='WeatherType' className="e-field" style={{ width: '100%' }} dataSource={['Cloudy', 'Rainy', 'Clear']}>

            </DropDownListComponent>

. . .

. . .

}
. . .

. . .
<ScheduleComponent width='100%' height='650px' cssClass='schedule-date-header-template' ref={t => this.scheduleObj = t} renderCell={this.onRenderCell.bind(this)} editorTemplate={this.editorTemplate.bind(this)} selectedDate={new Date(2021, 0, 10)} eventSettings={{ dataSource: this.data }} dateHeaderTemplate={this.dateHeaderTemplate.bind(this)}>

. . .

. . .

</ScheduleComponent>


Sample: https://stackblitz.com/edit/react-rcjvvu

UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#customizing-event-editor-using-template

Kindly try the above solution and let us know if this meets your requirement.

Regards,
Balasubramanian S


YO Yosi February 15, 2022 07:53 PM UTC

Hey, ty for the fast answer!

I want to put user input of weather in header. If he picks rainy I put rainy photo on the header of that day.

I managed to make the dropdown list with the weather options. My problem is displaying the weather in the header, according to the day picked.

I’m using tsx stateless component and having hard time with the class example unfortunately.


Would appreciate your help!! Ty so much


BS Balasubramanian Sattanathan Syncfusion Team February 16, 2022 03:47 PM UTC

Hi Yosi,

We regret to let you know that your requirement with the DateHeader is not feasible at our end according to the Scheduler architecture. 

Kindly create a new thread if you have any other queries. We will be happy to assist you.

Regards,
Balasubramanian S


Loader.
Up arrow icon