我正在尝试将我的事件添加到完整的日历中，但显示一个弹出窗口，说内部服务器找到了错误。但是在控制台中它没有显示任何错误。
这里我附上了我的代码
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>
events.js：
Template.events.onCreated( () => {
let template = Template.instance();
template.subscribe( 'events' );
});
Template.events.onRendered( () => {
$( '#events-calendar' ).fullCalendar({
events( start, end, timezone, callback ) {
let data = Events.find().fetch().map( ( event ) => {
event.editable = !isPast( event.start );
return event;
});
if ( data ) {
callback( data );
}
},
eventRender( event, element ) {
element.find( '.fc-content' ).html(
`<h4>${ event.title }</h4>
<p class="guest-count">${ event.guests } Guests</p>
<p class="type-${ event.type }">#${ event.type }</p>
`
);
},
eventDrop( event, delta, revert ) {
let date = event.start.format();
if ( !isPast( date ) ) {
let update = {
_id: event._id,
start: date,
end: date
};
Meteor.call( 'editEvent', update, ( error ) => {
if ( error ) {
Bert.alert( error.reason, 'danger' );
}
});
} else {
revert();
Bert.alert( 'Sorry, you can\'t move items to the past!', 'danger' );
}
},
dayClick( date ) {
Session.set( 'eventModal', { type: 'add', date: date.format() } );
$( '#add-edit-event-modal' ).modal( 'show' );
},
eventClick( event ) {
Session.set( 'eventModal', { type: 'edit', event: event._id } );
$( '#add-edit-event-modal' ).modal( 'show' );
}
});
});
let isPast = ( date ) => {
let today = moment().format();
return moment( today ).isAfter( date );
};
Tracker.autorun( () => {
Events.find().fetch();
$( '#events-calendar' ).fullCalendar( 'refetchEvents' );
});
addEditEvents.html：
<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">×</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>
addEditEvents.js：
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();
}
});
}
}
});
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 );