Moet deze tabel een HTML-document zijn of een Excel-document?
Eindelijk heb ik dit gemaakt.
Hier is de HTML &&JS-code voor de pagina:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='/something/fullcalendar.min.css' rel='stylesheet' />
<link href='/something/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/something/lib/moment.min.js'></script>
<script src='/something/lib/jquery.min.js'></script>
<script src='/something/fullcalendar.min.js'></script>
<script>
Date.prototype.getWeek = function(start)
{
//Calcing the starting point
start = start || 0;
var today = new Date(this.setHours(0, 0, 0, 0));
var day = today.getDay() - start;
var date = today.getDate() - day;
// Grabbing Start/End Dates
var StartDate = new Date(today.setDate(date));
var EndDate = new Date(today.setDate(date + 6));
return [StartDate, EndDate];
}
// test code
var Dates = new Date().getWeek();
for(i = 0; i < Dates.length; i++) {
day = Dates[i].getDate();
month = (Dates[i].getMonth()) + 1;
year = Dates[i].getFullYear();
Dates[i] = year + '-' + month + '-' + day;
}
$(document).ready(function() {
$('#calendar').fullCalendar({
header: false,
columnFormat: 'dddd',
allDaySlot: false,
hiddenDays: [0],
defaultView: 'agendaWeek',
minTime: '07:00:00',
maxTime: '21:00:00',
editatble: true,
});
$.post( "getevents.php",
{'getEvents': 1, 'startDate': Dates[0], 'endDate': Dates[1]},
function(data) {
var array = JSON.parse(data);
for(i = 0; i < array.length; i ++) {
$('#calendar').fullCalendar( 'renderEvent', {
title: 'Sometitle',
start: array[i]['date']+'T'+array[i]['start_time'], //what I would like to input
end: array[i]['date']+'T'+array[i]['end_time'],
} );
}
}
);
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Hier is PHP-code voor getevents.php:
<?php
$db = new mysqli('localhost', 'root', '', 'calendar'); // connection to db
function formWeekDates($startDate, $endDate) {
$startDay = getDay($startDate);
$endDay = getDay($endDate);
$tmp = explode('-', $startDate);
$return = array();
for($i = intval($startDay); $i <= intval($endDay); $i++) {
if($i > 0 && $i < 10) {
$i = '0'.$i;
}
$return[] = '\''.$tmp[0].'-'.$tmp[1].'-'.$i.'\'';
}
return $return;
}
function getDay($date) { //$date in format 'yyyy-mm-dd'
return end(explode('-', $date));
}
if(isset($_POST['getEvents']) && isset($_POST['startDate']) && isset($_POST['endDate'])) {
$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
$dates = implode(',', formWeekDates($startDate, $endDate));
$result = $db->query("SELECT * FROM `calendar` WHERE `date` IN ($dates)");
$return = array();
while($row = $result->fetch_assoc()) {
$return[] = $row;
}
echo json_encode($return);
// echo json_encode($dates);
}
?>
Ook heb ik kolom 'datum' toegevoegd aan de database waar ik de datum heb opgeslagen in het formaat 'jjjj-mm-dd'
PS Deze code is misschien een beetje achterlijk, maar het werkt
P.S.S. Ik zag dat je deze kalender wilt maken zonder datums te gebruiken. Maar ik vond geen manier om het te doen. U kunt datums voor gebruikers verbergen en verwerken in PHP-code