renderCell and dataBinding

[Ivan]

Hello, 

Is it possible to call renderCell after dataBinding?

on dataBinding in result I have  nonWorkingDays object e.actual.nonWorkingDays. Based ond that object/array I want to have label on cell thate represents description of non working day.

ex. nonWorkingDays = {"25-12-2020", "Christmas"}

and on fetching data fore selected period ( dataBinding ) I want to setup all cells on 25-12 to have label Christmas.

I use 2 types of view 

  a) 1 day with all or one selected resource - here I want to target all cells in 30.05 ( it is holiday in Croatia ) for every resource

  b) 1 week with one selected resource  - here I want to target all cells in 30.05 ( it is holiday in Croatia )

Thanks in advance!

KR,
Ivan

[Hareesh Balasubramanian]

Hi Ivan, 

Greetings from Syncfusion Support…! 

No, it not possible to call renderCell event after the dataBinding event. We have also validated your requirement and suspect that your requirement is to fill all cells in particular date with the label and that you need to prevent the rendering of an event for those cells. By setting IsBlock field in datasource we can achieve this requirement by making use of block events. We have prepared below sample for your reference. 

https://stackblitz.com/edit/fhwfgh-4twtv7?file=index.js 

Code snippet: 

  dataBinding: function (args) { 

    var Holiday = new Date(2019, 0, 8); 

    var blockedData = []; 

    if (tempVal) { 

      var resCol = this.resourceCollection[0].dataSource; 

      for (var i = 0; i < resCol.length; i++) { 

        var data = { 

          Id: this.eventSettings.dataSource.length + 1, 

          IsBlock: true, 

          ConferenceId: resCol[i].Id, 

          Subject: 'Holiday Event', 

          StartTime: Holiday, 

          EndTime: Holiday, 

          IsAllDay: true 

        }; 

        blockedData.push(data); 

      } 

      this.addEvent(blockedData); 

      tempVal = false; 

    } 

  } 

 

And for further reference, kindly refer to the below UG link, 

https://ej2.syncfusion.com/javascript/documentation/schedule/appointments/?no-cache=1#block-dates-and-times 

 

Kindly try the above solution and revert us if you have any further assistance. 

Regards, 

Hareesh 

[Ivan]

Hello, 

thanks for the answer. 

My goal is not to prevent creating new appointments on this dates, just to inform person of their schedule - so using block flag is not an option.

is there any way to access all cells from specific date and set specific css class and set innerHTML ( something like renderCell, but after dataBind )?

EDIT:

I think I found solution:

let cells = _scheduler.element.querySelectorAll('.e-work-cells');
for (let k = 0; k < cells.length; k++) {
   let elem = $(cells[k]);
   let timestamp = elem.attr('data-date');
   let localDateString = moment(timestamp / 1000, 'X').format('YYYY-MM-DD');

   if (localDateString === dateText) {
      elem.addClass('non-working-day-' + employeeDataArr[0].UnreachableReason);
      elem.removeClass('non-working-cell');
      elem.html(_obligationsTranslate(employeeDataArr[0].UnreachableReason));
   }
}

Here I fetch all work cells and check date with moment. If matched, add class and label.


KR, 
Ivan

[Hareesh Balasubramanian]

Hi Ivan, 

Thanks for the update. 

We have validated your reported query “is there any way to access all cells from specific date and set specific css class and set innerHTML” at our end. And for that, we have modified our previously updated sample and it can be viewed from the following link. 

Code snippet: 

  dataBinding: function (args) { 

    var Holiday = new Date(2019, 0, 8); 

    var cellEle = document.querySelectorAll('.e-work-cells'); 

    for (var i = 0; i < cellEle.length; i++) { 

      var date = parseInt(cellEle[i].getAttribute("data-date")); 

      if (new Date(date).setHours(0, 0, 0, 0) === Holiday.getTime()) { 

        cellEle[i].classList.add('custom'); 

        cellEle[i].innerText = "Customized"; 

      } 

    } 

  } 

And also we have modified the cells background color for the particular date and for further reference kindly refer to the below code snippet. 

            .custom { 

              background-color: darkgray !important; 

            } 

Sample: https://stackblitz.com/edit/fhwfgh-vnxavp?file=index.js 

Kindly try the above solution and revert us if you have any further assistance. 

Regards, 

Hareesh