Мне было интересно, как я могу вручную закодировать javascript на начало и конец даты события и показать его в календаре с помощью «span». Так же, как это:fullcalendar multi-day span of event how (код javascript)
[промежуток от 27 декабря (дата начала) до 30 декабря (дата окончания) - пожалуйста, нажмите на ссылку, чтобы увидеть изображение образца http://i.stack.imgur.com/NlvRG.png
из моего яваскрипта кода, я уже может получить дату начала:
dayClick: function(date, event, view) {
currentDate = date.format();
// Open modal to add event
modal({
// Available buttons when adding
buttons: {
add: {
id: 'add-event', // Buttons id
css: 'btn-success', // Buttons class
label: 'Add' // Buttons label
}
},
title: 'Add Event (' + date.format() + ')' // Modal title
});
},
Но, если бы я был кодировать событие вручную в JavaScript, продолжительность события мульти-день работает. Событие кодируется вручную в JavaScript выглядит следующим образом:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}, events: [
{
title: 'Birthday Party',
start: '2014-09-15T10:00:00',
end: '2014-09-17T06:00:00'
}
] });
Я был на самом деле интересно, как я мог бы получить и дату начала и дату окончания динамически из формы и в базу данных внутри JavaScript.
Вот мой HTML файл (как я бегу его на CodeIgniter, он сохраняется в виде файла PHP (это мнение):
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div id='calendar'></div>
</div>
</div>
</div>
<div 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 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="error"></div>
<form class="form-horizontal" id="crud-form">
<div class="form-group">
<label class="col-md-4 control-label" for="title">Title</label>
<div class="col-md-4">
<input id="title" name="title" type="text" class="form-control input-md" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="title">Start date:</label>
<div class="col-md-4">
<input id="start_date" name="start_date" type="text" class="form-control input-md" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="title">End Date:</label>
<div class="col-md-4">
<input id="end_date" name="end_date" type="text" class="form-control input-md" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="description">Description</label>
<div class="col-md-4">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="color">Color</label>
<div class="col-md-4">
<input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
<span class="help-block">Click to pick a color</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>
Хотелось бы видеть HTML. Я полагаю, вы динамически создаете календарь с помощью PHP или какого-либо другого серверного языка, не так ли? В таком случае создание хорошей HTML-разметки для вашего JavaScript может многое помочь, например, вы можете дать атрибуты span 'data-start' и' data-end', чтобы легко получить их через JavaScript. Есть много вариантов, но, к сожалению, мне нужно идти сейчас. Кто-то еще поможет вам с большим количеством времени, но, по крайней мере, здесь у вас есть идея. – Zeke
Благодарим за отзыв! html не содержит много, он просто содержит модальный, когда я нажимаю день или событие. CRUD для fullcalendar уже полностью функциональен, просто я не могу создать диапазон, в который я введу дату начала и дату окончания. Функциональность календаря полностью зависит от javascript, crud зависит от контроллера и модели. – Laurel
Пожалуйста, добавьте свой код HTML и PHP. –