Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None, // hack to get the styles to apply locally
templateUrl: 'template.html',
// you should really include this CSS in your global stylesheet
styles: [
`
.my-custom-class span {
color: #ff3d7f !important;
}
`
]
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [
{
title: 'Has custom class',
color: colors.yellow,
start: new Date(),
cssClass: 'my-custom-class'
}
];
}
// weekStartsOn option is ignored when using moment, as it needs to be configured globally for the moment locale
moment.updateLocale('en', {
week: {
dow: DAYS_OF_WEEK.MONDAY,
doy: 0
}
});
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [];
}
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent, CalendarView } from 'angular-calendar';
import { colors } from '../demo-utils/colors';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [
{
title: 'Editable event',
color: colors.yellow,
start: new Date(),
actions: [
{
label: '<i class="fa fa-fw fa-pencil"></i>',
onClick: ({ event }: { event: CalendarEvent }): void => {
console.log('Edit event', event);
}
}
]
}
};
@Component({
selector: 'app-calendar',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css'],
encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {
private appointmentId: string;
@ViewChild('modalContent', {static: false}) modalContent: TemplateRef;
view: CalendarView = CalendarView.Month;
CalendarView = CalendarView;
viewDate: Date = new Date();
actions: CalendarEventAction[] = [];
refresh: Subject = new Subject();
events: CalendarEvent[] = [];
activeDayIsOpen = false;
constructor(private modal: NgbModal, private appointmentService: AppointmentService, private router: Router
, private doctorAuthService: DoctorAuthService) {
}
ngOnInit() {
this.appointmentService.getAppointmentListByDoctorId().subscribe(res => {
res.forEach((appointment) => {
let timeEpisode = new Date(appointment.startDateTime);
this.events.push({
<div class="btn btn-primary">
Day
</div>
<br>
`,
})
export class CalendarHeaderComponent {
@Input()
public view: CalendarView = CalendarView.Month;
public CalendarView = CalendarView;
@Input()
public viewDate: Date;
@Input()
public locale: string = 'en';
@Output()
public viewChange: EventEmitter = new EventEmitter();
@Output()
public viewDateChange: EventEmitter = new EventEmitter();
}
ViewEncapsulation
} from '@angular/core';
import { CalendarEvent, CalendarView } from 'angular-calendar';
import { colors } from '../demo-utils/colors';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html',
styleUrls: ['styles.scss'],
encapsulation: ViewEncapsulation.None
})
export class DemoComponent implements OnInit, OnDestroy {
view: CalendarView = CalendarView.Month;
viewDate = new Date();
events: CalendarEvent[] = [
{
title: 'An event',
start: new Date(),
color: colors.red
}
];
private readonly darkThemeClass = 'dark-theme';
constructor(@Inject(DOCUMENT) private document) {}
ngOnInit(): void {
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent, CalendarView } from 'angular-calendar';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [];
}
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent, CalendarView } from 'angular-calendar';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [];
changeDay(date: Date) {
this.viewDate = date;
this.view = CalendarView.Day;
}
}
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Subject } from 'rxjs';
import {
CalendarEvent,
CalendarEventTimesChangedEvent,
CalendarView
} from 'angular-calendar';
import { colors } from '../demo-utils/colors';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date();
events: CalendarEvent[] = [
{
title: 'Draggable event',
color: colors.yellow,
start: new Date(),
draggable: true
},
{
title: 'A non draggable event',
color: colors.blue,
start: new Date()
}
];
import {
Component,
ChangeDetectionStrategy,
ViewEncapsulation
} from '@angular/core';
import { CalendarEvent, CalendarView, DAYS_OF_WEEK } from 'angular-calendar';
import { colors } from '../demo-utils/colors';
@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
templateUrl: 'template.html'
})
export class DemoComponent {
view: CalendarView = CalendarView.Month;
viewDate: Date = new Date('2016-01-05');
events: CalendarEvent[] = [
{
start: new Date('2016-01-08'),
end: new Date('2016-01-10'),
title: 'One day excluded event',
color: colors.red,
allDay: true
},
{
start: new Date('2016-01-01'),
end: new Date('2016-01-09'),
title: 'Multiple weeks event',
allDay: true