Security News
CISA Brings KEV Data to GitHub
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
ng-fullcalendar
Advanced tools
Angular fullcalendar module [FullCalendar](https://fullcalendar.io)
Angular fullcalendar module FullCalendar
This package wraps the fullcalendar module for Angular.
ng-fullcalendar v1 with JQuery see this
Demo project in Stackblitz DEMO
Install via npm :
npm install ng-fullcalendar
Then include the FullCalendarModule
module in your module.
import { FullCalendarModule } from 'ng-fullcalendar';
@NgModule({
imports: [
BrowserModule,
FullCalendarModule,
...
]
...
})
export class AppModule {}
Import CalendarComponent in your component :
import { OptionsInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarComponent } from 'ng-fullcalendar';
@Component({
selector: 'demo-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
options: OptionsInput;
eventsModel: any;
@ViewChild('fullcalendar') fullcalendar: CalendarComponent;
ngOnInit() {
this.options = {
editable: true,
events: [{
title: 'Long Event',
start: this.yearMonth + '-07',
end: this.yearMonth + '-10'
}],
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
plugins: [ dayGridPlugin, interactionPlugin ]
};
}
eventClick(model) {
console.log(model);
}
eventDragStop(model) {
console.log(model);
}
dateClick(model) {
console.log(model);
}
updateEvents() {
this.eventsModel = [{
title: 'Updaten Event',
start: this.yearMonth + '-08',
end: this.yearMonth + '-10'
}];
}
get yearMonth(): string {
const dateObj = new Date();
return dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
}
}
then your app.component.html
<div *ngIf="options">
<ng-fullcalendar #fullcalendar [options]="options" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>
From 1.5.0 version new feature [(eventsModel)]="events"
two events binding
<div *ngIf="calendarOptions">
<ng-fullcalendar #fullcalendar [options]="calendarOptions" [(eventsModel)]="events"></ng-fullcalendar>
</div>
ngOnInit() {
this.eventService.getEvents().subscribe(data => {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
selectable: true,
events: [],
};
});
}
clearEvents() {
this.events = [];
}
loadEvents() {
this.eventService.getEvents().subscribe(data => {
this.events = data;
});
}
More api docs: Official fullcalendar docs
MIT
FAQs
Angular fullcalendar module [FullCalendar](https://fullcalendar.io)
We found that ng-fullcalendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.