Fullcalendar con jquery autocomplete
by yamidvo
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="calendario"></div>
<div id="ventanaModal" title="Citas">
<form>
<input type="text" id="paciente" placeholder="Nombre del paciente" autocomplete="off"><br>
<input type="text" id="identificacion">
<input type="hidden" id="apptStartTime"/>
<input type="hidden" id="apptEndTime"/>
<input type="hidden" id="apptAllDay" />
<textarea id="descripcion" name="tratamientos" placeholder="Escriba la descripcion"></textarea><br>
<label for="cuando" class="control-label">Cuando:</label>
<div id="cuando"></div>
<button id="guardar" class="btn btn-large">Guardar </button>
</form>
</div>
CSS
/*Como pueden ver al seleccionar un nombre en el autocomplete, automaticamente el otro input se llena con la identificacion ya que estoy utilizando el array asociativo datos*/
/*el el script php llamo los datos de la siguiente forma:
$consulta = "SELECT * FROM usuarios WHERE identificacion LIKE '%$nombre%' OR nombre LIKE '%$nombre%' ";
$result = $conexion->query($consulta);
if($result->num_rows > 0){
while($fila = $result->fetch_assoc()){
// $nombres[$fila['identificacion']] = $fila['nombre'];
$nombres= array("label" => $fila['identificacion'], "value" => $fila['nombre']);
}
echo json_encode($nombres);
}
*/
/*pero el resultado cuando busco en el autocomplete es el siguiente: https://docs.google.com/file/d/0B6YpdFUjGETuOTlCMVYzX2JudDA/edit*/
/*y al seleccionar una opcion los dos input se llenan asi:
https://docs.google.com/file/d/0B6YpdFUjGETuVVh1YVhGenRPWkE/edit*/
/*quisiera que el array asociativo que traigo del script php sea de las mismas caracteristicas que el que esta declarado en javascript*/
JavaScript
$(document).ready(function() {
$('#calendario').fullCalendar(
{
//elementos de la cabecera del calendario
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
selectable: true,
//funcion que se activa al selecionar un dia en el calendario
select: function(start, end, allDay) {
endtime = $.fullCalendar.formatDate(end,'h:mm tt');
starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
dayNamesShort: ['Dom','Lun','Mar','Mier','Jue','Vie','Sab'];
var cuando = starttime + ' - ' + endtime;
$("#ventanaModal #apptStartTime").val(start);
$("#ventanaModal #apptEndTime").val(end);
$("#ventanaModal #apptAllDay").val(allDay);
$("#ventanaModal").dialog('open');
$('#ventanaModal #cuando').text(cuando);
calendar.fullCalendar('unselect');
},
//eventos, estos los recojo de un script php, pero aca me toca declararlos en javascript
events: [
{
title : 'evento',
start : '2013-09-16 17:00:00',
end : '2013-09-16 17:30:00',
allday : false
}
]
});
//parametros de la ventana modal
$("#ventanaModal").dialog({
autoOpen: false,
resizable: false,
modal: true,
// show: 'explode',
// hide: 'blind'
});
//funcion que se activa al dar click en guardar
$("#guardar").on('click', function(e){
e.preventDefault();
doSubmit();//llammamos a la funcion dosubmit
...