Angular: minicalendar not work

Scheduler Javascript
#1

Hello,
When using dhtmlxScheduler with Angular, the mini calendar does not work.

I followed the instructions here
https://docs.dhtmlx.com/scheduler/minicalendar.html

But when I click on the mini calenadar icon, I get this error (in the Chrome console):

dhtmlxscheduler_minical.js:10 Uncaught ReferenceError: getOffset is not defined at Object.scheduler.renderCalendar (dhtmlxscheduler_minical.js:10) at show_minical (<anonymous>:7:19) at HTMLDivElement.onclick (VM4641 scheduler:27) scheduler.renderCalendar @ dhtmlxscheduler_minical.js:10 show_minical @ VM4573:7 onclick @ VM4641 scheduler:27

I use dhtmlxScheduler 4.4.9

How to correct this problem?
Thanks in advance

#2

Hi,

I am experiencing the same issue, did you find a solution?

I have an Angular 5 app.

I am using the PRO evaluation version and installed it by copying the package.json from the opensource version into the evaluation folder and running yarn add file:/path-to-file.

In my component, I have:

import "dhtmlx-scheduler";
import "dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline";
import "dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_minical";

...
showMinical() {
        if (this.scheduler.isCalendarVisible()) {
            this.scheduler.destroyCalendar();
        } else {
            this.scheduler.renderCalendar({
                position: "dhx_minical_icon",
                date: this.scheduler._date,
                navigation: true,
                handler: function (date, calendar) {
                    this.scheduler.setCurrentView(date);
                    this.scheduler.destroyCalendar();
                }
            });
        }
    }

And in my html I have:

<div #scheduler_here class="dhx_cal_container" style="width: 100%; height:100vh">
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
        <div class="dhx_minical_icon" id="dhx_minical_icon" (click)="showMinical()">&nbsp;</div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>
</div>

The calendar icon appears and when I click it, showMinical() is triggered but it then returns the error in the original poster’s post:

ERROR ReferenceError: getOffset is not defined
at Object.e.renderCalendar (dhtmlxscheduler_minical.js:10)
at ScheduleChartComponent.showMinical (schedule-chart.component.ts:67)
at Object.eval [as handleEvent] (ScheduleChartComponent.html:10)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)
at HTMLDivElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)

Does anyone have any ideas?

#3

Extensions of dhtmlxScheduler must be included only after the core file dhtmlxsheduler.js
When you are working with script includes it means that you are adding a script tag for dhtmlxscheduler.js first, and script tags for extensions after that.

In case of import, the situation is a more complicated, as import doesn’t guarantee that imported sources will be processed in the defined orders. If you are using webpack – try to use script-loader for scheduler’s file, which will preserve an order of includes and will fix the issue.