CODEWITHSUNDEEP
phpjquerymysqlajax
Larra
Larra

Reputation: 386

Use FullCalendar without date

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.

This is the schedule table:

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

This is what I'm trying to achieve:

enter image description here

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.

EDIT:

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

Upvotes: 7

Views: 3482

Answers (3)

Filip Vasic
Filip Vasic

Reputation: 61

I know it is old, and late...but for otheres, for now i am working on this problem "week schedule problem", no dates needed.

FrontEnd part of solution (Vue.js, can be done in othere solutions):

    calendarOptions: {
      ...
      dayHeaderContent: function(arg){
          var weekdays = ["mon",...]
          return weekdays[arg.date.getDay()];
      },
    }

header will show days that are in weekdays, aka mon, thu... or day 1, day 2...

Upvotes: 2

Viacheslav Zhabonos
Viacheslav Zhabonos

Reputation: 190

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 page(not important code): 

<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 code(most important part):

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

PHP code of getevents2.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?

Upvotes: 2

Viacheslav Zhabonos
Viacheslav Zhabonos

Reputation: 190

Should this table be an HTML document, or an Excel document?

Finally I made this.

Here's HTML && JS code for page:

<!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>

Here's PHP code for getevents.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);
    }
?>

Also I added column 'date' into database where i stored date in format 'yyyy-mm-dd'

P.S. This code might be kinda retarded, but it works

P.S.S I saw that you want to create this calendar without using any dates. But I didn't find any way to do it. You can hide dates from users and process them up in PHP code

Upvotes: 0

Related Questions