Displaying events in ej2-angular-schedule for view 'TimelineYear'

[Tomaž]

Hello,

If I run component with scheduler with default currentView value is 'Day', then events are displayed on the scheduler.

If I run scheduler with default currentView value is 'TimelineYear', then events are not displayed on the scheduler.

In both cases, the data was loaded in the background. For 'Day', onDataBound was fired, but for 'TimelineYear', onDataBound was not fired. This is the only difference I notice.

I am using Angular v20 and Signal.

I would appreciate your help. Thank you.

Tomaž

[Vijay Ravi]

Hi Tomaz,

Greetings from Syncfusion Support.
 

We have reviewed your query and validated it against your requirement. We tested the Schedule in both TimelineDay and TimelineYear views, and appointments rendered correctly in both cases also dataBound event also fired properly in both views. We could not reproduce the issue.

 

We suspect that resource grouping might be enabled in your TimelineYear view. If grouping is enabled, each appointment record must include the corresponding resource groupId. If the problem persists, kindly share the below details for further investigation.

 

1. Share a minimal sample that replicates the problem, or
2. Replicate the issue in our shared sample.
3. Share the entire code snippets,

 

Sample link: https://stackblitz.com/edit/angular-erekomwu-jophktho?file=src%2Fapp.component.ts

 

Please get back to us with the required details for further assistance.

Regards,

Vijay

[Tomaž]

Hi Vijay,

you were absolutely right. The problem is in [group]='group'. If I removed [group]='group' from the html where ejs-schedule was, it worked ok, but without grouping. Then I added e-views to the html at ejs-schedule and it started working again with [group]='group' included.

It was crucial that I added  e-views.

The last, working code:

@if (ownerDataSource()?.length >= 0) {

        <ejs-schedule

          #scheduleObj  

          locale='sl'

          [dateFormat]="dateFormat" [firstDayOfWeek]="weekFirstDay"

          width='auto' height='100%' style="overflow: auto;"

          [timeFormat]="timeFormat" [workHours]="scheduleHours"  

          [eventSettings]="eventSettings" [selectedDate]="selectedDate"

          [views]='views' [group]='group'

          (popupOpen)="onPopupOpen($event)"

          (actionComplete)="onActionComplete($event)"

          (dataBound)="onDataBound($event)"

          [currentView]="currentView">

          <e-resources>

            <e-resource field="OwnerId" title="Owner" name="Owners"

              [dataSource]="ownerDataSource()" [allowMultiple]="allowMultipleOwner"

              textField="OwnerText" idField="Id" colorField="OwnerColor">

            </e-resource>

          </e-resources>

          <e-views>

            <e-view option="Day"></e-view>

            <e-view option="TimelineDay"></e-view>

            <e-view option="Week"> </e-view>

            <e-view option="TimelineWeek"></e-view>

            <e-view option="Agenda"></e-view>

            <e-view option="Month"></e-view>

            <e-view option="TimelineMonth"></e-view>

            <e-view option="MonthAgenda"></e-view>

            <e-view option="TimelineYear"></e-view>

          </e-views>

          <ng-template #groupHeaderTooltipTemplate let-data>

            <div class='template-wrap'>

                <div class="res-text">

                  @if (data && data?.resourceData && data?.resourceData?.OwnerText) {

                    {{data.resourceData.OwnerText}}

                  } @else {

                  -

                  }

                </div>

            </div>

          </ng-template>

        </ejs-schedule>

      }

Thank you very much for your help. I wish you all the best.

Tomaž

[Saritha Sankar]

Hi Tomaž,

You're welcome. We are glad the response provided was helpful for you. Please get back to us if you need any further assistance. 

Regards,
Saritha S.