使用角度为 4 的 fullcalendar 时不显示事件答案

【问题标题】：Event is not showed when using fullcalendar with angular4使用角度为 4 的 fullcalendar 时不显示事件
【发布时间】：2017-09-27 10:32:41
【问题描述】：

我想在 angular4 中使用 fullcalendar，我只显示日历，但我想在点击时添加事件，我用于那一天点击并将对象推送到 events[]，新事件已添加到事件中，但它不要出现在日历上，我尝试设置stick=true但没有任何变化。我对angular 4比较陌生，只有打字稿，所以如果我以完全错误的方式处理事情，也请告诉我！ :)

谢谢！

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')
      }
   }
}

【问题讨论】：

this.calendarOptions.events = newEvents; 一无所获。你可以删除它。使用 renderEvents 你应该可以工作，假设你给出的日期是有效的（虽然不需要使用 .format() 来字符串化它，你可以直接传递 moment 对象 - 也许试试），并且在日历上当前显示的日期范围。
谢谢你的回答，我按照你说的做了，但还是不行` //callback function this.calendarOptions.dayClick = (date,jsEv,vie) => { let abc:string ='一种';让 hamz :object=[{ title:abc, start:date }]; $("#myCalendar").fullCalendar('renderEvent', hamz, true //我们想坚持下去 ); alert('ok') console.log(this.calendarOptions.events); } `
当时您的浏览器控制台有什么错误吗？
没有错误但没有出现事件，你有什么例子吗？

标签： angular typescript fullcalendar

【解决方案1】：

解决方案：

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);
            }
}

【讨论】：