0
スケジュールシステムをフルカレンダーでセットアップしようとしています。現在のコードでは、カレンダーで1日をクリックすると、クリックした日と時間を表示するモーダルが表示されます。このモーダルでは、その日と時間に基づいてカレンダーにイベントを追加できます。FullCalendarが正しいmoment.js形式を認識できない
私が欲しいのは、クリックするだけでその日を過ぎ、モーダルを通して時間を渡すことです。
私は("HH:mm:ss YYYY-MM-DD")に日付をフォーマットすると、私は正しい日付で渡すことができ、すべてがうまくいきます。唯一のことは、自分のモーダルにYYYY-MM-DD部分が表示されないようにすることです。私はちょうど("HH:mm:ss")にそれをトリミングする場合、それはカレンダーを更新しますが、カレンダーの毎日の特定の時間を無期限に更新します。
年、月、日をカレンダーに引き継ぎながら、モーダルボックスで時刻を表示するにはどうすればよいですか？
私のコードは、私がこのような2つの瞬間に日付と時刻を分離
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();
}
});
}
}
});
