My problem is about events for calendar, precisely speaking i dont know how to dynamically add data for events here is my code in view file
<div>
<?php $message = Message::model()->findAll(); ?>
<?php foreach($message as $messag): ?>
<?php $names[] = $messag['contacts']; ?>
<?php $date[] = $messag['send_datetime']; ?>
<?php endforeach; ?>
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
title: '<?php echo $names[0]; ?>',
start: '<?php echo $date[0]; ?>',
url: 'view/1'
},
{
title: '<?php echo $names[1]; ?>',
start: '<?php echo $date[1]; ?>',
url: 'view/2'
},
{
title: '<?php echo $names[2]; ?>',
start: '<?php echo $date[2]; ?>',
url: 'view/3'
},
{
title: '<?php echo $names[3]; ?>',
start: '<?php echo $date[3]; ?>',
url: 'view/4'
},
]
})
$('#calendar').fullCalendar('changeView', 'agendaWeek');
});
</script>
<div id='calendar'>
</div>
i dont know how to code it in such a way that it will add as many events as i have data in database. i would be very grateful if someone could help
I would load the events by ajax. You basically have two parts. The one file with datatable/javascript and the other file is the data source. It is a php file that gets all the data from database and outputs the events in json format.
to get the events from a the file use fullCalendar like this (simplified version):
$('#calendar').fullCalendar({
events: {url: 'myevents.php'}});
and in your myevents.php you make the usual database requests and out put your data like this:
<?php
//Do the Database stuff here...
//Here is a sample data for two events:
$events = array();
$agenda['allDay'] = true;
$agenda['start'] = '2014-08-25 12:00:00';
$agenda['end'] = '2014-08-30 12:00:00';
$agenda['title'] = "Hello World";
$agenda['id']= "1";
$events[] = $agenda;
$agenda['allDay'] = false;
$agenda['start'] = '2014-08-27 12:00:00';
$agenda['end'] = '2014-08-27 16:30:00';
$agenda['title'] = "Blah";
$agenda['id']= "2";
$events[] = $agenda;
echo json_encode($events);
exit();
Related
It is possible to display both custom event coming from the database and Google Calendar using FullCalendar? I've done to display my custom event from database and I want to display also the holidays in my country using Google Calendar. My question is, it is possible to do that in FullCalendar? Here's my code:
googleCalendarApiKey: 'AIzaSyBTYvbg3gKLNi0A8qOXMyk6q-EnzM6DZq4',
events: [ googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com',
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
events: [ googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com'...JS arrays can't contain named items...not sure this will even compile in the browser. Are you getting a console error, by any chance? Even if this was valid JS, you can't specify a google calendar as one item of your events array, fullCalendar is expecting "events" to be either a URL or an array of objects, not a combination. If you want to combine data from your database with data from an external source e.g. google calendar, then what you're probably looking for is "event sources" (see https://fullcalendar.io/docs/eventSources)
This way you can give fullCalendar a list of different ways to get events. The first entry can be the data generated by your PHP code, and the second can be your Google Calendar details, which tell it to go away and download the events from Google Calendar:
Remove your events: option from the code and instead specify:
eventSources: [
//first event source:
[
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
],
//second event source:
{
googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com'
}
]
N.B. If you want to incorporate Google Calendar events, make sure you've also followed al the steps outlined at https://fullcalendar.io/docs/google-calendar
You should be able to do that with addEventSource:
$('#myCal').fullCalendar( ‘addEventSource’, source );
where
Source may be an Array/URL/Function just as in the events option.
Events will be immediately fetched from this source and placed on the
calendar.
So, source could be either the Google url or an array with your events.
Use:
eventSources: [{googleCalendarId: 'xxxxxxxxx#gmail.com', className: 'gcal-event'},{url:'events.php',}],
EDIT
Is it possible to send the json data into this part:
$.each( res, function(key, row)(
{
events: [
{
title: 'All Day Event',
start: //from AJAX row['name'],
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
...
I am trying to add data from MysQL into fullcalendar.
Here is my fullcalendar script:
<script>
(function ($) {
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/get-events.php',
//url: 'fullcalendar/myfeed.php',
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
})(jQuery);
</script>
Where I get values from get-events.php, and here is the code:
<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);
//Include connection file
require_once('global.php');
//Json and PHP header
header('Content-Type: application/json');
$events = array();
$user = $_SESSION['username'];
$id_logged = $_SESSION['login_id'];
$search_date = "SELECT * FROM appointment WHERE id_logged = :id_logged";
$search_date_stmt = $conn->prepare($search_date);
$search_date_stmt->bindValue(':id_logged', $id_logged);
$search_date_stmt->execute();
$search_date_stmt_fetch = $search_date_stmt->fetchAll();
$search_date_stmt_count = $search_date_stmt->rowCount();
$i = 0;
foreach($search_date_stmt_fetch as $row)
{
$events[$i] = $row;
$i++;
}
echo json_encode($events);
?>
The result is show properly at the XHR:
But I can't see any of them in the calendar:
Build your response like the doc said :
$search_date_stmt_fetch = $search_date_stmt->fetchAll();
$search_date_stmt_count = $search_date_stmt->rowCount();
foreach($search_date_stmt_fetch as $row)
{
$events[] = array(
'start' => $row->your_date_start,
'end' => $row->your_date_end,
'id' => $row->your_id
...);
}
echo json_encode($events);
See the doc to know the properties you need : http://fullcalendar.io/docs/event_data/Event_Object/
I am implementing jquery full calendar in my PHP website. when i am clicking on any date of calendar it is giving me a prompt. There is a input field asking for event title. I want to change this input field and want a drop down list in place of input field. Is it possible? This is the calendar that i am using http://fullcalendar.io/
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?php echo date("Y-m-d"); ?>',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Please fill schedule title & add fees');
var eventData;
if (title) {
eventData = {
title: title,
url: 'javascript:fee_add("' + title + '","' + start +'");',
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<?php
if($mysql->rowCount($query) > 0)
{
$rows = $mysql->fetchArray($query);
foreach($rows as $row)
{
if($row['date_time'] !='0000-00-00 00:00:00')
{
$date1 = date_create_from_format('Y-m-d H:i:s', $row['date_time']);
$date = date('Y-m-d', $date1->getTimestamp());
$time = date('H:i', $date1->getTimestamp());
$time_hr = date('H:i:s', $date1->getTimestamp());
}
?>
{
title: '<?php echo $row["fee_title"]; ?>',
url: 'javascript:fee_edit(<?php echo $row["id"]; ?>,"<?php echo $row["fee_title"]; ?>","<?php echo $date . " " . $time_hr; ?>");',
start: '<?php echo $date; ?>T<?php echo $time ?>'
},
<?php
}
}
?>
]
});
});
</script>
</div>
<div id='calendar'></div>
This is the code i am implementing and just want dropdown list in place of title
Thanx in advance
Prompt is a built is js component. You shouldn't attempt to override it. Try using a custom dialog/modal. jQuery UI has a great dialog component that would allow you to utilize a select element or any other html you see fit.
I have a form that using ajax to post the comment to video_comment.php then show up the comment live on video page.
This is my jquery code:
$("input[id*='post_video_playallcomment_']").livequery('click', function(event) {
event.preventDefault();
var video_msg = $("#post_message");
var input_id = $(this).attr('id');
var id_split = input_id.split('_');
var video_id = id_split[3];
var comment = $("textarea[id='video_comment']").val();
var response_messages = '#video_response';
if ( comment == '' ) {
video_msg.fadeIn();
return false;
}
video_msg.hide();
user_posting(response_messages, '<?php echo $lang['600']; ?>', 1);
reset_chars_counter();
$.post(base_url + '/video_comment.php', { video_id: video_id, comment: comment },
function(response) {
if ( response.msg != '' ) {
$(response_messages).hide();
user_posting(response_messages, response.msg);
$("textarea[id='video_comment']").val('');
} else {
$(response_messages).hide();
user_response(response_messages, '<?php echo $lang['587']; ?>');
$(".no_comments").hide();
$("textarea[id='video_comment']").val('');
var bDIV = $("#comments_delimiter");
var cDIV = document.createElement("div");
$(cDIV).html(response.code);
$(bDIV).after(cDIV);
}
}, "json");
});
On video_comment.php, this is the response.code to show up the comment live on video page.
echo 'text...
echo '<div id="commentplayer"></div>';
echo '<script type="text/javascript">';
echo 'jwplayer("commentplayer").setup({';
echo 'file: "...url",';
echo 'width: "300",';
echo 'height: "225",';
echo 'provider: "http",';
echo 'startparam: "start",';
echo 'wmode: "transparent",';
echo 'controls: "true",';
echo 'stretching: "uniform",';
echo 'primary: "flash",';
echo 'autostart: "false",';
echo 'ga: {}';
echo '});';
echo '</script>';
echo 'text...
I have no problem to get 'text...', but i can't get '<script type="text/javascript">function...</script>' to show up live on video page.
Help please...
instead of placing javascript code in the php return, why dont you place it in the .post response?
$("input[id*='post_video_comment']").click(function() {
$.post('video_comment.php', function(response) {
$('#comment').html(response.code);
//place javascript code here
}, "json");
});
or placing a onload before your js code
$str = '<div id="commentplayer"></div>
<script type="text/javascript">
window.onload=(function() {
jwplayer("commentplayer").setup({
file: "...url",
width: "300",
height: "225",
provider: "http",
startparam: "start",
wmode: "transparent",
controls: "true",
stretching: "uniform",
primary: "flash",
autostart: "false",
ga: {}
});
});
</script>';
echo $str;
I wrote a code using jQuery plugin fullcalendar, and everything worked just fine, until I send an $.ajax request in the eventClick.
I tried to alert something in the eventClick and it worked, but the ajax request just doesn't work.
js code:
!function($)
{
$(document).ready(function() {
$("#eventDialog").dialog({
autoOpen : false,
modal : true
});
var date = new Date();
var d = date.getDay();
var m = date.getMonth();
var y = date.getFullYear();
$("#calendar").fullCalendar({
theme : true,
header : {
left : 'next,prev today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
editable : false,
events : [
<?php
while ($event = mysql_fetch_array($selectevents))
{
$startd = explode(".", $event['start']);
$endd = explode(".", $event['end']);
$starth = explode(":", $event['starth']);
$endh = explode(":", $event['endh']);
?>
{
id : <?php echo $event['id']; ?>,
title : '<?php echo stripslashes($event['title']); ?>',
<?php
if ($event['allday'] == 1)
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>)
<?php
}
else
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>,<?php echo $starth[0]; ?>,<?php echo $starth[1]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>,<?php echo $endh[0]; ?>,<?php echo $endh[1]; ?>),
allDay : false
<?php
}
?>
}
<?php
$evNum--;
if ($evNum > 0)
echo ",";
}
?>
],
eventClick : function(event) {
var eid = event.id;
$.ajax({
type : "GET",
url : "getEvent.php",
data : "id=" + eid,
succuss : function(msg) {
var title = $("event title", msg).text();
var description = $("event description", msg).text();
var start = $("event start", msg).text();
var end = $("event end", msg).text();
var starth = $("event starth", msg).text();
var endh = $("event endh", msg).text();
$("#eventDialog").attr("title", title);
$("#eventDialog #edDescription").html(title);
eventDialog.dialog("open");
}
});
}
});
});
}(jQuery);
getEvent.php
$id = htmlspecialchars(mysql_real_escape_string($_GET['id']));
$selectevent = mysql_query("SELECT * FROM `calendar` WHERE `id`='$id'") or die(mysql_error());
$event = mysql_fetch_array($selectevent);
header("Content-Type: text/xml; charset=utf-8");
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo "<event>";
echo "<id>".$event['id']."</id>";
echo "<title>".stripslashes($event['title'])."</title>";
echo "<description>".$event['description']."</description>";
echo "<start>".$event['start']."</start>";
echo "<end>".$event['end']."</end>";
echo "<starth>".$event['starth']."</starth>";
echo "<endh>".$event['endh']."</endh>";
echo "</event>";
Can anybody point out the problem?
Thank's!
succuss??, i guess is this your problem , it should be "success"
Change succuss to success in your code it must be a typo.
Since jQuery $.ajax did not find the success handler in its settings it didn't do anything.