0
votes

Im using FullCalendar plugin to have a web calendar and show/insert events from my mysql table. It shows correctly the events from the bd but dont insert the date of the event in the correct format. (YYYY-MM-DD). Both columns of the mysql table are DATE type with the same format of the event that will be insert.

This is my JS script to show events and insert via ajax to mysql

$(document).ready(function() {

var date = new Date();
var dd = date.getDate();
var mm = date.getMonth();
var yyyy = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
	editable: true,
	events: "http://localhost/test-fullcalendar/php/eventos.php",
	lang: "es",
	selectable: true,
	selectHelper: true,

	select: function(start, end, allDay) {
		var title = prompt('Evento a insertar:');
	 	if (title) {
	 		start = $.fullCalendar.moment('yyyy mm dd');
			end = $.fullCalendar.moment('yyyy mm dd');
			 $.ajax({
				 url: 'http://localhost/test-fullcalendar/php/add_evento.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
			 );
	 	}
	 	calendar.fullCalendar('unselect');
	}

});
});

The problem is with the function moment() of Fullcalendar on lines:

start = $.fullCalendar.moment('yyyy mm dd');

end = $.fullCalendar.moment('yyyy mm dd');

The function dont receive correctly the actual date and only insert "0000-00-00" on my table. I try to pass the date in the moment() argument like:

var date = yyyy + '-' + mm + '-' + dd;

start = $.fullCalendar.moment(date);

But it insert "0000-00-00" too.

2
did you do this?: MomentJS is a third-party library that must be included on the same page as FullCalendar.Vickel
Of course, the library is already includedAvkZ

2 Answers

0
votes

the javascript function date.getMonth() would return 2 for the month March, but you want '03'

so use this:

var mm = date.getMonth()+1;
mm=(mm<=9)?'0'+mm:mm;
0
votes

Your formatting is incorrect so you are actually returning NaN.

Where you are passing 'yyyy mm dd', you should instead be passing the start variable, so:

$.fullCalendar.moment('yyyy mm dd');

should be

$.fullCalendar.moment(start).format('YYYY MM DD');

Additionally, note that your date format needs to be uppercase, per the Moment.js site, and can more simply be written as moment(start).format('YYYY MM DD');

DEMO

$('#fullCal').fullCalendar({
  header: {
    left: '',
    center: 'prev title next today',
    right: ''
  },
  selectable: true,
  select: function(start, end, allDay) {
    var title = prompt('Evento a insertar:');
    if (title) {
      start = moment(start).format('YYYY MM DD');
      end = moment(end).format('YYYY-MM-DD'); /* w/ dashes if that is what you need */
      alert('start: ' + start + ' end: ' + end);
      /*rest of your code... */
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="fullCal"></div>