0
私はarshawカレンダーで作業しています。これは本当に新しいものです。イベントVIAモーダルウィンドウを追加できるようにしたい。ここで私は何をしようとしているのスクリーンショットです：上の画像でFullcalendar（Arshaw） - モーダルウィンドウでイベントを追加する
は、私（Arshaw）Fullcalendarです。
第二の画像は、ユーザーがカレンダー上でクリックしたときに、6時に言っていることを示し、モーダルがポップアップ表示され、ユーザは現在モーダル経由でイベントを追加することができます。ここで
は私のコードです：
Javascriptを：
//arshaw calendars
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
defaultView: 'agendaDay',
eventBorderColor: "#de1f1f",
header:
{
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
//When u select some space in the calendar do the following:
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
},
//When u drop an event in the calendar do the following:
eventDrop: function (event, delta, revertFunc) {
//do something when event is dropped at a new location
},
//When u resize an event in the calendar do the following:
eventResize: function (event, delta, revertFunc) {
//do something when event is resized
},
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
},
//Activating modal for 'when an event is clicked'
eventClick: function (event) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
})
});
CSHTML：
<div id="amethystBackground2"> <!-- CSS for background page !-->
<br /><br />
<div class="container">
<div id='calendar' style="background:#ECF0F1"></div>
</div>
</div>
<!--Add event modal-->
<div id="createEventModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4>Add an Event</h4>
</div>
<div id="modalBody" class="modal-body">
<div class="form-group">
<input class="form-control" type="text" placeholder="Event Name">
</div>
<div class="form-group form-inline">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Due Date mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Event Description"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
</div>
</div>
私はそれをどのように行うのですか？私はインターネットを見渡し、javascript上の関数と何か関係があります。私はこれに新しいですし、これを行う方法についてかなり理解していません。私はこの例（Create fullCalendar calendar event on submitting the form in bootstrap modal window）を試しましたが、私の上では動作しません。
お手数ですが、よろしくお願いします。あなたのイベントを定義するのparamsで
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
},
を、あなたが開始および終了している、起動して：
送信ボタンをクリックすると、イベントをレンダリングする必要があります。共有した例では、送信ボタンをクリックするとカレンダーにイベントを表示する必要があります。 – Raki