innqube / angular-calendar-week-hours-view Goto Github PK

I have this problem, could you please help me?

The event don't line up with the hours on the left

reply as soon as possible

Angular v5.2.10
Angular-calendar-week-hours-view v1.0.1

ERROR Error: StaticInjectorError(he)[n -> e]: 
  StaticInjectorError(Platform: core)[n -> e]: 
    NullInjectorError: No provider for e!
    at t.get (main.0588cac0b8475445b9a3.bundle.js:1)
    at main.0588cac0b8475445b9a3.bundle.js:1
    at t (main.0588cac0b8475445b9a3.bundle.js:1)
    at t.get (main.0588cac0b8475445b9a3.bundle.js:1)
    at main.0588cac0b8475445b9a3.bundle.js:1
    at t (main.0588cac0b8475445b9a3.bundle.js:1)
    at t.get (main.0588cac0b8475445b9a3.bundle.js:1)
    at Ii (main.0588cac0b8475445b9a3.bundle.js:1)
    at t.get (main.0588cac0b8475445b9a3.bundle.js:1)
    at Ii (main.0588cac0b8475445b9a3.bundle.js:1)

This only happens when I execute ng build --prod or ng serve --prod as well.

Hello,
iq-calendar-week-hours-view is very slow when rendering the calendar or editing the data. How can I improve performance?

when i run the project using ionic serve, it show the above error on import section of app.module.ts

Is there a way to add a segment height directive to change the height of each row (as well as the size of the event)

just like:

        <mwl-calendar-week-view-hour-segment
          *ngFor="let segment of hour.segments; trackBy: trackByHourSegment"
          [style.height.px]="hourSegmentHeight"
          [segment]="segment"
   --> [segmentHeight]="hourSegmentHeight"
          [locale]="locale"
          [customTemplate]="hourSegmentTemplate"
          [isTimeLabel]="true"
        >
        </mwl-calendar-week-view-hour-segment>

No provider for CalendarUtils!

When I pass the mouse pointer over an event the tooltip gets displayed and I get the following error:

Uncaught Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'eventWidth: 191.75'. Current value: 'eventWidth: 189.875'.
    at viewDebugError (core.js:9770)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9748)
    at checkBindingNoChanges (core.js:9915)
    at checkNoChangesNodeDynamic (core.js:13991)
    at checkNoChangesNode (core.js:13940)
    at debugCheckNoChangesNode (core.js:14766)
    at debugCheckDirectivesFn (core.js:14668)
    at Object.eval [as updateDirectives] (CalendarWeekHoursViewComponent.html:42)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14650)
    at checkNoChangesView (core.js:13775)

Any clues?

I want to use angular-calendar and angular-calendar-week-hours-view in my ionic application.
I installed all needed packages(angular-calendar, angular-calendar-week-hours-view, @angular/animations). I tried different versions of angular-calendar-week-hours-view, but it didn't help.

My current versions:
"@angular/animations": "^5.2.9",
"angular-calendar": "^0.25.2",
"angular-calendar-week-hours-view": "^1.0.1",

I got this error in console:
CalendarWeekHoursDayViewComponent.html:12 ERROR TypeError: Object(...) is not a function
at DraggableDirective.ngOnInit (angular-draggable-droppable.js:152)
at checkAndUpdateDirectiveInline (core.js:12369)
at checkAndUpdateNodeInline (core.js:13893)
at checkAndUpdateNode (core.js:13836)
at debugCheckAndUpdateNode (core.js:14729)
at debugCheckDirectivesFn (core.js:14670)
at Object.eval [as updateDirectives] (CalendarWeekHoursDayViewComponent.html:12)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
at checkAndUpdateView (core.js:13802)
at callViewAction (core.js:14153)

This error appears when I will add events.

schedule.html (part of the file):
<iq-calendar-week-hours-view
[viewDate]="viewDate"
[events]="events"
[hourSegments]="1"
[dayStartHour]="6"
[dayEndHour]="22"
[weekStartsOn]="1"
[refresh]="refresh"
[locale]="locale">

schedule.ts (part of the file):
protected events: CalendarEvent[] = [
{
start: addHours(startOfDay(new Date()), 7),
end: addHours(startOfDay(new Date()), 9),
title: 'First Event',
cssClass: 'custom-event',
color: {
primary: '#488aff',
secondary: '#bbd0f5'
},
resizable: {
beforeStart: true,
afterEnd: true
},
draggable: true
},
{
start: addHours(startOfDay(new Date()), 10),
end: addHours(startOfDay(new Date()), 12),
title: 'Second Event',
cssClass: 'custom-event',
color: {
primary: '#488aff',
secondary: '#bbd0f5'
},
resizable: {
beforeStart: true,
afterEnd: true
},
draggable: true
}
];
How I can resolve this problem?

Is there any plan to support Angular 6.0+?

Hello,
its possible to put hoursSegment as half hour as well? instead of using only hours

Hi Innqube,

When I load more than two events then my browser keeps freezing, works fine when I load two events.
here I am sending my package.js file dependencies.

My events array: events:

events: CalendarEvent[] = [
    {
      start: addHours(startOfDay(new Date()), 9),
      end: addHours(startOfDay(new Date()), 10),
      title: 'Patient A',
      color: colors.red,
      draggable: true,
      resizable: {
        beforeStart: true,
        afterEnd: true,
      },
    },
    {
      start: addHours(startOfDay(new Date()), 10.5),
      end: addHours(startOfDay(new Date()), 11.5),
      title: 'Patient C',
      color: colors.yellow,
      draggable: true,
      resizable: {
        beforeStart: true,
        afterEnd: true,
      },
    },
  ];

"@agm/core": "1.0.0-beta.2",
"@angular/animations": "6.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "6.0.0",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "2.0.0-rc.9",
"@nebular/security": "2.0.0-rc.9",
"@nebular/theme": "2.0.0-rc.9",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"@swimlane/ngx-charts": "7.0.1",
"angular-calendar": "^0.25.2",
"angular-calendar-week-hours-view": "^1.0.2",
"angular-draggable-droppable": "^3.0.1",
"angular-resizable-element": "^3.1.0",
"angular-tree-component": "7.2.0",
"angular2-chartjs": "0.4.1",
"angular2-toaster": "6.0.0",
"bootstrap": "4.0.0",
"calendar-utils": "^0.1.2",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"date-fns": "^1.29.0",
"echarts": "^4.0.2",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.0.8",
"ng2-ckeditor": "1.1.13",
"ng2-smart-table": "1.2.2",
"ngx-echarts": "2.0.1",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"positioning": "^1.4.0",
"roboto-fontface": "0.8.0",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"socicon": "3.0.5",
"tinymce": "4.5.7",
"typeface-exo": "0.0.22",
"web-animations-js": "2.2.5",
"zone.js": "^0.8.26"

Hi,

I have implemented the code and its work well. I tried dragging the event from one day to other but it doenst work can you please help in this

Hi Innqube,

is there any way to leave the event preview in the week this way?

my view day:

my view week:

my custom template event week:

output of this code:

the weekEvent is empty, maybe I'm using it incorrectly, but the way it is, it should show the json events on the screen along with the "Test", right?

I would like to be able to customize the event and add more information to the event, as is happening in the view per day

Currently, concurrent events are not properly laid out in the day column. If multiple events occur, they will start to be put one next to the other making them difficult to be seen. I find google's calendar approach to be reasonable to handle this situation, making the width of the event boxes inversely proportional to the amount of concurrent events.

The header correctly flags the "past" and "today" css classes on each day, but the day containers do not, which means it is not possible to style the current day differently than others.