We Keep Coding

Drag and drop full calendar doesn't fire php script

Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
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:');
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: 'process/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,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/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: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>

How to set 3 months date range from current date in date picker?

I want to enable only 3 months from current date in bootstrap datepicker.
function addThreeMonthsToStartDate(today) {
var lastDate = new Date(today.getFullYear(), today.getMonth()+3, getDate());
return lastDate;
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Any ideas?

Solution to your problem it allows only 3 months from current date.
$('#startdate').datepicker({
maxDate: "+90d",
minDate:0
});

Try this
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
minDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Thanks a lot for your suggestions. I got the solution as below:
$("#startdate").datepicker({
isDisabled: function(date) {
var d = new Date();
return date.valueOf() < d.setMonth(d.getMonth()+3) ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: 0,
dateFormat: "dd/mm/yyyy"
});

you most use startDate and endDate in bootstrap datepicker
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
startDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
endDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Limit Bootstrap DatePicker to 30 Days

I have, on my application two datepickers, StartDate and EndDate. I would like to set a limit of 30 days, because the amout of data in a bigger range will be huge and the application will freeze.
I would like something like: If user select on the startDate today, on the endDate will apear only, the 30 days next. But if the user choose today on the endDate, enable only the 30 past days.
My Code:
$('#data_1 .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
language: 'pt-BR'
});
$('#data_2 .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
language: 'pt-BR'
});

I solve my problem this way... On button click
var data1 = $('#data1').val();
var data2 = $('#data2').val();
var umDia = 24 * 60 * 60 * 1000; // horas*minutos*segundos*milisegundos
var dias = Math.round(Math.abs((toDate(data1.substr(0, 10)).getTime() - toDate(data2.substr(0, 10)).getTime()) / (umDia)));
So, I did a condicional like:
if (dias < 31)
{
$.ajax({
url: '/Portaria/AtendOperador',
dataType: "json",
type: "GET",
data: { 'data1': data1, 'data2': data2, 'evento': evento, 'cuc': cuc, 'conta': conta },
async: false,
cache: false,
delay: 15,
success: function (data) {

How could I add a dateformat of dd-mm-yy with my script of jQuery datepicker?

I tried adding dateFormat: "dd-mm-yy",
but then the rest of the functions just don't work.
Then I tried to change the format globally,
$.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
But it didn't work either.
I am using jquery-1.9.1, and jquery-ui-1.10.3.
$(document).ready(function formUi() {
var dateToday = new Date();
$("#datepicker-round-trip-1").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
maxDate: new Date(new Date($('datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday, maxDate: null });
}
else {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#datepicker-round-trip-2").datepicker("option", "minDate", newDate);
}
});
$("#datepicker-round-trip-2").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
minDate: new Date(new Date($('#datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-2").datepicker('option', { minDate: dateToday, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("datepicker-round-trip-1").datepicker("option", "maxDate", newDate);
}
});
});
The script just sets the datepicker's minDate to the last date selected in the previous date picker. Any help or guidance is appreciated :)

Try this: http://jsfiddle.net/MXstJ/ or http://jsfiddle.net/gc4nM/
Helpful link: http://jqueryui.com/datepicker/
Hope this fits your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d',
dateFormat: 'dd-mm-yy',
defaultDate: new Date()
});

datepicker is not firing beforshow event

Below is my code for a datepicker in dialog box which works good but I want to set my default date and calender date as per the php server time not as per the local timezone.
for that I am trying to do a beforeshow but which is not firing at all.
Any suggestions from anyone???
$('#chooseDt').click(function() {
$("#Date_calendar").dialog({
open: function(event, ui) {
$( "#dpicker" ).datepicker({
autoSize: true,
showOtherMonths: true,
numberOfMonths: 3,
showCurrentAtPos: 1,
onSelect: function(input, inst) {
var currentDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
var unixdate = currentDate.getTime() / 1000;
$(this).datepicker('destroy');
$(this).parent("div#Date_calendar").dialog( "close" );
window.location.href="xxxxxx.php?homeday="+(unixdate);
},
beforeShow: function() {
alert("A");
//var theDate = new Date();
//theDate.setDate('<?php echo date("d",strtotime($c_date)); ?>');
// calenderDate is my global php variable with date used as currentdate in my php page
//$(this).datepicker('option','defaultDate',calenderDate);
}
});
},
close: function(event,ui) {
$(this).datepicker('destroy');
},
resizable: false,
modal: true,
minWidth: 760
}).height("auto");
$( "#Date_calendar" ).dialog('widget').css({'top' : '25%', 'left' : '30%','margin-top' : '-10%', 'margin-left' : '-100px'});
return false;
});