Adding event to Fullcalendar using a modal

Question

Hi I've been working on getting this modal to add events to the fullcalendar-scheduler and i can't seem to get it working. This is my code below can you find any issues? I used sample good from this JSFiddle and tried to add it to my project without any luck.

 //http://jsfiddle.net/mccannf/azmjv/16/ $(document).ready(function() { // document ready /* 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 }); }); // initialize the calendar var calendar = $('#calendar').fullCalendar({ schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives', now: Date.now(), selectable: true, selectHelper: true, editable: true, aspectRatio: 1.8, scrollTime: '07:00', header: { left: 'promptResource today prev,next', center: 'title', right: 'timelineDay,timelineThreeDays,agendaWeek,month' }, customButtons: { promptResource: { text: '+ employee', click: function() { var title = prompt('Employee name'); if (title) { $('#calendar').fullCalendar( 'addResource', { title: title }, true // scroll to the new resource? ); } } } }, defaultView: 'timelineDay', views: { timelineThreeDays: { type: 'timeline', duration: { days: 3 } } }, resourceAreaWidth: '15%', resourceLabelText: 'Employees', resourceOrder: 'title', resourceRender: function(resource, cellEls) { cellEls.on('click', function() { if (confirm('Are you sure you want to remove ' + resource.title + ' from the roster?')) { $('#calendar').fullCalendar('removeResource', resource); } }); }, resources: [{ id: 'a', title: 'Dustin Johnson', eventColor: 'black' }, { id: 'b', title: 'Justin Rose', eventColor: 'black' }, { id: 'c', title: 'Levent Arslan', eventColor: 'black' }, { id: 'd', title: 'Ram Arslan', eventColor: 'black' }, { id: 'e', title: 'Rory McIlroy', eventColor: 'black' }, { id: 'f', title: 'Sergio Garcia', eventColor: 'black' }, { id: 'g', title: 'Tiger Woods', eventColor: 'black' }, { id: 'h', title: 'VJ Singh', eventColor: 'black' } ], events: [ // normal events... { id: '1', resourceId: 'a', start: '2018-02-22T09:00:00', end: '2018-02-22T18:00:00' }, { id: '2', resourceId: 'b', start: '2018-02-22T09:00:00', end: '2018-02-22T18:00:00' }, { id: '3', resourceId: 'c', start: '2018-02-22T12:00:00', end: '2018-02-22T18:00:00' }, { id: '4', resourceId: 'd', start: '2018-02-22T10:00:00', end: '2018-02-22T18:00:00' }, { id: '5', resourceId: 'e', start: '2018-02-22T18:00:00', end: '2018-02-22T22:30:00' }, { id: '6', resourceId: 'f', start: '2018-02-22T10:00:00', end: '2018-02-22T18:00:00' }, { id: '7', resourceId: 'g', start: '2018-02-22T17:00:00', end: '2018-02-22T22:00:00' }, { id: '8', resourceId: 'h', start: '2018-02-22T18:00:00', end: '2018-02-22T23:00:00' } ], drop: function(date, jsEvent, ui, resourceId) { console.log('drop', date.format(), resourceId); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } }, eventReceive: function(event) { // called when a proper external event is dropped console.log('eventReceive', event); }, eventDrop: function(event) { // called when an event (already on the calendar) is moved console.log('eventDrop', event); }, select: function(start, end, allDay) { endtime = $.fullCalendar.formatDate(end, 'h:mm tt'); starttime = $.fullCalendar.formatDate(start, 'ddd, MMM d, h:mm tt'); var mywhen = starttime + ' - ' + endtime; $('#createEventModal #apptStartTime').val(start); $('#createEventModal #apptEndTime').val(end); $('#createEventModal #apptAllDay').val(allDay); $('#createEventModal #when').text(mywhen); $('#createEventModal').modal('show'); } }); $('#submitButton').on('click', function(e) { // We don't want this to act as a link so cancel the link action e.preventDefault(); doSubmit(); }); function doSubmit() { $("#createEventModal").modal('hide'); console.log($('#apptStartTime').val()); console.log($('#apptEndTime').val()); console.log($('#apptAllDay').val()); alert("form submitted"); $("#calendar").fullCalendar('renderEvent', { title: $('#patientName').val(), start: new Date($('#apptStartTime').val()), end: new Date($('#apptEndTime').val()), allDay: ($('#apptAllDay').val() == "true"), }, true); } }); 

 <div id="createEventModal" class="modal" tabindex="-1" role="dialog" labelledby="myModalLabel1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="myModalLabel1">Create Appointment</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="createAppointmentForm" class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputPatient">Patient:</label> <div class="controls"> <input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]"> <input type="hidden" id="apptStartTime" /> <input type="hidden" id="apptEndTime" /> <input type="hidden" id="apptAllDay" /> </div> </div> <div class="control-group"> <label class="control-label" for="when">When:</label> <div class="controls controls-row" id="when" style="margin-top:5px;"> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button type="submit" class="btn btn-success" id="submitButton">Save</button> </div> </div> </div> </div> 

I've tried to edit the code but nothing seems to work for me whenever I highlight the desired times this is what shows. Error

As you can see from the image, I've highlighted 8.00 to 18.00 on the 23rd of February but it appears as 8.00 tt to 6.00 tt on the 5th which of course is incorrect. Any help would be greatly appreciated.

Answer 1

$.fullCalendar.formatDate and the formatting strings which go with it were deprecated when fullCalendar 2.0 was released, and you should no longer expect it to work correctly (see https://fullcalendar.io/docs1/utilities/formatDate/ ).

The main reason for this is that momentJS is used by fullCalendar 2.0 and above, and can already fulfil most of what this method provided. To get the desired "am/pm" output, and display the correct day of the month, you can now simply write

endtime = end.format('ddd, MMM D, h:mm a');
starttime = start.format('ddd, MMM D, h:mm a');

See http://jsfiddle.net/sbxpv25p/267/ for a working demo.

See http://momentjs.com/docs/#/displaying/format/ for a complete list of momentJS's supported format strings.

PS the custom formatting strings which fullCalendar has used to extend momentJS's format() method, and which work in newer versions of fullCalendar are documented here: https://fullcalendar.io/docs/utilities/date_formatting_string/ . However in this case you don't need them because momentJS provides a way to output everything you want in your string already.