Javascript 在meteor中将事件添加到完整日历_Javascript_Jquery_Html_Css_Meteor

Javascript 在meteor中将事件添加到完整日历

javascript jquery html css meteor

Javascript 在meteor中将事件添加到完整日历,javascript,jquery,html,css,meteor,Javascript,Jquery,Html,Css,Meteor,我正试图将我的事件添加到完整日历中，但显示一个弹出窗口，显示“发现内部服务器错误”。但在控制台中，它不会显示任何错误这里我附上我的代码 events.html： <template name="events"> {{> addEditEventModal }} <div id="events-calendar"></div> </template> <head> <style>

我正试图将我的事件添加到完整日历中，但显示一个弹出窗口，显示“发现内部服务器错误”。但在控制台中，它不会显示任何错误

这里我附上我的代码

events.html：

<template name="events">
    {{> addEditEventModal }}
  <div id="events-calendar"></div>
</template>

  <head>
        <style>
            .fc-event-container {
  padding: 5px !important;
}

.fc-event {
  padding: 5px 10px;
  border-color: #ddd;
  background: #fff !important;
}
  .fc-content {
    color: #444;
  }

  h4,
  h5 {
    margin: 0;
    font-weight: normal;
  }

  h4 {
    color: #666;
    font-size: 13px;
    line-height: 18px;
    white-space: normal;
  }

  h5 {
    color: #888;
    font-size: 12px;
    margin-top: 5px;
  }

  .guest-count {
    margin: 5px 0;
  }

  p[class^="type-"] {
    margin: 0;
  }

  p[class="type-Corporate"] {
    color: red;
  }

  p[class="type-Wedding"] {
    color: green;
  }

  p[class="type-Birthday"] {
    color: blue;
  }

        </style>

</head>

<template name="addEditEventModal">
  <div class="modal fade" id="add-edit-event-modal" tabindex="-1" role="dialog" aria-labelledby="add-edit-event-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="add-edit-event">{{modalLabel.label}} Event</h4>
      </div>
      <form id="add-edit-event-form">
        <div class="modal-body">
          <div class="form-group">
            <div class="row">
              <div class="col-xs-12 col-sm-4">
                <label for="type">Event Type</label>
                <select name="type" class="form-control">
                  <option selected="{{selected event.type 'Birthday' }}" value="Birthday">Birthday</option>
                  <option selected="{{selected event.type 'Corporate' }}" value="Corporate">Corporate</option>
                  <option selected="{{selected event.type 'Miscellaneous' }}" value="Miscellaneous">Miscellaneous</option>
                  <option selected="{{selected event.type 'Wedding' }}" value="Wedding">Wedding</option>
                </select>
              </div>
              <div class="col-xs-12 col-sm-3">
                <label for="start">Event Starts</label>
                <input disabled type="text" name="start" class="form-control" value="{{event.start}}">
              </div>
              <div class="col-xs-12 col-sm-3">
                <label for="end">Event End</label>
                <input disabled type="text" name="end" class="form-control" value="{{#if event.end}}{{event.end}}{{else}}{{event.start}}{{/if}}">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="title">Event Title</label>
            <input type="text" name="title" class="form-control" value="{{event.title}}">
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-4">
              <label for="guests">Number of Guests</label>
              <input type="text" name="guests" class="form-control" value="{{event.guests}}">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          {{#if modalType 'edit'}}
            <button class="btn btn-danger pull-left delete-event">Delete Event</button>
          {{/if}}
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">{{modalLabel.button}} Event</button>
        </div>
      </form>
    </div>
  </div>
</div>




</template>

collections.js：

Events = new Mongo.Collection( 'events' );

Events.allow({
  insert: () => false,
  update: () => false,
  remove: () => false
});

Events.deny({
  insert: () => true,
  update: () => true,
  remove: () => true
});

let EventsSchema = new SimpleSchema({
  'title': {
    type: String,
    label: 'The title of this event.'
  },
  'start': {
    type: String,
    label: 'When this event will start.'
  },
  'end': {
    type: String,
    label: 'When this event will end.'
  },
  'type': {
    type: String,
    label: 'What type of event is this?',
    allowedValues: [ 'Birthday', 'Corporate', 'Wedding', 'Miscellaneous' ]
  },
  'guests': {
    type: Number,
    label: 'The number of guests expected at this event.'
  }
});

Events.attachSchema( EventsSchema );

Template.addEditEventModal.helpers({
  modalType( type ) {
    let eventModal = Session.get( 'eventModal' );
    if ( eventModal ) {
      return eventModal.type === type;
    }
  },
   modalLabel() {
    let eventModal = Session.get( 'eventModal' );

    if ( eventModal ) {
      return {
        button: eventModal.type === 'edit' ? 'Edit' : 'Add',
        label: eventModal.type === 'edit' ? 'Edit' : 'Add an'
      };
    }
  },
  selected( v1, v2 ) {
    return v1 === v2;
  },
  event() {
    let eventModal = Session.get( 'eventModal' );

    if ( eventModal ) {
      return eventModal.type === 'edit' ? Events.findOne( eventModal.event ) : {
        start: eventModal.date,
        end: eventModal.date
      };
    }
  }
});

  Template.addEditEventModal.events({
  'submit form' ( event, template ) {
    event.preventDefault();

    let eventModal = Session.get( 'eventModal' ),
        submitType = eventModal.type === 'edit' ? 'editEvent' : 'addEvent',
        eventItem  = {
          title: template.find( '[name="title"]' ).value,
          start: template.find( '[name="start"]' ).value,
          end: template.find( '[name="end"]' ).value,
          type: template.find( '[name="type"] option:selected' ).value,
          guests: parseInt( template.find( '[name="guests"]' ).value, 10 )
        };

    if ( submitType === 'editEvent' ) {
      eventItem._id   = eventModal.event;
    }

    Meteor.call( submitType, eventItem, ( error ) => {
      if ( error ) {
        Bert.alert( error.reason, 'danger' );
      } else {
        Bert.alert( `Event ${ eventModal.type }ed!`, 'success' );
        closeModal();
      }
      let closeModal = () => {
  $( '#add-edit-event-modal' ).modal( 'hide' );
  $( '.modal-backdrop' ).fadeOut();
};
    });
  },
  'click .delete-event' ( event, template ) {
    let eventModal = Session.get( 'eventModal' );
    if ( confirm( 'Are you sure? This is permanent.' ) ) {
      Meteor.call( 'removeEvent', eventModal.event, ( error ) => {
        if ( error ) {
          Bert.alert( error.reason, 'danger' );
        } else {
          Bert.alert( 'Event deleted!', 'success' );
          closeModal();
        }
      });
    }
  }


});

Events = new Mongo.Collection( 'events' );

Events.allow({
  insert: () => false,
  update: () => false,
  remove: () => false
});

Events.deny({
  insert: () => true,
  update: () => true,
  remove: () => true
});

let EventsSchema = new SimpleSchema({
  'title': {
    type: String,
    label: 'The title of this event.'
  },
  'start': {
    type: String,
    label: 'When this event will start.'
  },
  'end': {
    type: String,
    label: 'When this event will end.'
  },
  'type': {
    type: String,
    label: 'What type of event is this?',
    allowedValues: [ 'Birthday', 'Corporate', 'Wedding', 'Miscellaneous' ]
  },
  'guests': {
    type: Number,
    label: 'The number of guests expected at this event.'
  }
});

Events.attachSchema( EventsSchema );