Laurel Laurel - 4 years ago 189
PHP Question

fullcalendar multi-day span of event how (javascript code)

I was wondering on how I can manually code on javascript the getting of the start and end date of an event and having it shown in the calendar with a "span". Just like this:

[the span is from dec 27 (start date) to dec 30 (end date) - pls click link to see the sample image
http://i.stack.imgur.com/NlvRG.png



from my javascript code, i already can retrieve the start date:

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
});
},


But, if i were to encode the event manually in javascript, the multi-day event span does work. Event encoded manually in javascript looks like this:

$('#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'
}
] });


I was actually wondering on how i could get both the start date and end date dynamically from a form and into the database within the javascript.

Here is my html file (as i am running it on codeigniter, it is saved as a php file (this is the view):



<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">&times;</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>



Answer Source

So it seems like your problem is that the JSON object returned by your URL has unrecognizable data for fullCalendar. So you'll have to fetch events like this:

events: base_url+'Calendar/view_tours',

And change the columns of your data base from tour_id to id, tour_name to title, start_date to start and end_date to end. This will create the correct JSON object.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download