Member Avatar for nadiam 
Hi guys.
I have already installed fullcalendar successfully onto my webpage

home.php

    <script type="text/javascript" src="js/fullcalendar.js"></script>
        <script type="text/javascript" src="js/fullcalendar.min.js"></script>
        <script>

        $(document).ready(function() {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#calendar').fullCalendar(
            {
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable :true,
                events: "home.php",
            });
        })
    </script>


now what i want to do is get data from my database and display it in the calendar(according to the proper dates of course). the inserted data is done in another page

event.php


    <?php
    if(isset($_POST['submit']))
    {   
        $name = mysql_real_escape_string($_POST['ename']);
        $date = mysql_real_escape_string($_POST['edate']);
        $time = mysql_real_escape_string($_POST['etime']);
        $venue = mysql_real_escape_string($_POST['evenue']);

        if(preg_match('/^[a-zA-Z0-9\s]+$/', $name))
        {
            require "connection.php";

            $event = mysql_query("INSERT INTO event VALUES('','$name','$date','$time','$venue')") or die(mysql_error());
        }
    }
    ?>

    <html>
    <body>
    <form name="create" method="post" action="event.php">
            <fieldset>
                <legend>Create an Event</legend>
                <p>Event Name : <input type="text" name="ename" required/></p>
                <p>Event Date   : <input type="text" id="datepicker" name="edate" required/></p>
                <p>Event Time   : <input type="time" name="etime" required/></p>
                <p>Event Venue : <input type="text" name="evenue" required/></p>
                <input type="submit" name="submit" value="Create Event" /><input type="submit" id="cancel" name="cancel" value="Cancel" />
            </fieldset>
        </form>
    </body>
    </html>

Ive tried some tutorials i found on the web but i keep getting

{"event_id":"6","event_name":"Open Rodeo","event_date":"05\/08\/2014"}

at the top of the page and my fullcalendar is just empty.
help please!

  • 4 Contributors
  • 9 Replies
  • 13K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Shilpi_1
Member Avatar for saqib_604

post code where you are sending response.

the keys should be like this in array:

        'id' => 111,
        'title' => "Event1",
        'start' => "$year-$month-10",

instead of writing as: event_id, event_name.

and there are no attributes "name" and "date" of the events object. have a look here.

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

Member Avatar for saqib_604

you also dont have included the needed files.

  1. jQuery
  2. jQuery ui
  3. fullcalendar stylesheet
Member Avatar for nadiam

could you show me a small example of fullcalendar that retrieves data from database and displays it in the calendar?

please n tq

Member Avatar for saqib_604

Download fullcalendar and see demos/json.html

Member Avatar for nadiam

this is what i got.

<?php
    require "connection.php";

$query = "select * from event ";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
    $start = $row['start'];
    $end = $row['end'];
    $title = $row['event_name'];
    $eventsArray['title'] = $title;
    $eventsArray['start'] = $start;
    $eventsArray['end'] = $end;
    $events[] = $eventsArray;
}
echo json_encode($events);
?>

<link rel="stylesheet" type="text/css" media="all" href="css/fullcalendar.css">
<script type="text/javascript" src="js/jquery.1.7.2.js"></script>
<script type="text/javascript" src="js/fullcalendar.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar(
        {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable :true,
            events: "http://localhost/EMS2/home.php",
        });
    })
</script>

<body>
    <div id="calendar"></div>
</body>

but at the top of my page [{"title":"Game of Thrones","start":"9\/5\/2014 8:30pm","end":"9\/5\/2014 12:30am","allDay":""}] and my calendar empty

Edited by nadiam
Member Avatar for nadiam

ive given up on this.

Member Avatar for nadiam

Got it. Finally!

<script type="text/javascript">
    $(document).ready(function() {
      var calendar = $('#calendar').fullCalendar({
       editable: true,
       header: {
        left: ' today,prevYear,nextYear',
        center: 'title',
        right: 'prev,next,basicDay,month'
       },

       eventSources: ['getEvents.php','home.php']

      });
     });
</script>

getEvent.php:

<?php 
session_start();

if(isset($_SESSION['sess_user_id']))
{
        require "connection.php";
        $sess = $_SESSION['sess_user_id'];
        $result = $dbh->prepare("SELECT * FROM event WHERE euser_id = :sess");
        $result->bindParam(':sess', $sess);
        $result->execute();
        $event_array = array();

        $result->setFetchMode(PDO::FETCH_ASSOC);
        while ($record = $result->fetch()) {
            $event_array[] = array(
                'id' => $record['event_id'],
                'title' => $record['event_name'],
                'start' => $record['start_event'],
                'end' => $record['end_event'],
            );
        }

    echo json_encode($event_array);
}
?>
Member Avatar for Jennefer_1

HOW TO HIGHLIGHT SCEDULED DATE FROM DATABASE IN FULL CALENDAR USING JQUERY

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.