Skip to content

Commit

Permalink
feat: Added actions to events shown in slidebox
Browse files Browse the repository at this point in the history 
Use CalendarEvent's EventAction interface to implement some events rendered on the monthview's
slidebox

fixes mattlewis92#5
  • Loading branch information
@gordon-to
gordon-to committed Jul 11, 2016
1 parent 6d555a4 commit fa7ec3a
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 98 deletions.
218 changes: 121 additions & 97 deletions demo/demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,103 +67,105 @@ export class DemoApp {

private date: Date = new Date();

private events: CalendarEvent[] = [{
start: moment().startOf('week').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(1, 'minutes').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(2, 'minutes').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(1, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(2, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(3, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'Another event',
color: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
}, {
start: moment().startOf('week').add(1, 'minutes').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'Another event',
color: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
}, {
start: moment().startOf('week').subtract(3, 'days').toDate(),
end: moment().endOf('week').add(3, 'days').toDate(),
title: 'My event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
}, {
start: moment().startOf('week').add(1, 'days').toDate(),
end: moment().startOf('week').add(3, 'days').toDate(),
title: '3 day event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
}, {
start: moment().startOf('week').add(1, 'days').toDate(),
end: moment().startOf('week').add(2, 'days').toDate(),
title: '2 day event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
private events: CalendarEvent[] = [
{
start: moment().startOf('week').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(1, 'minutes').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(2, 'minutes').add(4, 'days').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'A final event',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(1, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(2, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').add(3, 'minutes').add(6, 'days').toDate(),
end: moment().endOf('week').toDate(),
title: 'I should be last',
color: {
primary: '#ad2121',
secondary: '#FAE3E3'
}
}, {
start: moment().startOf('week').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'Another event',
color: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
}, {
start: moment().startOf('week').add(1, 'minutes').toDate(),
end: moment().startOf('week').add(5, 'days').toDate(),
title: 'Another event',
color: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
}, {
start: moment().startOf('week').subtract(3, 'days').toDate(),
end: moment().endOf('week').add(3, 'days').toDate(),
title: 'My event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
}, {
start: moment().startOf('week').add(1, 'days').toDate(),
end: moment().startOf('week').add(3, 'days').toDate(),
title: '3 day event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
}, {
start: moment().startOf('week').add(1, 'days').toDate(),
end: moment().startOf('week').add(2, 'days').toDate(),
title: '2 day event',
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
}
}];
];

private slideBoxIsOpen: boolean = false;

Expand All @@ -177,13 +179,35 @@ export class DemoApp {
color: {
primary: '#1e90ff',
secondary: '#D1E8FF'
}
},
actions: [
{
label: `Log Title`,
click: (event: CalendarEvent) => {
console.log(event.title);
}
},
{
label: `Delete`,
click: (event: CalendarEvent) => {
this.delete(event);
}
}
]
});
}
}

}

delete(event: CalendarEvent) {
let index = this.events.indexOf(event);
this.events = [
...this.events.slice(0, index),
...this.events.slice(index + 1, -1)
];
}

increment(): void {
this.date = moment(this.date).add(1, this.view).toDate();
}
Expand Down
6 changes: 5 additions & 1 deletion src/calendarMonthView.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ import {
[ngClass]="event?.cssClass">
<span class="event" [style.backgroundColor]="event.color.primary"></span>
{{ event.title }}
<ul *ngIf="event.actions">
<li *ngFor="let action of event.actions" (click)="action.click(event)">{{action.label}}</li>
</ul>
</div>
</div>
</div>
Expand Down Expand Up @@ -205,6 +208,7 @@ export class CalendarMonthView implements OnChanges {
@Input() events: CalendarEvent[] = [];
@Input() slideBoxIsOpen: boolean = false;
@Output() dayClicked: EventEmitter<any> = new EventEmitter();
@Output() eventClicked: EventEmitter<any> = new EventEmitter();

private columnHeaders: WeekDay[];
private view: MonthView;
Expand All @@ -226,7 +230,7 @@ export class CalendarMonthView implements OnChanges {
});
}

if (changes.slideBoxIsOpen || changes.date) {
if (changes.slideBoxIsOpen || changes.date || changes.events) {
if (this.slideBoxIsOpen === true) {
this.openDay = this.view.days.find(day => day.date.isSame(moment(this.date).startOf('day')));
const index: number = this.view.days.indexOf(this.openDay);
Expand Down

0 comments on commit fa7ec3a

Please sign in to comment.