Data on a TimelineMonth view with Groups

[Arturo Martinez]

  Im trying to get to display 'data' on the row of the 'TimeLineGrouping'  so far I can only display events on the expand on each member of the group, but I would like to display a number on the row for each day of the Row Group like in the image I Attached, is there a way to archive this?

Im expecting this result, to be able to add a function to each day on the main group row, like counting the number of events on each of the days, so far the main group row don't have any data even when they are events inside the group

Attachment: groups_2.png_8317a166.zip 

[Venkateshwaran Saravanakumar]

Hi Arturo,

Based on your requirements, we have prepared an Angular sample to display the number of events on each day. We achieved this by using the renderCell event, as shown in the highlighted code snippet below. Please try out our shared sample and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/number-of-events-udtxgn?file=src%2Fapp.component.ts

onRenderCell(args: RenderCellEventArgs): void {

    console.log("")

    let filteredData: any;

    if (args.elementType == 'resourceGroupCells' ) {

      

        const dataSource = Object.values(this.scheduleObj.eventSettings.dataSource);

        filteredData = dataSource.filter((data: any) => {

            const dataDate = new Date(data.StartTime);

            const argsDate = new Date(args.date);

            dataDate.setHours(0, 0, 0, 0);

            argsDate.setHours(0, 0, 0, 0);

            debugger

            let groupIndex = this.scheduleObj.getResourcesByIndex(data.ProjectId);

            let argsGroupIndex = this.scheduleObj.getResourcesByIndex(args.groupIndex);

             return data.ProjectId === argsGroupIndex.groupData.ProjectId && dataDate.getTime() == argsDate.getTime(); 

        });

        (args.element as HTMLElement).innerText = filteredData.length.toString();

  }

Regards,
Venkatesh

[Arturo Martinez]

Perfect, just what I was looking for, and is there a way to give it some styling for this row? since the calculations margin are left instead of a center margin

[Ram Raju Elaiyaperumal]

Arturo,

Absolutely, you can adjust the alignment of the text within the table cells to be centered. This can be achieved by overriding the default CSS. Here's the CSS snippet you need:

.e-schedule .e-timeline-view .e-content-wrap table td {

    text-align: center;

}

This CSS rule targets the table data cells (td) within the content wrap of the timeline view in the schedule. It sets the text alignment to center, which should align your text as per your requirement. Please ensure to add this to your existing CSS file or within a <style> tag in your HTML.

For your convenience we have modified the
stackblitz sample, kindly check on the sample: https://stackblitz.com/edit/number-of-events-yy8qe7

Regards,

Ram

[Arturo Martinez]

I have been using this approach and works as expected, but I have a problem when I add a new event by clicking the calendar, its column group dont increases, I try to add the onRenderCell event which calculates the group number of event on the onActionCompete function but onActionComplete function I dont have access to the cells html tag to update it, how can I archive this?

After adding a new event, the group column should be updated by checking the cum of all events on that. day for that specific group

[Ram Raju Elaiyaperumal]

Hi Arturo Martinez,

We understand that the values in the columns are not properly updated when we add new event.

A more efficient approach would be to move the header update logic to the dataBound event. This event is triggered each time an event is added or removed. By updating the header in the dataBound event, you can achieve the desired updates without the performance cost of a full re-render.

To help you implement this solution, we've prepared a sample that demonstrates the use of the dataBound event for updating the header. You can view the sample at the following link: https://stackblitz.com/edit/number-of-events-with-resources-qomdl9

We hope this solution meets your needs of your scheduler. If you have any further questions or need additional assistance, please don't hesitate to ask.

Regards,

Ram

[Arturo Martinez]

Excellent just the event I was looking for, now working as expected thanks!

[Venkateshwaran Saravanakumar]

Hi Arturo,

 

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

 

Regards,

Venkatesh