saroj kumar choudhury saroj kumar choudhury - 1 year ago 66
Javascript Question

How can i read events from my database table and show them in their respective dates in java script and jquery

i use Full calendar plugin to do this and i have done something but still did not get up to mark.
hear is my scripting code

$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {//This is to add icons to the visible buttons
prev: "<span class='fa fa-caret-left'></span>",
next: "<span class='fa fa-caret-right'></span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(date) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;

copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
console.log(copiedEventObject);

// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
/*alert(date + ' was moved ' + allDay + ' days\n' +
'(should probably update your database)');*/
},
//events:"web_master/mycal/ajax_fetch_calendar_data",
events: function(start, end, timezone, callback) {
$.ajax({
url: 'web_master/mycal/ajax_fetch_calendar_data',
dataType: 'json',
type: "POST",
success: function(doc) {
//console.log(doc);
var events = [];
$(doc).find('event').each(function(){
console.log(doc);
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});

}
});
},
});


in this i successfully found my doc in events section.
here is the code to fetch events from DB

public function ajax_fetch_calendar_data()
{
try
{
$info = $this->mod_rect->fetch_calendar();
#pr($info);
for($i = 0 ; $i < count($info) ; $i++)
{
$rows[]= array("id"=>$info[$i]['i_id'],
"title"=> $info[$i]['s_title'],
"start"=> $info[$i]['dt_start_date'],
"end"=>$info[$i]['dt_end_date'],
"allDay"=> $info[$i]['s_allDay']);

}
if($rows)
{
echo json_encode($rows);
}



}
catch(Exception $err_obj)
{
show_error($err_obj->getMessage());
}

}


but there is an find(event) function which is didn't found.

Basically what i need to do that
i have some events, those are fetch from DB and i have to drag them on the specific date on the date that comes(upto this done), but i want to store that in Db and fetch them from DB.

I am new to java script and jquery and i didn't know about JSON also.
any help regarding this will helpfull to me.
Thanks.

Answer Source

Well

After few days I have done it myself.

And I think it would be help full to someone So i update my Question

In the Events Section of Fullcalendar for reading multiple events and showing them in your Fullcalendar

events: function(start, end, callback) {
                    $.ajax({
                        url: 'web_master/mycal/ajax_fetch_calendar_data',
                        dataType: 'json',
                        type: "POST",
                        success: function(doc) {
                            var eventObject = [];
                            for(i=0;i<doc.length;i++)
                            {
                                    eventObject.push({
                                    id : doc[i].id,
                                    start : doc[i].start,
                                    end : doc[i].end,
                                    title : doc[i].title
                                    //allDay : doc[i].allDay,
                                    //backgroundColor : doc[i].backgroundColor,
                                    //borderColor : doc[i].borderColor
                                });
                            }
                            callback(eventObject);
                        }
                    });
                },

And i fetch it from my DB in this way

public function ajax_fetch_calendar_data()
    {
        try
        {    
            $info = $this->mod_rect->fetch_calendar();
            echo  json_encode($info);
        }
        catch(Exception $err_obj)
        {
            show_error($err_obj->getMessage());
        }

    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download