I am using fullCalendar to display events from a mySQL database. The problem is when events are loaded the end date of each event gets "cut off". In the example shown on the picture event should be from 1st to 3rd, but it shows 1st to 2nd.
I have tried searching but I could not find anyone with similar problem and I checked database to see how it is stated there and it works correctly at that side (It is from 1st to 3rd)
<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=booker', 'root', '');
$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$data[] = array(
'id' => $row["ID"],
'title' => $row["username"],
'start' => $row["start_date"],
'end' => $row["end_date"]
);
}
echo json_encode($data);
?>
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Book</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'load.php',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var title = prompt("Enter Event Title");
if(title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, start:start, end:end},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable:true,
eventResize:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick:function(event)
{
if(confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
</head>
<body>
<br />
<br />
<div class="container">
<div id="calendar"></div>
</div>
</body>
</html>
I just need that blue line from picture to include an end date, in this case 3rd January.
Kind Regards
Do your start_date and end_date fields contain dates and times, or just dates only?
If, as I suspect, they contain only dates, then fullCalendar will consider them "all-day" events. This means it will automatically set the time component of the start and end values of the event to midnight on the date given.
And since (as per the docs) the end date is exclusive, this means that if you specify the 3rd as the end date, without any time, then your end date becomes the 3rd at midnight. And since that's an exclusive date (i.e. it's not considered part of the span of your event), your event is then considered to end on the 2nd at 23:59:59. And that's why it doesn't shown up on the 3rd.
Alternatively, if your end_date does contain a time, and that time is earlier in the day than the value of the nextDayThreshold option, then that would, in a non-time-aware view such as "month", be a reason why your event would not extend into the 3rd. If you want to change that, then set a different value for nextDayThreshold in your calendar.
I've suggested both of these possibilities as you didn't provide us with the actual data values which are creating the output in your screenshot. Please follow whichever one is applicable to your situation.
Related
Hello stackoverflow community, I am facing a problem where my query string isn't working and it's inside the javascript, I use isset and empty to test out results and it keeps saying failed. Here is the code:
events:'load.php?loadfor="$id"',
The code is inside a fullcalendar script, I want to load an event for specific person.Full code :
$(document).on('click', '.click_hire', function(){
var to_user_id = $(this).data('touserid');
$id = $(this).data('touserid');
var calendar = $('#calendar').fullCalendar({
nextDayThreshold: '23:59:00',
forceRerenderToDisplay: true,
disableDragging: true,
header:{
left:'prev,next today',
right:'title',
center:''
},
events:'load.php?loadfor="$id"',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
$("#popup").show();
var start = $.fullCalendar.formatDate(start, "YY-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "YY-MM-DD HH:mm:ss");
$.ajax({
url:"get.popup.php",
method:"POST",
data:{start:start, end:end, to_user_id:to_user_id},
success:function(data){
$('#popup').html(data);
}
})
}
});
});
For the testing i put it on my get.popout.php.
if(isset($_GET['loadfor']))
{
echo "<h1>Success</h1>";
}
else if(empty($_GET['loadfor']))
{
echo "<h1>Failed</h1>";
}
I'd like to color events according to database. I use eventRender. Here is the whole code:
$(document).ready(function() {
var date = new Date();
var calendar = $('#calendar').fullCalendar({
header:
{
left: 'prev,next ',
center: 'title',
right: 'today'
},
selectable: true,
selectHelper: true,
fixedWeekCount: false,
allDayDefault: true,
editable: true,
events: "http://localhost/calendar_directory/calendar_db_connect.php",
eventRender: function (event, element, view)
{
if (event.confirmed == 0)
{
event.color = "#FFB999";
}
else
{
event.color = "#528881";
}
},
select: function(start, end) {
var title;
var beforeToday = false;
var check = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
if(check < today)
{
beforeToday = true;
}
else
{
title = prompt('Event Title:');
}
if (title && !beforeToday)
{
var start = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json)
{
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event, jsEvent, view)
{
//set the values and open the modal
$("#eventInfo").html(event.description);
$("#eventLink").attr('href', event.url);
$("#eventContent").dialog({ modal: true, title: event.title });
},
eventDrop: function(event, delta)
{
var check = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
if(check < today) {
alert('Select an other start time, after today!');
}
else
{
var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
}
},
eventResize: function(event)
{
var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(event)
{
var decision = confirm("Do you really want to confirm that?");
if (decision)
{
$.ajax(
{
url: "http://localhost/calendar_directory/confirm_events.php",
data: "&id=" + event.id,
type: "POST",
success: function(json)
{
console.log("confirmed");
//event.backgroundColor = 'green';
//$('#calendar').fullCalendar( 'rerenderEvents' );
}
});
}
}
});
(Please ignore clickEvent for modal).
The problem is, that it does not change the color of the events for the first time (first load of the page). But when I drop/resize an event all events gets the right color.
Before drop
After drop
table structure:
id - int, PR
title - varchar
start -datetime
end -datetime
confirmed - int (can be 0 or 1) <- The color should be change according to this
The eventRender method runs after the corresponding CSS for the event has been created. Therefore changing the properties of the event which relate to formatting/rendering at this point in the process has no effect - they have already been processed.
Luckily, you also get the "element" parameter passed to you in the callback - this gives you access to the rendered HTML, which you can then manipulate.
Setting the "color" property of an event actually affects the background and border colours of the rendered element, so we can replace what you did with:
eventRender: function (event, element, view)
{
if (event.confirmed == 0)
{
element.css("background-color", "#FFB999");
element.css("border-color", "#FFB999");
}
else
{
element.css("background-color", "#528881");
element.css("border-color", "#528881");
}
}
This should have the desired effect. Arguably this is a bug/undesirable feature in fullCalendar - you'd want to still be able to manipulate the event's properties fully and expect them to take effect. On the other hand, getting the "element" parameter effectively gives you full control over the rendering of the event, more than you would just via setting the event's properties. If this method ran before the element was created, you wouldn't have access to the element, with all the extra power that gives you. So it's a trade-off, but it's worth understanding the internals in order to know what you can change, and when in the process you can do it.
I can't add the event title that I entered through the popup box.
I have this jquery code where I placed my ajax code:
$(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,
events: "http://localhost/test/events.php",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
/*
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/test/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
alert('OK');
}
});
*/
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
}
});
});
then I have this add_events.php where the insert query is written
<?php
$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];
// connect to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
} catch(Exception $e) {
exit('Can not connect to the database.');
}
$sql = "INSERT INTO evenement (title, start, end) VALUES (:title, :start, :end)";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));
?>
I commented a code snippet from my default.html because I think this is where the problem lies. When I comment this code snippet, I can add an event through a popup box and after confirming the event title, the event title will be plainly visible in my fullCalendar(but not yet added in the database). But if I "uncomment" that section, the typed event title through the popup box does not appear in my fullCalendar(and obviously, it is not yet added in my database)
Can someone help me edit my ajax code so that I can make the typed event title through the popup box appear in my fullCalendar and be succesfully added in my database.
Thanks in advance!
I think your bug is in your Ajax call and the way you set your data in post call.
Your data attribute should be like this:
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
var title = "Title name";
$.ajax({
url: 'http://localhost/test/add_events.php',
data: {
title: title,
start: start,
end: end
},
type: "POST",
success: function(json) {
alert('OK');
}
});
I searched around for solution, I look at my code again and again, but I am new at ajax and php, here is my code for the calendar:
<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://mysite.site40.net/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://mysite.site40.net/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
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://mysite.site40.net/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventClick: function(event) {
var decision = confirm("Do you really want to do that?");
if (decision) {
$.ajax({
type: "POST",
url: 'http://mysite.site40.net/fullcalendar/delete_event.php',
data: '&id=' + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
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://mysite.site40.net/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
I have event.php and add_event.php
event.php
<?php
// liste des evenements
$json = array();
// requete qui recupere les evenements
$requete = "SELECT * FROM evenement ORDER BY id";
// connexion a la base de donnees
try {
$bdd = new PDO('mysql:host=myhost;dbname=dbname', 'username', 'password');
} catch(Exception $e) {
exit('Impossible de se connecter a la base de donnees.');
}
// execution de la requete
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// envoi du resultat au success
echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>
add_event.php
<?php
$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];
// connexion a la base de donnees
try {
$bdd = new PDO('mysql:host=myhost;dbname=dbname', 'username', 'password');
} catch(Exception $e) {
exit('Impossible de se connecter a la base de donnees.');
}
$sql = "INSERT INTO evenement (title, start, end) VALUES (:title, :start, :end)";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));
?>
Is something wrong?
I have two folders in calendar folder css and js. I have to move all of the css and js files there.
I manually added events to my db and I try to show them with php and work perfectly.
The problem is adding an event to a calendar by clicking on a να day. I can't add an event by clicking on a day. The dialog appears and I wrote text as the title. I pressed ok but nothing in the database and the calendar. The event didn't added.
Thanks
The problem was those lines
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
change to
var start = moment(start).format('YYYY-MM-DDTHH:mm:ssZ');
var end = moment(end).format('YYYY-MM-DDTHH:mm:ssZ');
but the second problem still there. when i click (in day view) on any hour the event saved with 00:00:00 time... and the row doesnt turn to blue resizable row.. with duration.. but go top to all day events
edit: i put an alert with start. When i click on 9:00am to add event show that 2015-08-17T09:00:00+00:00. but in database save 00:00:00
edit 2: i make a change this
var start = moment(start).format('YYYY-MM-DDTHH:mm:ssZ');
var end = moment(end).format('YYYY-MM-DDTHH:mm:ssZ');
to this
var start = moment(start).format('YYYY-MM-DD HH:mm:ssZ');
var end = moment(end).format('YYYY-MM-DD HH:mm:ssZ');
and save the event with time. but in day view the event appear to all day event and not in list with hours. When im trying to drag and drop ninside that list, goes there but as a litle line at the top of the row... (and when refresh the page the event will go back to allday events as i have problem with moving events...)
any ideas?
I am currently working away with FullCalendar, which is pretty cool and has done a lot of neat stuff for me. The only problem I'm having is that if I edit an event, and then try and create another event the javascript seems to hold onto the initial events data.
I am using calendar.fullCalendar('unselect') when I need the link to end, but it doesn't seem to make a difference no matter what I do. I'm hoping you guys might be able to see something I'm overlooking.
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
selectable: true,
unselectAuto: true,
selectHelper: true,
editable: true,
select: function(start, end, allDay) {
//var title = prompt('Event Title:');
//var desc = prompt('Event Description:');
//calendar.fullCalendar('unselect');
$('#eventStart').val(start);
$('#eventEnd').val(end);
$('#eventAllDay').val(allDay);
$('#formName').fadeIn();
$('.closeSchedule a').click(function(){
$('#formName').fadeOut('slow');
$('#calendar').fullCalendar('unselect');
//alert(jsEvent);
});
},
events: [
<?php
$first = true;
foreach ($events as $event)
{
if ($first == true)
{
$comma = '';
$first = false;
}
else
{
$comma = ',';
}
echo $comma."
{
id: '".$event->id."',
title: '".addSlashes($event->title)."',
start: '".$event->start."',
end: '".$event->end."',
allDay: ".$event->allDay."
}";
$first = false;
}
?>
],
eventClick: function(event) {
//alert(event.id);
$.ajax({
url: './schedule/getEdit/'+event.id,
success: function(data) {
var formEmpty = $('formName').html();
$('#formName').html(data);
$('#formName').fadeIn('fast');
$('.closeSchedule a').click(function(){
$('#formName').fadeOut('slow');
$('#calendar').fullCalendar('unselect');
});
$('#deleteEvent').live('click', function(){
var answer = confirm("Are you sure you wish to delete this event?")
if (answer){
$.ajax({
type: "POST",
url: "./schedule/deleteEvent/"+event.id,
success: function(msg){
$('#formName').fadeOut('fast');
calendar.fullCalendar( 'removeEvents', [event.id ] )
$('#calendar').fullCalendar('unselect');
}
});
}
});
$('#updateEvent').live('click', function(){
var title = $('#eventName').val();
var trainerID = $('#eventTrainer').val();
var trainer = $('#eventTrainer option:selected').text();
var classID = $('#eventType').val();
var eventType = $('#eventType option:selected').text();
var eventStart = $('#eventStart').val();
var eventEnd = $('#eventEnd').val();
var eventAllDay = $('#eventAllDay').val();
if (eventAllDay == 'false')
{
allDay = false;
}
else
{
allDay = true;
}
// This runs the ajax to add the event to the database.
newData = 'title='+title+'&trainerID='+trainerID+'&classID='+classID+'&start='+eventStart+'&end='+eventEnd+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/updateEvent/"+event.id,
data: newData,
success: function(msg){
event.title = title;
calendar.fullCalendar('rerenderEvents');
//calendar.fullCalendar('unselect');
$('#calendar').fullCalendar('unselect');
}
});
$('#formName').fadeOut('fast');
$('#eventName').val('');
$('#eventTrainer').val();
$('#eventType').val();
});
}
});
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
newData = 'start='+event.start+'&end='+event.end+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/updateEventTime/"+event.id,
data: newData,
success: function(msg){
}
});
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
newData = 'start='+event.start+'&end='+event.end+'&allDay='+event.allDay
$.ajax({
type: "POST",
url: "./schedule/updateEventTime/"+event.id,
data: newData,
success: function(msg){
}
});
}
});
$('#submitEvent').click(function(){
$('#calendar').fullCalendar('unselect');
var title = $('#eventName').val();
var trainerID = $('#eventTrainer').val();
var trainer = $('#eventTrainer option:selected').text();
var classID = $('#eventType').val();
var eventType = $('#eventType option:selected').text();
var eventStart = $('#eventStart').val();
var eventEnd = $('#eventEnd').val();
var eventAllDay = $('#eventAllDay').val();
if (eventAllDay == 'false')
{
allDay = false;
}
else
{
allDay = true;
}
// This runs the ajax to add the event to the database.
newData = 'title='+title+'&trainerID='+trainerID+'&classID='+classID+'&start='+eventStart+'&end='+eventEnd+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/addEvent",
data: newData,
success: function(msg){
var description = '<ol><li>'+title+'</li><li>'+trainer+'</li><li>'+eventType+'</li><li class="eventID hide">'+msg+'</li>';
calendar.fullCalendar('renderEvent',
{
id: msg,
title: title,
description: description,
start: eventStart,
end: eventEnd,
allDay: allDay
},
true // make the event "stick"
);
calendar.fullCalendar('unselect');
//calendar.fullCalendar( 'rerenderEvents' )
}
});
$('#formName').fadeOut('fast');
$('#eventName').val('');
$('#eventTrainer option:selected').removeAttr('selected');
$('#eventType option:selected').removeAttr('selected');
});
});
</script>
At this point, I feel like I've tried it all, and I'm just hoping a fresh set of eyes will see what I missed.
Ok took a quick look it looks like you aren't initializing the form with a blank form for the add action in the "select:" function of your full calendar:
In your event click you are doing this:
$('#formName').html(data);
I don't see where you are clearing that with a blank form for a new event. (might have just missed it there is a lot of code there)
Let me know.