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>";
}
Related
i have the following data
then i want to display in full calendar
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
}
})
}
});
calendar.render();
});
the data doesn't appear in the calendar, but it does appear in console.log
There are two issues here:
events: function(start, end, timezone, callback) { is wrong for fullCalendar 5. That looks like the syntax from an earlier version. https://fullcalendar.io/docs/v5/events-function shows the function's signature in v5, which is
function( fetchInfo, successCallback, failureCallback ) {
You forgot to use the provided callback to return the events to fullCalendar. So your function is downloading the events and logging them, but they never make it to the calendar.
Therefore this:
events: function( fetchInfo, successCallback, failureCallback ) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
successCallback(events);
}
})
}
should fix it.
P.S. Really you should also be using the start and end dates provided inside the fetchInfo object to send to your server, and the server should be using them to restrict the events it returns to only those which occur (or overlap) within those dates. That way you don't return a large number of events which mostly never get viewed, instead you only return what's relevant to the date range bein displayed.
I am using fullcalendar v4 (https://fullcalendar.io/) and I am trying to delete events when the event is clicked.
When I click on an event, I have this code to delete the event:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pt',
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
// CUSTOM CODE DATABASE
events: load.php,
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
calendar.refetchEvents();
}
})
}
},
});
calendar.render();
});
The event is getting deleted in the database, so the function works fine, but the events don't refresh and the deleted event is still showing in the calendar. It only disappears when I fully refresh the page, which is not ideal.
Any idea why?
It doesn't look like the calendar object is ever being initialized.
I would try changing your event listener as described in the documentation:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
Ref. https://fullcalendar.io/docs/initialize-globals
I am assuming you are using script tags, but if you're using a build system (i.e. webpack), then you can try this: https://fullcalendar.io/docs/initialize-es6
For removing an event, I would just try this:
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
//calendar.refetchEvents(); // remove this
clickedInfo.event.remove(); // try this instead
}
})
}
},
Ref. https://fullcalendar.io/docs/Event-remove
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 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.