Я пытаюсь настроить систему расписания в полном календаре. С моим текущим кодом, когда вы нажимаете на день в календаре, он отображает модальный, который отображает день и время, когда вы нажимали. Затем этот модальный способ позволяет добавлять события в календарь на основе этого дня и времени.FullCalendar не может определить правильный формат moment.js
Я хочу, чтобы приложение только пропускало день на клике и пропускало время через модальное.
Если я отформатирую дату до ("HH:mm:ss YYYY-MM-DD"), я могу пройти в правильную дату, и все хорошо. Единственное, что я не хочу, чтобы часть YYYY-MM-DD появилась в моем модальном режиме. Если я обрезаю его до ("HH:mm:ss"), он обновляет календарь, но обновляет это конкретное время на каждый день в календаре на неопределенный срок.
Как я могу показать только время в модальном поле, все еще проходя год, месяц и день в календаре?
Мой код
let isPast = (date) => {
let today = moment().format();
return moment(today).isAfter(date);
};
Template.events.onCreated(() => {
let template = Template.instance();
template.subscribe('events');
});
Template.events.onRendered(() => {
$('#events-calendar').fullCalendar({
header: {
center: 'month,agendaWeek'
},
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("HH:mm:ss YYYY-MM-DD") });
$('#add-edit-event-modal').modal('show');
},
eventClick(event) {
Session.set('eventModal', { type: 'edit', event: event._id });
$('#add-edit-event-modal').modal('show');
}
});
Tracker.autorun(() => {
Events.find().fetch();
$('#events-calendar').fullCalendar('refetchEvents');
});
});
И
let closeModal =() => {
$('#add-edit-event-modal').modal('hide');
$('.modal-backdrop').fadeOut();
};
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();
}
});
},
'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();
}
});
}
}
});
