Schedueler error group

[Eusébio Joveth]

I'm working with the scheduler component in angular I want to group my tasks by user in the sheduler when I use the [group]="GroupData" property defined in my ts the scheduler does not render my tasks it gives the following error:

ERROR TypeError: Cannot read properties of null (reading 'generateResourceLevels')

    at VerticalView2.generateColumnLevels (vertical-view.js:186:53)

    at VerticalView2.renderLayout (vertical-view.js:454:31)

    at Render2.initializeLayout (renderer.js:118:32)

    at Render2.render (renderer.js:14:14)

    at Schedule2.initializeView (schedule.js:436:27)

    at Schedule2.renderElements (schedule.js:227:14)

    at Schedule2.initializeResources (schedule.js:196:18)

    at Schedule2.render (schedule.js:136:14)

    at Component4.appendTo (component.js:255:18)

    at appendToComponent (component-base.js:151:35)

    at component-base.js:157:17

I'm using angular version 17 and the scheduler version is "@syncfusion/ej2-angular-schedule": "^25.2.3",

component html 

            <ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [group]="groupData">

              <e-views>

                <e-view option="Day" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="Week" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="WorkWeek" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="Month" [showWeekend]="showWeekend"></e-view>

            </e-views>

            <e-rsources>

              <e-resource field="ConsultantID" title="Resource Name" name="Resources" textField="Name" idField="Id" colorField="Color"

              [dataSource]="consultantDataSource">

              </e-resource>

            </e-rsources>

            </ejs-schedule>

Component ts

@Component({

  selector: 'app-planner',

  standalone: true,

  imports: [CommonModule,FormsModule,  ReactiveFormsModule, MatCardModule, MatIconModule,

    MatAutocompleteModule, ScheduleModule, TreeViewModule,TabModule, ],

  providers: [DayService, TimelineViewsService, WeekService, WorkWeekService, MonthService, AgendaService,

     ResizeService, DragAndDropService,

  ],

  templateUrl: './planner.component.html',

  styleUrl: './planner.component.scss',

  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class PlannerComponent implements OnInit {

  @ViewChild('scheduleObj') public scheduleObj!: ScheduleComponent;

  @ViewChild('treeObj') public treeObj!: TreeViewComponent;

  @ViewChild('resourceHeaderTemplate') resourceHeaderTemplate!: TemplateRef<any>;

  public isTreeItemDropped = false;

  public draggedItemId = '';

  public data: any[] = hospitalData;

  public selectedDate: Date = new Date();

  public currentView: View = 'Month';

  public workHours: WorkHoursModel = { start: '08:00', end: '18:00' };

  public showWeekend: boolean = false;

  public consultantDataSource: object[] = [

    { Name: 'Alice', Id: 1, GroupId: 1, Color: '#ffaa00', Designation: 'Cardiologist',ImageUrl: 'assets/images/consultor1.jpg' },

    { Name: 'Nancy', Id: 2, GroupId: 2, Color: '#f8a398', Designation: 'Orthodontist', ImageUrl: 'assets/images/consultor1.jpg' },

    { Name: 'Robert', Id: 3, GroupId: 1, Color: '#7499e1', Designation: 'Optometrist', ImageUrl: 'assets/images/consultor1.jpg' },

    { Name: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist', ImageUrl: 'assets/images/consultor1.jpg' },

    { Name: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic', ImageUrl: 'assets/images/consultor1.jpg' },

    { Name: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist', ImageUrl: 'assets/images/consultor1.jpg' }

  ];

  public groupData!: GroupModel;

  public allowMultiple = false;

  public eventSettings: EventSettingsModel = {

    dataSource: this.data,

  };

  public field: Record<string, any> = { dataSource: waitingList, id: 'Id', text: 'Name' };

  public allowDragAndDrop = true;

  filteredOptions!: Observable<any[]>;

  genericControl = new FormControl();

  ngOnInit(){

    this.groupData = {

      resources: ['Resources'],

      enableCompactView: true,

     };

  }

I am using "@syncfusion/ej2-angular-schedule" version: "^25.2.3",

[Swathi Ravi]

Hi Eusebio Joveth,

Thank you for reaching out to us!

The issue you are experiencing is due to a typo in the <e-rsources> tag in your HTML code. It should be <e-resources>, not <e-rsources>. This is causing the error in your Scheduler component.

Additionally, we recommend removing the schemas: [CUSTOM_ELEMENTS_SCHEMA] from your component configuration. By doing so, Angular will display the appropriate warnings if there are issues with the custom elements, which can help in debugging.

Here is the corrected version of your code:

  <ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [group]="groupData">

    <e-views>

      <e-view option="Day" startHour="08:00" endHour="18:00"></e-view>

      <e-view option="Week" startHour="08:00" endHour="18:00"></e-view>

      <e-view option="WorkWeek" startHour="08:00" endHour="18:00"></e-view>

      <e-view option="Month" [showWeekend]="showWeekend"></e-view>

  </e-views>

  <e-resources>

    <e-resource field="ConsultantID" title="Resource Name" name="Resources" textField="Name" idField="Id" colorField="Color"

    [dataSource]="consultantDataSource">

    </e-resource>

  </e-resources>

  </ejs-schedule>

Sample: https://stackblitz.com/edit/angular-1xq7v3-d5wczq?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you have any further questions or need additional assistance, feel free to ask. We are always happy to help!

Regards,

Swathi

[Eusébio Joveth]

Thanks for the correction.

Another problem arose when trying to customize the resourceHeaderTemplate the scheduler stops displaying the activities.

<ejs-schedule  #scheduleObj cssClass='schedule-drag-drop' width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [group]="groupData">

              <e-views>

                <e-view option="Day" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="Week" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="WorkWeek" startHour="08:00" endHour="18:00"></e-view>

                <e-view option="Month" [showWeekend]="showWeekend"></e-view>

            </e-views>

            <e-resources>

              <e-resource field="ConsultantID" title="Resource Name" name="Resources" textField="Name" idField="Id" colorField="Color"

              [dataSource]="consultantDataSource">

              </e-resource>

            </e-resources>

           <ng-template #resourceHeaderTemplate let-data>

              <div class="template-wrap">

                <div class="employee-category">

                  <div>

                    <img src="{{data?.ImageUrl}}" alt="{{data?.Name }}" class="employee-image" />

                  </div>

                  <div class="employee-name">{{data?.Name }}</div>

                  <div class="employee-designation">{{data?.Designation}}</div>

                </div>

              </div>

            </ng-template>

            <ng-template #eventSettingsTemplate let-data>

              <div class='template-wrap'>

                <div class="subject">{{data?.Description}}</div>

              </div>

            </ng-template>

</ejs-schedule>

           

[Swathi Ravi]

Eusebio Joveth,

It seems there may be some duplicate packages installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the steps provided below to overcome the reported problem. 

  

• Delete package.lock.json file from your application. 
• Remove the @syncfusion  package folder from the node_modules.
• Then install the new packages. 

 

For detailed guidance, you can refer to the following link: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package 

   

Could you please follow the above step and get back to us with package.lock.json file if you still facing the same problem?  

Additionally, we noticed a small adjustment needed in your resourceHeaderTemplate. Instead of accessing properties directly from data, you should reference them through data.resourceData. Here is the corrected template:

 <ng-template #resourceHeaderTemplate let-data>

    <div class="template-wrap">

      <div class="employee-category">

        <div>

          <img src="{{data?.resourceData.ImageUrl}}" alt="{{data?.resourceDataName }}" class="employee-image" />

        </div>

        <div class="employee-name">{{data?.resourceData.Name }}</div>

        <div class="employee-designation">{{data?.resourceData.Designation}}</div>

      </div>

    </div>

  </ng-template>

Sample for reference: angular-scheduler-with-resources (forked) - StackBlitz

If you have any further questions or need additional assistance, please don’t hesitate to reach out.

[Eusébio Joveth]

Hello Mark.

I'm facing a problem with the scheduler in Angular and I don't know if you can help me.

I'm using the scheduler component and the TimelineMonth view. I want to display all the days of the month without having to display horizontal scrolling. I tried using a class to add custom styles but it seems to have no effect on the scheduler component.

html code

<div class="schedule-container">

              <ejs-schedule  #scheduleObj cssClass='schedule-cell-dimension' width='100%' height='650px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [group]="groupData"

              [allowInline]="allowInline"  (actionBegin)="onActionBegin($event)" (dragStart)="onDragStartS($event)" (resizeStart)="onResizeStart($event)" (drag)="onItemDrag($event)"

              [rowAutoHeight]="rowAutoHeight" [firstDayOfWeek]="weekFirstDay" [showWeekend]="showWeekend" [workDays]='workWeekDays'

              (actionComplete)="onActionComplete($event)" (eventClick)="onEventClick($event)"

              (cellClick)="onCellClick($event)" (popupOpen)="onPopupOpen($event)" [showQuickInfo]='showQuickInfo'

              >

              <e-resources>

                <e-resource field="employeeId" title="Resource Name" name="Resources" textField="name" idField="id" colorField="color" imageUrlField="ImageUrl"

                [dataSource]="usersDataSource">

                </e-resource>

              </e-resources>

              <e-views>

                <e-view option="TimelineMonth" startHour="08:00" endHour="18:00"></e-view>

            </e-views>

             <ng-template #resourceHeaderTemplate let-data>

              @if(data){

                <div class="template-resource">

                  <div class="employee-category d-flex ">

                    <div>

                      @if(data && data.resourceData.photoUrl!= "" && data.resourceData.photoUrl!= null ){

                        <img src="{{data?.resourceData.photoUrl}}" alt="" class="employee-image" />

                      }@else {

                        <div class="d-flex align-items-center justify-content-center sigla-name"><strong>{{getIniciais(data?.resourceData.name)}}</strong></div>

                      }

                    </div>

                    <div class="d-flex flex-column align-items-center justify-content-center mt-2">

                      <span class="fw-bold ms-1 me-1">{{data?.resourceData.name }}</span>

                      <span class="fst-italic">{{data?.resourceData.occupation}}</span>

                    </div>

                  </div>

                </div>

              }

              </ng-template>

              <ng-template #eventSettingsTemplate let-data>

                <div class='template-wrap'>

                  <div class="subject">{{data?.Subject}}</div>

                </div>

              </ng-template>

              </ejs-schedule>

           

            </div>

scss code

.schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,

.schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {

    width: 200px;

}

.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {

    width: 200px;

}

.schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td,

.schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {

    height: 100px;

}

.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {

    height: 200px;

}

[Vijay Ravi]

Eusébio Joveth,
 

We have reviewed and validated the HTML code and CSS styles you shared. It appears that you are using the timelineMonth view; however, the .e-timeline-month-view selector is missing in your CSS customization, which has caused the override styles not to reflect in the timelineMonth view. Please refer to the styles and sample provided below for a reference on displaying all days of the month without a scrollbar.

[app.component.css]
 

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col,

.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {

  width: 30px;

}

Sample link: https://stackblitz.com/edit/angular-uvmfgu-es1abq?file=src%2Fapp.component.html,src%2Fapp.component.css

Output screenshot:

 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay