CODEWITHSUNDEEP
jqueryajaxjsonfullcalendar
Chris Wilson
Chris Wilson

Reputation: 203

Fullcalendar not showing data

I'm still a new programmer, and I have a problem getting this piece of code to work (that I got from here). It uses MySQL to store the data. I would like to understand all the various parts to this, but I'm just now really starting to understand how ajax and jQuery work together.

It for displaying data, it relies on "events.php". I have run that separately, and it generates JSON that should work for display in the calendar, so I know the SQL works fine, but it won't display on the main page. The paths to the libraries, CSS, and so on have been changed, but the function to insert into the MySQL table works fine... So I can use this to insert dates, but once there, they don't show up on a refresh.

EDIT: SOLVED. A combination of three problems, as far as I can tell: (1) - Make sure the returned JSON does NOT have quotes around "false". (2) Make sure you have jquery.min.map. (this was found out by looking at the Chrome's debugger), and (3) I could NOT use the file's path... I just refer to it as "events.php". Thanks to everyone that helped!

Here's the html below... and below THAT, the JSON. I have seen a couple other posts that never had solutions, so obviously, any help GREATLY appreciated:

<!DOCTYPE html>
<html>
<head>
    <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
    <script src='lib/jquery.min.js'></script>
    <script src='lib/jquery-ui.custom.min.js'></script>
    <script src='fullcalendar/fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                events: "http://localhost/tpsdb/fullcalendar/events.php",

                // Convert the allDay from string to boolean
                eventRender: function(event, element, view) {
                    if (event.allDay === 'true') {
                        event.allDay = true;
                    } else {
                        event.allDay = false;
                    }
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    var url = prompt('Type Event url, if exits:');
                    if (title) {
                        var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
                        var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
                        $.ajax({
                            url: 'http://localhost/tpsdb/fullcalendar/add_events.php',
                            data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
                            type: "POST",
                            success: function(json) {
                                alert('Added Successfully');
                            }
                        });
                        calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true // make the event "stick"
                        );
                    }
                    calendar.fullCalendar('unselect');
                },

                editable: true,
                eventDrop: function(event, delta) {
                    var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });
                },
                eventResize: function(event) {
                    var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });

                }

            });

        });

    </script>
    <style>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

        }


        #calendar {
            width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

The JSON generated by the events.php page:

[{"id":"7","title":"test","start":"2014-02-05 00:00:00","end":"2014-02-05 00:00:00","url":"","allDay":"false"},{"id":"8","title":"Title 2","start":"2014-02-06 00:00:00","end":"2014-02-06 00:00:00","url":"","allDay":"false"},{"id":"9","title":"Feb 1","start":"2014-01-28 00:00:00","end":"2014-01-28 00:00:00","url":"","allDay":"false"}]

Here's the PHP that creates the JSON to strip quotes out as per proper format (true doesn't appear in my JSON string).

<?php
    // List of events
    $json = array();

    // Query that retrieves events
    $requete = "SELECT * FROM evenement ORDER BY id";

    // connection to the database
    include ("../includes/functions.php");

    // Execute the query
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

    // sending the encoded result to success page
    $tempjson =  json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
    $tempjson = str_replace('"false"', 'false', $tempjson);
    echo $tempjson;

?>

More info in my saga - may it help those following in my footsteps: apparently the lib that was provided doesn't include jquery.min.map (I have yet to research what that is). Thanks for asking about the f12 console in Chrome. I saw that the min.map was missing. Still hasn't helped me though :( Working...

Here is the screen shot of Chrome's viewer. enter image description here

Upvotes: 1

Views: 7873

Answers (3)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

Try replace:

 events: "http://localhost/tpsdb/fullcalendar/events.php",

with:

 eventSources: [

                     {
                         url: 'http://localhost/tpsdb/fullcalendar/events.php',
                         type: 'GET',
                         data: {},
                         error: function () {
                             alert('There was an error while fetching events!');
                         }
                     }
    ],

Upvotes: 2

Henrique C.
Henrique C.

Reputation: 978

Also modify this:

[
{
    "id": "7",
    "title": "test",
    "start": "2014-02-05 00:00:00",
    "end": "2014-02-05 00:00:00",
    "url": "",
    "allDay": false  <-- change this to false without quotes
},
{
    "id": "8",
    "title": "Title 2",
    "start": "2014-02-06 00:00:00",
    "end": "2014-02-06 00:00:00",
    "url": "",
    "allDay": "false"
},
{
    "id": "9",
    "title": "Feb 1",
    "start": "2014-01-28 00:00:00",
    "end": "2014-01-28 00:00:00",
    "url": "",
    "allDay": "false"
}
]

Upvotes: 0

A Paul
A Paul

Reputation: 8261

Have you taken this fact into consideration that

Month value is 0-based, meaning January=0, February=1, etc.

http://arshaw.com/fullcalendar/docs/current_date/month/

So '2014-02-05' will be 5th March.

Upvotes: 0

Related Questions