I'm brand new to javascript and php and having a slight problem.
I'm trying to create a php calendar that interacts with mysql database and have been trying to write some javascript to add events to the calendar.
My events are being brought from the mysql database but whenever I click to add an event to the calendar I get an error in the console saying "uncaught TypeError: undefined is not a function" which appears to be caused by these lines in the code:
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
My code is below, console log 'testing function success' is not being displayed. Please help!
$(document).ready(function() {
//get current date
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
theme:true,
weekNumbers: true,
//allow a 'more' option if too many events.
eventLimit: true,
//enables agenda view
header:{
left:'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'event.php',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
console.log('testing function 1');
var title = prompt('Event Title:');
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: 'eventadd.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
console.log('testing function success');
alert('OK');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
});
});
Instead of lines
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
use (take care not to redefine local varialbes start, end, which are params of the function, also use Moment's format function according to: http://momentjs.com/docs/#/displaying/format/ as recommended by the fullCalendar v2 code migration):
var sfmated = start.format("yyyy-MM-dd HH:mm:ss");
var efmated = end.format("yyyy-MM-dd HH:mm:ss");
a working jsfiddle is here:
http://jsfiddle.net/xv5n1wod/12/
Related
I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.
I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.
I don't know where the problem comes from
this is my code :
<div class="modal fade" id="PrestUpt" role="dialog" class="modal fade task-modal-single in" tabindex="-1" aria-labelledby="myLargeModalLabel" >
<div class="modal-dialog modal-lg">
<div class="modal-content data">
<div id="jalil" ></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// jQuery("#PrestUpt").modal('show');
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
firstDay: 1,
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'event_load_new.php',
selectable:true,
selectHelper:true,
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
// var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
document.getElementById('start').value = start;
$('#exampleModal').modal('show');
},
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:"event_update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert("Mise à jour de l'événement");
}
})
},
eventClick: function(info) {
var idpr = info.event.id;
alert(idpr);
// datepr = datepr.substr(6, 4)+ '' +datepr.substr(3, 2)+ '' +datepr.substr(0, 2);
$.ajax({
type : 'post',
url : 'moadal_gool.php', //Here you will fetch records
data : 'idp='+idpr, //Pass $id
success : function(data){
$('#jalil').html(data);//Show fetched data from database
jQuery("#PrestUpt").modal('show');
}
});
},
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:"event_update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Événement mis à jour");
}
});
},
});
});
</script>
This is how you do it...
eventClick: this.openModal.bind(this)
//then create a function openModal()
openModal(args:any){
jQuery("#PrestUpt").modal("show");
...
}
I'm relatively new to programming and some help would be greatly appreciated.
I am using fullcalendar and have got it to the point where I can add, remove & drag and drop events. My last requirement is to be able to clone events for quicker management.
I am using the following code to clone events (taken from a previous post). Currently this does not save to the database:
eventClick: function (event, jsEvent, ui, view) {
if (!copyKey) return;
var eClone = {
id: event.id+1,
title: event.title,
tooling: event.tooling,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
},
An example piece of code I have used to update my SQL database is here:
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 tooling = event.tooling;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, tooling:tooling, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
}
});
},
My main confusion is how to use AJAX for my clone function, also making sure to increment the id when a new event is created.
Had to make use of insert.php rather than update.php...
Final working code:
eventClick: function (event, jsEvent, ui, view)
{
if (!copyKey) return;
var eClone = {
id: event.id,
title: event.title,
tooling: event.tooling,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
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 tooling = event.tooling;
var id = event.id;
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, tooling:tooling, start:start, end:end, id:id},
success:function()
{
$('#calendar').fullCalendar('renderEvent', eClone);
calendar.fullCalendar('refetchEvents');
}
});
},
I am making the reservation website by using full calendar. I want to change the date that user booked by dragging the event to other place. However, the drag is worked, but drop is not working. When I drop the event, then the event just disappear, and when I reload the page, then it appear where it used to be.
Here is code for javascript
$(function() { // document ready
var originalDate;
$('#calendar').fullCalendar({
eventDragStart: function(event) {
originalDate = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm"); // Make a copy of the event date
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm");
//get new Date
var id = event.id; //get userID who booked this event
$.ajax({
url:"http://show981111.cafe24.com/login-system/update.php",
type:"POST",
data:{newlyBookedDate: start, userID: id, oldDate: originalDate}, // send data
success:function()
{
console.log(response);
$("#calendar").fullCalendar('refetchEvents');
alert("Date has changed.");
location.reload();
}
});
},
Here is code for update.php.
What I am trying to do here is get the changed Date, and update the newly booked Date,which had the old Date, to newly booked Date, which is changed Date when I get from eventDrop.
<?php
$connect = new PDO('mysql:host=localhost;dbname=show981111', 'show981111', 'pass');
if(isset($_POST["newlyBookedDate"]))
{
$query = "UPDATE DAYSCHEDULE SET newlyBookedDate = :newlyBookedDate WHERE userID = :userID AND newlyBookedDate = :oldDate ";
$statement = $connect->prepare($query);
$statement->execute(
array(
':newlyBookedDate' => $_POST['newlyBookedDate'],
':userID' => $_POST['userID'],
':oldDate' => $_POST['oldDate']
));
}
?>
I checked console, and have this error:
fullcalendar.min.js:10 Uncaught TypeError: Cannot read property 'start' of undefined
at function.e.constructor.buildNewDateProfile (fullcalendar.min.js:10)
at function.e.constructor.mutateSingle (fullcalendar.min.js:10)
at function.e.constructor.R.internalApiVersion.f.mutateSingle (scheduler.min.js:6)
at fullcalendar.min.js:10
at Array.forEach (<anonymous>)
at constructor.mutateEventsWithId (fullcalendar.min.js:10)
at reportEventDrop (fullcalendar.min.js:9)
at fullcalendar.min.js:7
at i (fullcalendar.min.js:7)
at constructor.stop (fullcalendar.min.js:7)
I'm trying to disable booked dates on datepicker. My code simply posts an ID to ajax.php file and i run a mysql query based on that id and get start and end dates. then i make an array that contains these dates and the ones in between. Finally I get this json_encoded array and it basically defines dates to be disabled on my bootstrap datepicker. I have recently found out that nothing is wrong with $.post method and changed the title. The problem was beforeShowday, it doesn't rerun after changes. Here is the jQuery code:
$.ajaxSetup({ cache: false });
var date = new Date();
date.setDate(date.getDate());
function getJsonRes(urlid){
var tarihler = [];
var url="ajax.php";
$.post( url, {"id":urlid}, function(data) { //this is the post request
$.each( data, function(key, val) { //to retrieve json encoded data
var tarih=val;
tarihler.push(tarih);
});
var disabledDays = tarihler;
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return false;
}
}
return true;
}
$('#grs').datepicker({ //this is start date
language:'tr',
todayHighlight:true,
weekStart: 1,
startDate:date,
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))+1);
$('#cks').datepicker('setStartDate', startDate);
});
$('#cks').datepicker({ //this is end date
todayHighlight:true,
weekStart: 1,
language:'tr',
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('#grs').datepicker('setEndDate', FromEndDate);
});
}, "json");
}
$('#choice').change(function(){
var idvalue=$(this).val();
getJsonRes(idvalue);
});
.js code is loaded on index.php load. I want to send [date var] to php
$(function() {
$('#datepicker').datepicker( {
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showButtonPanel: true,
numberOfWeek: 0,
dateFormat: 'yy-mm',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
var date = year +'-'+month;
var newDate = new Date(year, month, 1)
$(this).datepicker('setDate',newDate);
}
});
});
You can place whatever you want to send in reqObject. You can access this object in you php code as the requestBody.
Call back is the function you want to execute after you get response from the server.
url is noting but the url to which you are posting your data
var reqObject = {"newDate":newDate}
var type = 'POST'
var url = "your post url"
var callback = function(data){
console.log(data)
//Your code goes here
}
sendData(type,reqObject,url,callBack);
sendData: function(type,reqObject,url,callBack) {
$.ajax({
type: type,
data: reqObject ,
dataType: "json",
url: url ,
success: function(response){
callBack(response);
}
});
}