Angular ng fullcalendar Customization for angular 5

Question

I'm integrating ng full-calendar into my project it shows below screen properly. Calendar view

Below is my .ts file code.

 export class OfcalendarComponent implements OnInit {
   calendarOptions: Options;
   displayEvent: any;
   @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
   constructor() { }

   ngOnInit() {
   this.calendarOptions = {
    editable: true,
    eventLimit: false,
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month'
  },
  selectable: true,
  events: [
    {
      title  : 'event1',
      start  : '2018-06-08',
      rendering: 'background'
    }

   ],
 };
}

Now I want to add click event to select multiple dates and set event to those selected date but on fullcalendar documentation they have given all jquery methods. Does anyone help me how can i integrate in angular project in .ts file?

Typescript compiles down to JavaScript, and jQuery is just JavaScript with fancy syntax on top. FullCalendar requires jQuery anyway, so it's hard to see what the issue is. Anyway, for your requirement "I want to add click event to select multiple dates"...I think you probably want the "select" callback? https://fullcalendar.io/docs/select-callback . So in your calendar options object just add another option `select: function( start, end, jsEvent, view) {`...etc just like the other options, except you provide a callback function as the value of the option — ADyson, Jun 26 '18 at 08:53

score 0 · Answer 1 · answered Mar 18 '19 at 08:46

You can call ts function when multiple dates select in full calendar and then you can do your stuff.

this.calendarOptions = {
    editable: true,
    eventLimit: false,
    selectable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listMonth'
    },
    events: data
  };
  
    eventSelect(event){
     console.log(event.start,event.end);
      }

    <ng-fullcalendar #ucCalendar [options]="calendarOptions" 
        (select)="eventSelect($event.detail)"
        ></ng-fullcalendar>

Angular ng fullcalendar Customization for angular 5

1 Answers1