Question

我正在为我的项目使用rails和react.js。让我说我创建事件A但我改变主意并取消它（通过引导模式）然后我开始另一个事件B并且我确认它，事件A仍然被创建。我错过了什么吗？

componentDidMount: function(){
    var self = this;
    var events = [];
    $('#calendar').fullCalendar({
      googleCalendarApiKey: self.props.publicApi,
      defaultView: 'agendaWeek',
      minTime: '08:00:00',
      maxTime: '18:00:00',
      height: 'auto',
      timezone: 'local',
      firstDay: moment().day(),
      allDaySlot: false,
      selectable: true,
      select: function(start, end){
        $('#myModal').modal('show')
        $('#proceed-to-payment').on('click', function(){
          var durationString = $('#time-select').find(':selected').text()
          var duration = parseFloat(durationString)
          var eventData;

          end.set('hour', start.hour() + duration  )
          end.set('minutes', start.minutes())
          eventData = {
            title: "New Event",
            start: start.format(),
            end: end.format()
          };
          $('.fc-event').remove();
          $('#calendar').fullCalendar('renderEvent', eventData);

          var url = '/appointment/' + self.state.sportCenter.id + '/appointments'
          $.post(url, {
            start: start.format(),
            duration: duration,
            title: "Appointment set by " + self.state.user.first_name + " " + self.state.user.last_name,
            user_id: self.state.user.id,
            appointment_id: self.state.appointment.id
          })

        })

        $('#calendar').fullCalendar('unselect');
      },
      eventSources: [{
              googleCalendarId: self.state.email_address
            }]
    });

this.state.appointments.forEach(function(appointment){
  events.push( self.initalizeOldEvents(appointment) )
});

$('#calendar').fullCalendar('addEventSource', events );
},

Answer 1

如果您通过React使用Flux，您会发现您将该组件的状态 out 并将其存入商店。这将大大简化您的组件，因为他们总是只询问商店的状态并使用它来呈现。

在fullcalendar.io上加倍的事件

1 个答案: