Angular-calendar: Customizing event : CalendarEvent[]

[vinay13]

In events: CalendarEvent[] we have colors,start,end,title etc but i want to add few keys of my own .
Is it possible?

[mattlewis92]

You can extend the typescript interface:

interface MyEvent extends CalendarEvent {
  foo: string;
}

events: MyEvent[] = [{
  title: 'title',
  start: new Date(),
  color: {primary: '', secondary: ''},
  foo: 'bar'
}]

Hope that helps!

[no-more]

Hi, thanks a lot I didn't event though about this.

[WouterVanherck]

@mattlewis92 I've tried to implement what you've said but it doesn't seem to work

My interface:

import { CalendarEvent } from 'angular-calendar';

export interface someEvent extends CalendarEvent {
  id: string;
}

calender.component.ts:

import { CalendarEvent } from 'angular-calendar';
import { someEvent } from './spikesEvent.component';

events: someEvent[] = [{
    start: subDays(startOfDay(new Date()), 1),
    end: addDays(new Date(), 1),
    title: 'A 3 day event',
    color: colors.red,
    id: "someID",
  }];

The error:

Type '{ start: Date; end: Date; title: string; color: any; id: string; } | { start: Date; title: string; color: any; id: string...' is not assignable to type 'someEvent[]'.

[mattlewis92]

Can't see what's wrong from that code, please make a plunker that reproduces it (you can fork one from any of the demos)

[WouterVanherck]

Thank you for the insanely quick response.

However, I'm afraid to say that I have no idea how to fork from Github to Plunker.

[mattlewis92]

There is an "edit in plunker" link on all of the demos that you can use to create one. This may help: http://plnkr.co/edit/swkxaG3ZgAemlvueFJHf?p=preview

[WouterVanherck]

Thank you for providing me with a link, I thought that I had to fork the demo first and somehow had to link my forked solution to Plunker. I've also found my mistake. The problem was that I didn't fill the new id-property in all events because I had no idea that was required.

What I had:

events: someEvent[] = [{
    ...
    id: 1,
  }, {
    ...
  }, {
    ...
  }];

What it should have been:

events: someEvent[] = [{
    ...
    id: 1,
  }, {
    ...
    id: 2,
  }, {
    ...
    id: 3,
  }];

[softid123]

How to add extra parameters to events if i am using angularjs 1 version?

[PrasannaKolla]

Is there anyway that we customize to wrap titles vertically in week view and horizontally in day view. I have lengthy titles to display. I am using Angular 5.

[NatsukiReyes]

Se puede agregar texto a los dias?

[PrasanthMV1987]

Argument of type '{ start: Date; title: string; color: any; draggable: false; actionTitle: any; actionComment: any;...' is not assignable to parameter of type 'CalendarEvent<any>'.
  Object literal may only specify known properties, and 'actionTitle' does not exist in type 'CalendarEvent<any>'.
src/app/component/timelog-details/timelog-details.component.ts(358,33): error TS2345: Argument of type '{ start: Date; end: Date; title: string; color: any; draggable: false; actionTitle: any; actionCo...' is not assignable to parameter of type 'CalendarEvent<any>'.
  Object literal may only specify known properties, and 'actionTitle' does not exist in type 'CalendarEvent<any>'.
src/app/component/timelog-details/timelog-details.component.ts(385,33): error TS2345: Argument of type '{ start: Date; title: any; color: any; draggable: false; actionTitle: any; actionComment: any; ac...' is not assignable to parameter of type 'CalendarEvent<any>'.
  Object literal may only specify known properties, and 'actionTitle' does not exist in type 'CalendarEvent<any>'.
src/app/component/timelog-details/timelog-details.component.ts(402,33): error TS2345: Argument of type '{ start: Date; title: string; color: any; draggable: false; actionTitle: any; actionComment: any;...' is not assignable to parameter of type 'CalendarEvent<any>'.
  Object literal may only specify known properties, and 'actionTitle' does not exist in type 'CalendarEvent<any>'.

Is there any way to solve this ?