Fullcalendar - Drag & Drop Stundenplan

Question

Ich möchte einen Stundenplan mit Vollkalender erstellen.

Es soll wie folgt aussehen: Link

Mein Problem ist, dass fullcalendar immer die Daten zeigt, den Wochentag neben. ("Wed - 04/27", "Do - 04/28", ...)

Was ich will ist, dass es nur Montag bis Freitag gibt, ohne Termine und keine Möglichkeit, in die nächste Woche zu wechseln. Es sollte eine abstrakte Woche sein. Gibt es einen Weg, das zu erreichen?

Danke für Ihre Hilfe.

Answer 1

Nachdem ich mit allen Funktionen des Plugins herumgespielt habe, die Sie hier in der docs finden, habe ich einen funktionierenden Kalender!

Hier ist, wie es aussieht:

Hier ist der Code:

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'); 

EDIT

ich mit verschiedenen Veranstaltungen eine MYSQL-Tabelle erstellt. Die Ereignisse liegen zwischen 1999-12-27 und 2000-01-02. Um die Ereignisse zur Tabelle hinzuzufügen, benötigen Sie eine separate PHP-Datei, die das gesamte Ereignisobjekt zurückgibt (siehe Code unten). Drag & Drop kann mit den Aktionen durchgeführt werden (wie im obigen Code zu sehen).

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); 

?> 

Answer 2

Sie können Bootstarp Full Calander verwenden und Sie können von Bootstarp3 Website finden. gegebenes vollständiges Kalanderbeispiel.