1. Home
  2. Forum
  3. Angular
  4. formatting the Header cells

formatting the Header cells

Hi,

I am trying to implement the Room Scheduler demo ( https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource )

using the Day and Week views.

I would like to format the header cells which contain the date ( Wed 5 ) and the room names (Jammy).

Thank you very much for any help.

Regards,

Mircea


11 Replies
VM Vengatesh Maniraj Syncfusion Team February 5, 2020 08:32 AM UTC

Hi Mircea, 

Greetings from Syncfusion Support. 

Based on your requirement, we have prepared a sample using Day and Week as views for the Room Scheduler demo sample and it can be viewed from the following link, 


And for further reference kindly refer the below links, 

Kindly try the above sample, if you have any concerns please revert us back for further assistance.  

Regards,  
Vengatesh 


MI Mircea February 5, 2020 09:22 AM UTC

Hi Vengatesh,

Unfortunately your sample did not solve the issues. 
You can see the column headers (cells), the row starting with Jammy and the row starting with Wed 1, are not centered. I also want to color differently those cells.
And please explain to me what are these classes:
.timeline-resource.e-schedule
.e-timeline-view
.e-date-header-wrap
.e-resource-cells

Thank you very much for your help.

Regards,

Mircea


VM Vengatesh Maniraj Syncfusion Team February 6, 2020 11:52 AM UTC

Hi Mircea, 

Thanks for the update. 

Based on your requirement, we have modified our previously updated sample using dateHeaderTemplate property, dataBound event and CSS. And the sample can be viewed from the following link, 


App.component.html 
<ng-template #dateHeaderTemplate let-data> 
                <div class="date-text">{{getDateHeaderText(data.date)}}</div> 
</ng-template> 

App.component.ts 
  onBound(): void { 
    if (this.flag) { 
      let element: any = document.querySelectorAll('.e-resource-cells'); 
      for (let i = 0; i < this.resourceDataSource.length; i++) { 
        element[i + 1].classList.add((this.resourceDataSource[i] as any).text); 
      } 
      this.flag = false; 
    } 
  } 

App.component.CSS 
.date-text,  
.name { 
    text-align: center; 
} 

.Jammy { 
  background-color: #ea7a57 !important; 
} 

.Tweety { 
  background-color: #7fa900 !important; 
} 

.Nestle { 
  background-color: #5978ee !important; 
} 

.Phoenix { 
  background-color: #fec200 !important; 
} 

And please find the explanations for your reported classes, 

.timeline-resource.e-schedule à class name for the timeline resources. 

.e-timeline-view à root class name for the timeline views(TimelineDay, TimelineWeek, TimelineWorkWeek) 

.e-date-header-wrap à class name for the date header sections. 

.e-resource-cells à class name for the resources cells 


Kindly try the above sample, if you have any concerns please revert us back for further assistance.  

Regards,  
Vengatesh 


MI Mircea February 7, 2020 08:25 AM UTC

Hi Vengatesh,

Thank you for your answers. 
I am still confused about your solution. 
First I need to find "getDateHeaderText" function which is not clear:

getDateHeaderText: Function = (value: Date) => {
  return this.instance.formatDate(value, { skeleton: 'Ed' });
};

And second I need to add in the template the following code:

<ng-template #resourceHeaderTemplate let-data>
        <div>
          <div class="name">{{data.resourceData.text}}</div>
        </div>
</ng-template>

What is the resourceData?

And what do you mean by "resources cells"?
What are e-work-cells, e-read-only-cells, e-appointments ?

Thank you very much for your help.

Regards,

Mircea

VM Vengatesh Maniraj Syncfusion Team February 10, 2020 05:51 AM UTC

Hi Mircea, 

Thanks for the update. 

Q1: getDateHeaderText 
 
This is not inbuild function of Scheduler. We just use this to display date with customized format by making use of our internalization library.  
 
public instance: Internationalization = new Internationalization(); 

getDateHeaderText: Function = (value: Date) => { 
    return this.instance.formatDate(value, { skeleton: 'Ed' }); 
  }; 

And, this could be affect in our date header text like below image, 
 

And for more reference about the intenallization library to know the supported date format please visit the below UD documentation link, 


Q2: resourceData:  
Please find the below UG documentation link. 

Q3: resource cells: 
This is the CSS class which is contain the styles of the resource’s cells. Please refer the below image, 
 

Q4: e-work-cells: 
This contains the styles of the cells in Scheduler. 
 

Q5: e-read-only-cells: 
We never used this class in our Scheduler. 
 
Q6: e-appointment: 
Which contains the CSS style of appointments, 
 

Kindly revert us for further assistance. 

Regards, 
Vengatesh  


MI Mircea February 10, 2020 04:38 PM UTC

Hi Vengatesh,

Thank you very much for your explanations. They were very explanatory.
About Q5 I took "e-read-only-cells" from the following code:
onRenderCell(args: RenderCellEventArgs): void {
    if (args.element.classList.contains('e-work-cells')) {
      if (args.date < new Date(2018, 6, 31, 0, 0)) {
        args.element.setAttribute('aria-readonly', 'true');
        args.element.classList.add('e-read-only-cells');
      }
    }
    if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {
      let target: HTMLElement = args.element.querySelector('.e-resource-text') as HTMLElement;
      target.innerHTML = '<div class="name">Rooms</div><div class="type">Type</div><div class="capacity">Capacity</div>';
    }
  }

Anyway, the real question is:
How do you know which are the options for the "classList" property?
Because in the API you find that property and maybe the default value, but you do not know which are the remaining
possible values. Could be: "e-appointment", "e-resource-cells", "e-work-cells", "e-read-only-cells" and so on.
Where can I find all these values for a specific property?

Thank you for your help.

Regards,

Mircea







VM Vengatesh Maniraj Syncfusion Team February 11, 2020 05:54 AM UTC

Hi Mircea, 

Thanks for the update.  

Q5: e-read-only-cells 

We have used this CSS class in the below sample to prevent the popup open. This is sample end CSS class. 
 if (!isNullOrUndefined(target) && target.classList.contains('e-work-cells')) { 
     if ((target.classList.contains('e-read-only-cells')) || (!this.scheduleObj.isSlotAvailable(data))) { 
          args.cancel = true; 
     } 
 } 
  
How do you know which are the options for the "classList" property? 
Based on the functionality, we have added the custom CSS classes in sample end. For the default functionalities, all the recommended CSS classes are added by default.  
 
Where can I find all these values for a specific property?  
It could be based on the property. If we are use the events related property, we can get the e-appointment value and the property is related to work cells, we can get the e-work-cells. The e-resource-cell is available when the project have the resource collection. 
 
Please let us know for further assistance and if we misunderstood your requirement kindly share us your requirement clearly to serve you better. 

Regards, 
Vengatesh  


MI Mircea February 11, 2020 06:46 AM UTC

Hi Vengatesh,

What I understand is you can define some custom CSS classes ( as "e-read-only-cells" ) which you need to provide some functionality. 
And there are some default CSS classes (which are not mentioned in the Schedler API) as the following:

"e-work-cells" are referring to the empty or containing an appointment cells from the Scheduler
"e-appointment" is referring to a cell ( an "e-work-cel") which contain an appointment
"e-resource-cells" are referring to the room names as Jammy, Tweety and so on

What is not clear for me is which are the classes for the time cells ( 1 Wed)?

So let's reformulate my question: in the Scheduler API are defined a lot of properties for different actions, events, directives, but there are not listed the default values.
Another example beside the CSS classes are ActionEventArgs API events in Angular Schedule API component.
In the documentation it is shown "requestType  string  Returns the request type of the current action.", but you do not know the values are "eventCreate" or "eventChange" (or more).

Thank you very much for your explanations.

Regards,
Mircea


VM Vengatesh Maniraj Syncfusion Team February 11, 2020 09:55 AM UTC

Hi Mircea, 

Thanks for the update. 

e-time-cells: 
It is referring the time slot cells(10:00 AM). Please refer the below image 
 

e-header-cells 
it is referring the date header cells(1 Wed). 
 

So let's reformulate my question: in the Scheduler API are defined a lot of properties for different actions, events, directives, but there are not listed the default values. 
Another example beside the CSS classes are ActionEventArgs API events in Angular Schedule API component. 
In the documentation it is shown "requestType  string  Returns the request type of the current action.", but you do not know the values are "eventCreate" or "eventChange" (or more). 


We have consider this as API improvements and we have logged the improvement task at our end. We will include and refresh to online in any of our upcoming release. 

Please let us know for further assistance. 

Regards, 
Vengatesh 


MI Mircea February 11, 2020 10:42 AM UTC

Hi Vengatesh,

Thank you very much for your detailed explanations and for your help.

Regards,

Mircea

VM Vengatesh Maniraj Syncfusion Team February 12, 2020 05:54 AM UTC

Hi Mircea, 

You are most welcome.  

Please get in touch with us if you would require any further assistance. 

Regards, 
Vengatesh 


Loader.
Up arrow icon