使用没有日期的 FullCalendar
dev*_*irl 7 php mysql ajax jquery
现在，我正在制定课程表。我的想法是将FullCalendar视图设置为agendaWeek仅并格式化其他内容。我不知道如何获取和添加事件的编程方面，因为我不会在此实例中使用任何日期。
这是时间表：
| schedid | subjectcode | prof_id | day | start_time | end_time | duration | room |
-------------------------------------------------------------------------------------------
| 1 | TECHNO | 16-00001 | Monday | 11:00:00 | 14:00:00 | 3 | SL |
| 2 | TECHNO | 16-00001 | Tuesday | 10:30:00 | 13:30:00 | 3 | SL |
这就是我想要实现的目标：
我读过文档，读得越多，我就越不知道该怎么做，而且我真的不知道如何实现它，因为 FullCalendar 取决于日期。任何建议和帮助将不胜感激。
编辑：
这是我的 FullCalendar 脚本：
$(document).ready(function() {
$("#add-sched").fullCalendar({
header: false,
columnFormat: 'dddd',
allDaySlot: false,
hiddenDays: [0],
defaultView: 'agendaWeek',
minTime: '07:00:00',
maxTime: '21:00:00',
editatble: true,
events: [ // values will be coming from an ajax call so I'm just placing here what inputs I would like
{
title: 'Event',
start: 'MondayT11:00:00', //what I would like to input
end: 'MondayT11:00:00',
// start: '2016-12-12T11:00:00',
// end: '2016-12-12T14:00:00',
editable: true
}
]
});
});
该表应该是 HTML 文档还是 Excel 文档？
最后我做了这个。
这是页面的 HTML && JS 代码：
<!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>
以下是 getevents.php 的 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);
}
?>
我还在数据库中添加了“日期”列，其中以“yyyy-mm-dd”格式存储日期
PS 这段代码可能有点迟钝，但它可以工作
PSS 我看到您想在不使用任何日期的情况下创建此日历。但我没有找到任何方法来做到这一点。您可以向用户隐藏日期并在 PHP 代码中处理它们
| 归档时间： |
|
| 查看次数： |
3226 次 |
| 最近记录： |