Fullcalendar - Drag & drop school timetable

Question

I want to create a school timetable with using fullcalendar.

It should look something like this: Link

My problem is that fullcalendar always shows the dates next to the weekdays. ("Wed - 04/27", "Thu - 04/28",...)

What I want is that there is just Monday till Friday with no dates and no opportunity to switch to the next week. It should be a abstract week. Is there a way to achieve that?

Thanks for your help.

Very much so, i'd recommend removing all functionality you don't want, playing around with jquery ui to get a grasp of drag and drop and then try making something which works and achieves what you want to create. — Jordan Lowe, Apr 27 '16 at 08:47

Mike_NotGuilty · Accepted Answer · 2016-09-11T14:32:25.557

After playing around with all the functions of the plugin which you can find here in the docs, I have a working calendar!

Here is what it looks like:

Here is the 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

I created a MYSQL table with different events. The events are between 1999-12-27 and 2000-01-02. To add the events to the table, you need a separate php file which returns all of the event object (see code below). Drag and drop can be performed with the actions (as seen in the code above).

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

 ?>

Hi Mike. Have you made a fully working school schedule creator? Where you can add different subjects/events and update them, and store/get them from a database(mysql perhaps)? Im looking for a drag and drop school schedule creator and I found this tread :-) Would really appreciate if you have any working code :-) Thanks a lot. — Claes Gustavsson, Sep 11 '16 at 12:13
Thanks Mike. I can add events to my db now, and when resize and when I drag and drop an event. But how to when I move an event? I tried with eventMove function... but that did´t work. — Claes Gustavsson, Sep 12 '16 at 20:42
You can try the `eventDragStart` and `eventDragStop` functions. Those functions will execute your code when you start dragging something and when you stopped dragging. — Mike_NotGuilty, Sep 14 '16 at 16:42
For more events you can check out the docs (section "Event dragging&resize"): https://fullcalendar.io/docs/ — Mike_NotGuilty, Sep 14 '16 at 16:42

Fullcalendar - Drag & drop school timetable

1 Answers1