Estoy desarrollando un calendario con jquery, ya puedo sacar los datos de la base de datos, pero no puedo insertarlos les dejo el codigo javascript y el codigo php
Código:
y el php$(document).ready(function() {
var $calendar = $('#calendar');
var id = 10;
$calendar.weekCalendar({
timeslotsPerHour : 2,
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 09, end: 23, limitDisplay: true },
daysToShow : 7,
height : function($calendar) {
return $(window).height() - $("h1").outerHeight() - 1;
},
eventRender : function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css("backgroundColor", "#aaa");
$event.find(".wc-time").css({
"backgroundColor" : "#999",
"border" : "1px solid #888"
});
}
},
draggable : function(calEvent, $event) {
return calEvent.readOnly != true;
},
resizable : function(calEvent, $event) {
return calEvent.readOnly != true;
},
eventNew : function(calEvent, $event) {
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']");
var bodyField = $dialogContent.find("textarea[name='body']");
$dialogContent.dialog({
modal: true,
title: "Ingresar Nuevo Horario",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save : function() {
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
//aca esta la funcion ajax q me dificulta
var inicio=startField.val();
var termino = endField.val();
var titulo=bodyField.val();
$.ajax({
type: 'get',
dataType: 'json',
url: 'ajax.php',
data: {inicio: inicio, termino:termino,titulo:titulo},
success: function(json)
{
$calendar.weekCalendar("removeUnsavedEvents");
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
}
});
},
cancel : function() {
$dialogContent.dialog("close");
}
}
}).show();
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
},
eventDrop : function(calEvent, $event) {
},
eventResize : function(calEvent, $event) {
},
eventClick : function(calEvent, $event) {
if (calEvent.readOnly) {
return;
}
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("texarea[name='title']").val(calEvent.title);
var bodyField = $dialogContent.find("textarea[name='body']");
bodyField.val(calEvent.body);
$dialogContent.dialog({
modal: true,
title: "Edit - " + calEvent.title,
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
"Grabar" : function() {
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"Borrar" : function() {
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
"Cancelar" : function() {
$dialogContent.dialog("close");
}
}
}).show();
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
$(window).resize().resize(); //fixes a bug in modal overlay size ??
},
eventMouseover : function(calEvent, $event) {
},
eventMouseout : function(calEvent, $event) {
},
noEvents : function() {
},
data:"conexion.php",
reachedmindate: function($calendar, date){
displayMessage("You reached mindate");
},
reachedmaxdate: function($calendar, date){
displayMessage("You cannot go further");
}
});
function displayMessage(message) {
$("#message").html(message).fadeIn();
}
$("<div id=\"message\" class=\"ui-corner-all\"></div>").prependTo($("body"));
function resetForm($dialogContent) {
$dialogContent.find("input").val("");
$dialogContent.find("textarea").val("");
}
/*
* Sets up the start and end time fields in the calendar event
* form for editing based on the calendar event being edited
*/
function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
for (var i = 0; i < timeslotTimes.length; i=i+1) {
var startTime = timeslotTimes[i].start;
var endTime = timeslotTimes[i].end;
var startSelected = "";
if (startTime.getTime() === calEvent.start.getTime()) {
startSelected = "selected=\"selected\"";
}
var endSelected = "";
if (endTime.getTime() === calEvent.end.getTime()) {
endSelected = "selected=\"selected\"";
}
$startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
$endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
}
$endTimeOptions = $endTimeField.find("option");
$startTimeField.trigger("change");
}
var $endTimeField = $("select[name='end']");
var $endTimeOptions = $endTimeField.find("option");
//reduces the end time options to be only after the start time options.
$("select[name='start']").change(function() {
var startTime = $(this).find(":selected").val();
var currentEndTime = $endTimeField.find("option:selected").val();
$endTimeField.html(
$endTimeOptions.filter(function() {
return startTime < $(this).val();
})
);
var endTimeSelected = false;
$endTimeField.find("option").each(function() {
if ($(this).val() === currentEndTime) {
$(this).attr("selected", "selected");
endTimeSelected = true;
return false;
}
});
if (!endTimeSelected) {
//automatically select an end date 2 slots away.
$endTimeField.find("option:eq(1)").attr("selected", "selected");
}
});
var $about = $("#about");
$("#about_button").click(function() {
$about.dialog({
title: "About this calendar demo",
width: 600,
close: function() {
$about.dialog("destroy");
$about.hide();
},
buttons: {
close : function() {
$about.dialog("close");
}
}
}).show();
});
});
Código PHP:
<?php
require_once 'acceso_bd/MiConexion.php';
$horaInicio=$_GET['inicio'];
$horaTermino=$_GET['termino'];
$tittle=$_GET['titulo'];
$sql = "insert into calendario values(?,?,?)";
$conexion = new MiConexion();
echo $conexion->error;
$sentencia = $conexion->prepare($sql);
$sentencia->bind_param("sss",$horaInicio,$horaTermino,$tittle);
$sentencia->execute();
$sentencia->close();
$conexion->close(); 
