Event is not showed when using fullcalendar with angular4

user_7455254 0
Viewed 720

I want to use fullcalendar within angular4 , i just show the calendar but i want to add event on click , i use for that dayClick and i push the object into events[] , the new event was added to the events but it don't appear on the calendar , i try to put stick= true but nothng changes .I'm relatively new to the angular 4 with just typescript, so if I'm approaching things the totally wrong way, please also let me know! :)

Thank you!

export class MyHeaderComponent {

construct(){ }
 private arr:string[]=['az'];
calendarOptions = {
    events :[],
         //click on day make event
    dayClick(date, jsEvent, view) {}  ,  
    renderEvents(event, element, view  ){}
}          


ngOnInit() {
    let newEvents = [
  {
    title: 'name b',
    start: '2017-09-20'
  },
  {
    title: 'name c',
    start: '2017-09-20'
  },
  {
    title: 'name d',
    start: '2017-09-20'
  }
];
    this.calendarOptions.events = newEvents;

    //callback function
    this.calendarOptions.dayClick = (date,jsEv,vie) => {
        let abc:string ='a';
        //abc = prompt('Enter Title'); 
        let dat = date.format()
        let hamz ={
            title:abc,
            start:dat
        };
        console.log(hamz);
        newEvents.push(hamz);
        this.calendarOptions.events = newEvents;
        console.log(this.calendarOptions.events);
        this.calendarOptions.events = newEvents;
        $("#myCalendar").fullCalendar('renderEvents', 
                                        newEvents, 
                                        true //we want to stick it
                                   );
        alert('ok')
      }
   }
}

enter image description here

angular typescript fullcalendar
1 Answers

Solution:

calendarOptions  =  {
    dayClick: function(date, allDay, jsEvent, view){},
};
ngOnInit() {
this.calendarOptions.dayClick = (date) => {
            let eventName = prompt('titre de l\'évènement')
            if(eventName){
                var newEvent = [{
                    title: eventName,
                    start: date
                }];
                //objet jquery
                $('#calendar').fullCalendar('renderEvents', newEvent, true);
            }
}
user_74552540
Related