使用不带日期的FullCalendar [英] Use FullCalendar without date
问题描述
现在，我正在为上课时间表制定时间表.我的想法是将 FullCalendar 视图仅设置为agendaWeek并设置其他格式.我不知道如何获取和添加事件的编程方面，因为我不会为此实例使用任何日期.
Right now, I'm making a timetable for a class schedule. My idea is to set the FullCalendar view to agendaWeek only and format other things. The programmatical side on how to fetch and add events is what I have no idea about since I won't be using any date for this instance.
这是时间表表:
| 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取决于日期，因此我对如何实现此目标一无所知.任何建议和帮助将不胜感激.
I've read the documentation, the more I read, the more I can't figure out what to do and I really don't have any idea on how to implement this since FullCalendar depends on dates. Any advice and help would be very appreciated.
这是我的FullCalendar脚本:
Here's my script for the 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
}
]
});
});
推荐答案
如果我了解您的目标，则需要静态星期日历.活动不会按日期更改，而只会按日期名称更改.
If i understood your goal, you need static calendar of week. Events won't be changing by dates and will be changing only by day's names.
因此，我重写了以前的解决方案.在此变体中，形成的关联数组包含当前星期的日期，而键是天的名称.可通过日期名称访问日期，因此您无需在数据库中存储日期 请看看这个.
So I rewrote previous solution. In this variant formed associative array which containing dates of current week and keys are day's name. Dates are accessible through day's names, so you don't need store dates in database Please, have a look at this.
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 src='/something/initCalendar.js'></script> <!-- Script with all important stuff-->
<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>
initCalendar.js代码(最重要的部分):
Date.prototype.getDaysOfCurrentWeek = function(start)
{
// Array of all days of week
var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Calculates date of first day of current week
start = start || 0;
var today = new Date(this.setHours(0, 0, 0, 0));
var day = today.getDay() - start;
var date = today.getDate() - day;
// Then we are calculating all dates of current week and then reformat them into ISOO
var daysOfWeek = new Object();
for(i = 0; i < 8; i++) {
tmp = new Date(today.setDate(date+i));
daysOfWeek[days[i]] = tmp.getFullYear()+'-'+(tmp.getMonth()+1)+'-'+tmp.getDate();
}
return daysOfWeek;
}
var days = new Date().getDaysOfCurrentWeek(); // gets array like ('nameOfDay' => 0000-00-00)
$(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( "getevents2.php",
{'getEvents': 1},
function(data) {
var array = JSON.parse(data);
for(i = 0; i < array.length; i++) {
$('#calendar').fullCalendar( 'renderEvent', {
title: 'Sometitle',
start: days[array[i]['day']]+'T'+array[i]['start_time'], // here we are setting needed date from array 'days' by day's name which we got from database
end: days[array[i]['day']]+'T'+array[i]['end_time'] // here's the same
} );
}
}
);
});
getevents2.php的PHP代码:
if(isset($_POST['getEvents'])) {
$result = $db->query("SELECT * FROM `calendar`");
$return = array();
while($row = $result->fetch_assoc()) {
$return[] = $row;
}
echo json_encode($return);
}
是您需要的吗?还是我又弄错了?
Is it that what you need? Or I made it wrong again?
这篇关于使用不带日期的FullCalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
