Scheduler toolbar with template

[Max Melcher]

Hi team, 

is it planned to have a ng-template in the scheduler component for the toolbar? We currently use the 

[toolbarItems]="[

                    { name: 'Previous', align: 'Left' },

                    { name: 'Next', align: 'Left' },

                    { name: 'DateRangeText', align: 'Left' },

                    { name: 'Today', align: 'Left' }

                ]"

but if we want to add other buttons it becomes less ideal to handle.

Thanks,
Max

[Swathi Ravi]

Hi Max,

Thank you for reaching out to us!

I'm pleased to inform you that you can indeed use ng-template to create a custom toolbar in the Scheduler component. This will allow you to add additional buttons as needed. Below is an example of how to implement this:

<div class="control-section">

  <div class="col-lg-9">

    <ejs-schedule #scheduleObj id="schedule" width='100%' height='650px' [selectedDate]="selectedDate"

      [eventSettings]="eventSettings" [(currentView)]="currentView" [showHeaderBar]="showHeaderBar">

      <e-views>

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

      </e-views>

      <e-toolbaritems>

        <e-toolbaritem name="Previous" align="Left"></e-toolbaritem>

        <e-toolbaritem name="Next" align="Left"></e-toolbaritem>

        <e-toolbaritem name="DateRangeText" align="Left"></e-toolbaritem>

        <e-toolbaritem name="Today" align="Right"></e-toolbaritem>

        <e-toolbaritem name="Custom" align="Right">

          <ng-template #template>

            <button (click)="onButtonClick()">Button1</button>

          </ng-template>

        </e-toolbaritem>

        <e-toolbaritem name="Custom" align="Right">

          <ng-template #template>

            <button (click)="onButtonClick()">Button2</button>

          </ng-template>

        </e-toolbaritem>

      </e-toolbaritems>

    </ejs-schedule>

  </div>

</div>

Sample: https://stackblitz.com/edit/angular-scheduler-custom-toolbar?file=src%2Fapp.component.html

Demo: https://ej2.syncfusion.com/angular/demos/#/fluent2/schedule/header-bar

If you have any further questions or need assistance with anything else, feel free to ask!

Regards,

Swathi Ravi

[Max Melcher]

Thanks - your support rocks! :)

[Swathi Ravi]

Max, you are most welcome. Get back to us if you need any further assistance.

[Max Melcher]

Hi @Swathi,

when I add the template to the schedule it breaks.

Template:

"@syncfusion/ej2-angular-schedule": "^27.1.51",​

<e-toolbaritems>

                    <e-toolbaritem name="Custom" align="Right">

                        <ng-template #template >

                          <button>Button1</button>

                        </ng-template>

                      </e-toolbaritem>

                </e-toolbaritems>

Error:

core.mjs:7191 ERROR TypeError: _this.getModuleName is not a function

    at clearTemplate (util.js:73:63)

    at ComplexBase2.clearTemplate (complex-array-base.js:75:5)

    at ArrayBase2.clearTemplate (complex-array-base.js:212:12)

    at _loop_1 (util.js:123:26)

    at clearTemplate (util.js:131:5)

    at ComponentBase2.clearTemplate (component-base.js:195:5)

    at Schedule2.resetTemplates (schedule.js:212:12)

    at Render2.initializeLayout (renderer.js:30:19)

    at Render2.render (renderer.js:16:10)

    at Schedule2.initializeView (schedule.js:489:23)

Version: 

"@syncfusion/ej2-angular-schedule": "^27.1.51",

The button renders in the toolbar, but the schedule does not render:

If I remove the template, it renders.

Please advise.

Thanks,

Max

[Ram Raju Elaiyaperumal]

Hi Max Melcher,

Based on the error details you have provided, we attempted to replicate the issue on our end. Unfortunately, we were unable to reproduce the error. We have modified the schedule version in the previously provided sample to the version you have mentioned and checked for the issue, but still couldn’t replicate it. You can check our sample here:

https://stackblitz.com/edit/angular-scheduler-custom-toolbar-1bhkm3

To assist you better, it would be helpful if you could provide more details about your setup or a simple sample that replicates the issue or code snippet of complete scheduler block. Alternatively, you could try to replicate the issue in the provided sample and share the steps you took. This will help us identify the root cause of the problem and provide you with a more accurate solution.

Regards,

Ram