hieronder heb ik wat codes ingevoerd.
Echter werkt dit gewoon tot aan "delete" en "edit",
bij save wordt er een array in de database gecreeerd.
Wat ik nu wil is dat bij "delete" database delete doet,
van zelf sprekend.
Voor "edit" hetzelfde alleen i.p.v. database delete, database UPDATA/EDIT.
Er moet dus 2 lines toegevoegd worden dat er een update gedaan moet worden bij de database.
Ik zelf heb heel weinig kennis van programmeren/scripten,
ik ben meer een gebruiker.
JS FILE
$(document).ready(function() {
var $calendar = $('#calendar');
var id = 10;
$calendar.weekCalendar({
timeslotsPerHour : 4,
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, 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: "New Calendar Event",
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();
//post to events.php
$.post("events.php?action=save&start="+calEvent.start.getTime()/1000+"&end="+calEvent.end.getTime()/1000+"&title="+calEvent.title+"&body="+calEvent.body);
$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("input[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: {
save : 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");
},
"delete" : function() {
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
cancel : 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 : "events.php"
});
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++) {
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();
});
});
PHP FILE connect DATABASE
<?php
$action = $_REQUEST['action'];
if (!$link = mysql_connect('localhost', 'root', '')) {
echo 'Could not connect to mysql';
exit;
}
if (!mysql_select_db('portal', $link)) {
echo 'Could not select database';
exit;
}
if($action == 'save')
{
$title = $_REQUEST['title'];
$body = $_REQUEST['body'];
$start_time = (int)$_REQUEST['start'];
$start_time = $start_time - 60*60;
$end_time = (int)$_REQUEST['end'];
$end_time = $end_time - 60*60;
$start = date('c',$start_time);
$end = date('c',$end_time);
$sql = "INSERT INTO meeting_rooms_calendar(title,body,start,end) VALUES ('$title','$body','$start','$end')";
$result = mysql_query($sql, $link);
}
else
{
$sql= "SELECT id, title, body,
DATE_FORMAT(start, '%Y-%m-%dT%H:%i' ) AS startTime, DATE_FORMAT(end, '%Y-%m-%dT%H:%i' ) AS endTime
FROM meeting_rooms_calendar
ORDER BY start DESC";
$result = mysql_query($sql, $link);
if (!$result) {
echo "DB Error, could not query the database\n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
$events = array();
while ($row = mysql_fetch_assoc($result)) {
$eventArray['id'] = $row['id'];
$eventArray['title'] = $row['title'];
$eventArray['body'] = $row['body'];
$eventArray['start'] = $row['startTime'];
$eventArray['end'] = $row['endTime'];
$events[] = $eventArray;
}
echo json_encode($events);
}
/*
echo json_encode(array(
array(
'id' => 1,
'start' => "2012-07-08T08:30",
'end' => "2012-07-08T09:30",
'title' => "event1",
'body' => "kaka"
),
array(
'id' => 2,
'start' => "2012-07-09T08:30",
'end' => "2012-07-09T09:30",
'title' => "event2"
)
));
*/
?>
SQL create
CREATE TABLE IF NOT EXISTS `meeting_rooms_calendar` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`userID` int(10) unsigned NOT NULL,
`title` varchar(100) NOT NULL,
`body` varchar(255) DEFAULT NULL,
`start` datetime NOT NULL,
`end` datetime NOT NULL,
`editable` tinyint(1) NOT NULL,
PRIMARY KEY (`id`),
KEY `userID` (`userID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
ter informatie dit is een open source, dus niet door mijzelf geknutseld.
