Fullcalendar - 拖放学校时间表
Fullcalendar - Drag & drop school timetable
我想使用全日历创建学校时间表。
它应该看起来像这样:
Link
我的问题是 fullcalendar 总是在工作日旁边显示日期。 ("Wed - 04/27", "Thu - 04/28",...)
我想要的是只有周一到周五,没有日期,也没有机会切换到下周。这应该是一个抽象的一周。
有办法实现吗?
感谢您的帮助。
在试用了插件的所有功能后,您可以在 docs 中找到,我有一个工作日历!
这是它的样子:
代码如下:
var calendar = $('#trainingszeitenCalendar').fullCalendar({
//lang: 'de',
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
eventSources: ['events.php'],
height: 680, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,6], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '16:00:00', // display from 16 to
maxTime: '23:00:00', // 23
slotDuration: '00:15:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
select: function(start, end, allDay) {
// Code for creating new events.
alert("Create new event at " + start);
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
}
}
// With the next line I set a fixed date for the calendar to show. So for the user it looks like it's just a general week without a 'real' date behind it.
$('#trainingszeitenCalendar').fullCalendar( 'gotoDate', '2000-01-01');
编辑
我创建了一个包含不同事件的 MYSQL table。事件发生在 1999-12-27
和 2000-01-02
之间。
要将事件添加到 table,您需要一个单独的 php 文件,其中 returns 所有事件对象(请参见下面的代码)。
可以使用操作执行拖放操作(如上面的代码所示)。
events.php
<?php
$fetch = "YOUR SQL Statement";
$query = mysqli_query....; // Execute fetch
$event_array = array();
while ($event = mysqli_fetch_array($query, MYSQL_ASSOC)) {
$id = $event['ID'];
$title = $event['Title'];
$description = $event['Description'];
$startdatum = $event['Start'];
$enddatum = $event['Ende'];
// Add event object to JSON array
// For more options check the fullcalendar.io docs
$event_array[] = array(
'id' => $id,
'title' => $title,
'description' => $description,
'start' => $startdatum,
'end' => $enddatum
);
}
echo json_encode($event_array);
?>
我想使用全日历创建学校时间表。
它应该看起来像这样: Link
我的问题是 fullcalendar 总是在工作日旁边显示日期。 ("Wed - 04/27", "Thu - 04/28",...)
我想要的是只有周一到周五,没有日期,也没有机会切换到下周。这应该是一个抽象的一周。 有办法实现吗?
感谢您的帮助。
在试用了插件的所有功能后,您可以在 docs 中找到,我有一个工作日历!
这是它的样子:
代码如下:
var calendar = $('#trainingszeitenCalendar').fullCalendar({
//lang: 'de',
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
eventSources: ['events.php'],
height: 680, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,6], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '16:00:00', // display from 16 to
maxTime: '23:00:00', // 23
slotDuration: '00:15:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
select: function(start, end, allDay) {
// Code for creating new events.
alert("Create new event at " + start);
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
}
}
// With the next line I set a fixed date for the calendar to show. So for the user it looks like it's just a general week without a 'real' date behind it.
$('#trainingszeitenCalendar').fullCalendar( 'gotoDate', '2000-01-01');
编辑
我创建了一个包含不同事件的 MYSQL table。事件发生在 1999-12-27
和 2000-01-02
之间。
要将事件添加到 table,您需要一个单独的 php 文件,其中 returns 所有事件对象(请参见下面的代码)。
可以使用操作执行拖放操作(如上面的代码所示)。
events.php
<?php
$fetch = "YOUR SQL Statement";
$query = mysqli_query....; // Execute fetch
$event_array = array();
while ($event = mysqli_fetch_array($query, MYSQL_ASSOC)) {
$id = $event['ID'];
$title = $event['Title'];
$description = $event['Description'];
$startdatum = $event['Start'];
$enddatum = $event['Ende'];
// Add event object to JSON array
// For more options check the fullcalendar.io docs
$event_array[] = array(
'id' => $id,
'title' => $title,
'description' => $description,
'start' => $startdatum,
'end' => $enddatum
);
}
echo json_encode($event_array);
?>