Develop Reference

Fullcalendar 4: update info event from modal Bootstrap

I'm trying to update info date event from modal Bootstrap in Fullcalendar version 4.
My test:
Read event json
Click on event calendar, open modal, show info event and set value of a field with information to update
When I click on green button "Salva" (Save), doSubmitEdit function is called. It should:
close modal;
receive text field edited;
update via ajax my db;
update calendar event if necessary
But when then button is clicked I have this error:
q
TypeError: calendar.fullCalendar is not a function
on this line:
var event_obj_arr = calendar.fullCalendar('clientEvents', calendario_id);
(function ($) {
'use strict';
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'it',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap'],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: '/_admin/vendor/fullcalendar/php/get-events.php',
failure: function () {
document.getElementById('script-warning').style.display = 'block';
}
},
eventClick: function (info) {
$('.card-body h4').html(info.event.start.toDateString());
$('.card-body p').html(info.event.title + '<br>' + info.event.extendedProps.autista + ' / Info: ' + info.event.extendedProps.autista_description);
$('#calendario_id').val(info.event.id);
$('#btnModal').trigger('click');
},
loading: function (bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}//,
});
calendar.render();
$('#submitButtonEdit').on('click', function (e) {
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmitEdit();
});
function doSubmitEdit() {
// get event object
var event_obj_arr = calendar.fullCalendar('clientEvents', calendario_id);
var event_obj = event_obj_arr[0];
// edit
$("#createEventModalEdit").modal('hide');
console.log($('#autista_description').val());
console.log($('#calendario_id').val());
// update event object properties
event_obj.extendedProps.autista_description = $('#autista_description').val();
// post to server
$.ajax({
url: '/_admin/vendor/fullcalendar/php/planning-aggiorna.asp',
data: 'type=changetitle&title=' + title + '&calendario_id=' + calendario_id,
type: 'POST',
dataType: 'json',
success: function (response) {
if (response.status == 'success') {
// nothing to do here
// update calendar, you may put this line into success method
calendar.fullCalendar('updateEvent', event_obj);
}
},
error: function (e) {
alert('Error processing your request: ' + e.responseText);
}
});
}
}).apply(this, [jQuery]);
Is it possibile to access fullcalendar class outside of it?
Thank you.

Here's the solution, thank to #Adison.
We have elements retrieved from modal form, update of live calendar (where I appended "changed" text to event's title) and update of db.
function doSubmitEdit() {
// get values from modal form
var calendario_id = $('#calendario_id').val();
var calendario_descrizione = $('#calendario_descrizione').val();
// get event object by id
var event = calendar.getEventById(calendario_id);
var title = event.title;
// post to server and update db
$.ajax({
url: '/_admin/planning-aggiorna.asp',
data: 'calendario_descrizione=' + encodeURIComponent(calendario_descrizione) + '&calendario_id=' + calendario_id,
type: 'POST',
dataType: 'text',
success: function (response) {
if (response == 'success') {
// update calendar
event.setProp('title', title + ' changed');
event.setExtendedProp('autista_description', calendario_descrizione);
}
},
error: function (e) {
alert('Error processing your request: ' + e.responseText);
}
});
}

extjs store sometimes calling create instead of update

We have the following store in ExtJS 4.2:
Ext.define('Example.store.BasketDocuments', {
extend: 'Ext.data.Store',
model: 'Example.model.Document',
autoLoad: true,
autoSync: true,
sorters: [
{
property: 'doc_type',
direction: 'ASC'
}
],
proxy: {
type: 'rest',
url: baseUrl + 'document_basket',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=utf-8'
},
reader: {
type: 'json',
root: 'items'
},
writer: {
type: 'json'
},
actionMethods: {create: "POST", read: "GET", update: "PUT", destroy: "DELETE"}
}
});
It is attached to a grid with drag and drop functionality.
When we drag around 10 files (for 9 it works) to the grid which would immediately update the store, we get a server error, because we do not implement the POST function for URLs like
/api/document_basket/1964?_dc=1459498608890&{}
This is only for one entry.
For the others it would be
/api/document_basket?_dc=1459498608941&{}
which works.
Dragging only that single entry works.
So ExtJS is sending a POST request with an ID in the URL, which should be a PUT instead? Why is that?

I was able to fix this in my project.
Reason was that I was adding items to the store in a loop - so after each add of - let's say 14 files - a sync was done.
I discovered that there were 105 requests, which is just 1+2+3+4+5+6+7+8+9+10+11+12+13+14 so this caused a race condition.
Solution is to disable syncing before the loop:
onBeforeDropItem: function (node, data, overModel, dropPosition, dropHandlers, eOpts) {
dropHandlers.cancelDrop();
var store = Ext.getStore('BasketDocuments');
store.suspendAutoSync(); // new
if (node.id != 'documenttreepanel-body') {
Ext.Array.each(data.records, function (r, index) {
r = r.copy();
r.phantom = true;
r.data.id = null;
r.data.download_size = 1;
r.data.download_type = 1;
if (r.data.doc_type == 1) {
if (r.data.count == 0) {
Ext.create('Ext.window.MessageBox').show({
title: Ext.ux.Translate.get('Info'),
msg: Ext.ux.Translate.get('Ordner') + '<b>' + r.data.name + '</b>' + Ext.ux.Translate.get(' Is empty and cannot be added ') + '.',
buttons: Ext.Msg.OK,
modal: true
});
} else {
store.add(r);
}
} else {
store.add(r);
}
});
}
store.sync(); // new
store.resumeAutoSync(); // new

Recurring events in FullCalendar with Laravel

I'm working on a fullcalendar module for my page.I could display Events on calendar without the recurring feature. But when I altered my table to include recurring features I could not display events from the table.
This is my table structure.
The Update function in controller is called while the form is submitted and i noticed that it is being updated in the table.This is my form.
and this is my controller update function.
public function update($id)
{
//$type=Input::get('type');
$event_id= Input::get('eventid');
$title= Input::get('title');
$start_day=Input::get('start');
$end_day=Input::get('end');
$allday=Input::get('allday');
$repeat=Input::get('repeat');
$frequency=Input::get('frequency');
$start_time=Input::get('start_time');
$end_time=Input::get('end_time');
$dow=Input::get('dow');
$month=Input::get('month');
$weekly_json=json_encode($dow);
$monthly_json=json_encode($month);
$newstrt=substr($start_day,0,10);
$newend=substr($end_day,0,10);
$start= date("Y-m-d H:i:s",$newstrt);
$end= date("Y-m-d H:i:s" , $newend);
$roles = DB::table('events')
->where('event_id','=',$event_id)
->update(array('title' => $title,'daily'=>$allday,'repeat'=>$repeat,'frequency'=>$frequency,'start'=>$start,'end'=>$end,'time'=>$time,'dow'=>$weekly_json,'monthly_json'=>$monthly_json));
if (Request::ajax())
{
return Response::json(array('id'=>$event_id,'title'=>$title,'newstrt'=>$start,'newend'=>$end,'start_time'=>$start_time,'end_time'=>$end_time));
}
else
{
return Redirect::route('calendar.index');
}
}
But I'm not being able to display these details on the full calendar.I was following this link to implement recurring events on fullcalendar.
Recurring Events in FullCalendar.
This is my index function used for GETting details from the table.
public function index()
{
$event = DB::table('events')
->leftJoin('people','people.people_id','=','events.people_id')
->where('events.flag', '=', 1)
->get(array('events.event_id','events.title','events.start','events.end','events.start_time','events.end_time','events.repeat','events.frequency','events.dow'));
$id=array(array());
$temp = array(array());
$i=0;
foreach ($event as $events)
{
$j=0;
$id[$i]["event_id"]=$events->event_id;
$id[$i]["title"]=$events->title;
$temp[$j]['start']=$events->start;
$temp[$j]['end'] = $events->end;
$temp[$j]['start_time']=$events->start_time;
$temp[$j]['end_time'] = $events->end_time;
$start_json=json_encode($temp);
$id[$i]['range'] = $start_json;
$id[$i]["frequency"]=$events->frequency;
$id[$i]["repeat"]=$events->repeat;
$id[$i]["dow"]=$events->dow;
$i++;
}
return Response::json($id);
}
This is my calendar eventrender function and events structure.
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var repeatingEvents = [{
url: '/v1/calendar/',
type: 'GET',
ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
start: moment().startOf('week'), //next two weeks
end: moment().endOf('week').add(7,'d'),
},{
start: moment('2015-02-01','YYYY-MM-DD'), //all of february
end: moment('2015-02-01','YYYY-MM-DD').endOf('month'),
}],
}];
console.log(repeatingEvents);
var getEvents = function( start, end ){
return repeatingEvents;
}
var calendar=$('#calendar');
$.ajax({
url: '/v1/calendar/',
type: 'GET',
dataType:'json',
success:function events(response)
{
console.log(response);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function(event, element, view){
console.log(event.start.format());
return (event.range.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0;
},
events: function( start, end, timezone, callback ){
var events = getEvents(start,end); //this should be a JSON request
callback(events);
},
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();
}
},
eventSources: [
{
url: '/v1/calendar/',
type: 'GET',
dataType:'json',
},
calendar.fullCalendar( 'addEventSource', response )
],
selectable: true,
selectHelper: true,
select: function(start, end, allDay)
and I am getting JSON response like this on the console.
dow: "{[0,1,2]↵}"
event_id: 1
frequency: "weekly"
range: "[{"start":"2015-09-11","end":"2015-09-12","start_time":"11:00:00","end_time":"15:00:00"}]"
repeat: 1
title: "Youth festival"
I get no errors on the console....but the events aren't displayed too..
where did i go wrong? Helps guys?

See this code, i am also facing
After that I use this idea ,its working
In Controller
$vendor_holiday = Vendor::all();
return view('vendorpanel/holidays/index', compact('vendor_holiday'));
<script>
var calendar = $('#calendar').fullCalendar({
editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
events: [
#foreach($vendor_holiday as $vendor_holiday)
{
title : "",
start : '{{ $vendor_holiday->start }}',
},
#endforeach
],
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var start = moment(start).format('YYYY-MM-DD');
var end = moment(end).format('YYYY-MM-DD');
var vendor_id = $("#vendor_id").val();
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate= yyyy+ "-" +0+( MM+1) + "-" + dd;
if(start <= currentDate){
alert("Mark Holiday at least 1 day before");
return false;
}
if (confirm("Are you sure you want to Add a Holiday?")) {
$.ajax({
url: "/vendor/holidays",
type: "POST",
data: { vendor_id: vendor_id, start: start, end: end },
success: function (d) {
calendar.fullCalendar('refetchEvents');
alert(d);
location.reload();
},
})
}
},
eventClick: function (calEvent, jsEvent, view, event) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
if (confirm("Are you sure you want to remove it?")) {
var start = calEvent.start.format();
var vendor_id = $("#vendor_id").val();
$.ajax({
url: '/vendor/holidays/'+vendor_id,
type: "DELETE",
data: { _method: 'delete', start: start },
success: function (d) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
alert(d);
},
error: function (data) {
alert(data);
}
});
}
},
});
</script>

Laravel - Recurring event occurrences generator and organiser.
Calendarful is a simple and easily extendable PHP solution that allows the generation of occurrences of recurrent events, thus eliminating the need to store hundreds or maybe thousands of occurrences in a database or other methods of storage.
This package ships with default implementations of interfaces for use out of the box although it is very simple to provide your own implementations if needs be.
It is compliant with PSR-2.
Installation
This package can be installed via Composer:
https://github.com/Vij4yk/calendarful
$ composer require plummer/calendarful
It requires PHP >= 5.3.0
Try this package.

Problems using FullCalendar with ajax

I'm using FullCalendar 2.2.3 and I want to update the DB when users modify any of its events. This is the definition of the calendar:
$('#calendar').fullCalendar({
firstDay: 1,
timezone: 'Europe/Madrid',
allDayDefault: false,
theme: false,
aspectRatio: 2.2,
timeFormat: 'H:mm',
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
editable: false,
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
events: {
url: '/getEvents.php',
type: 'POST',
cache: false,
error: function() {
// error
},
},
eventDrop: function(event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
});
This works fine, but when I change eventDrop to update the DB
eventDrop: function(event, delta, revertFunc) {
var parameters = {
"idevento" : event.id,
"fecha" : event.start
};
$.ajax({
type: "POST",
data: parameters,
url: '/cambiarFechaEventoUsuario.php',
success: function(data) {
var res = jQuery.parseJSON(data);
if (res.error == 0) {
alert('OK');
}
else {
alert('No OK');
}
},
error: function(e) {
alert('Server error');
}
});
}
I get the following error:
TypeError: this._ordinalParse is undefined
moment.min.js (línea 6, col 17468)
Also, if I use the file "es.js" (I'm spanish), I get a different error:
TypeError: e is undefined
es.js (línea 1, col 453)
I haven't changed anything about either of these two js files, obviously.
Does anyone know how to fix this?
Thanks in advance and sorry for my english :(

I just found out the solution. If anyone has the same problem, the error comes from the date format.
event.start.format("YYYY-MM-DD")
Just changing the date format works perfectly.

select day and special date load by ajax to set in gldatepicker

I am using gldatepicker.I want to load some settings from database by ajax for gldatepicker such as day of week,special date etc.Now i have following js code for this:
$(document).ready(function () {
loadAllSettings();
});
var loadAllSettings = function () {
startDate = '';
endDate = '';
selectDay = '';
offdays = '';
$.ajax({
url: "bs_client_function.php",
type: "post",
dataType: "json",
data: {
action: 'getDateRange'
},
success: function (html) {
// alert(html.start);
startDate = Date.parse(html.start);
endDate = Date.parse(html.end);
}
});
$.ajax({
url: "bs_client_function.php",
type: "post",
dataType: "json",
data: {
action: 'getOffdays'
},
success: function (html) {
i = 0;
offdays = '[';
while (i < html.length) {
offdays = offdays + {
date: new Date(html[i]),
repeatYear: false,
cssClass: 'noday'
};
i = i + 1;
}
offdays = offdays + ']';
}
});
$.ajax({
url: "bs_client_function.php",
type: "post",
data: {
action: 'getDays'
},
success: function (html) {
var data = $.parseJSON(html);
// alert("[" + data + "]");
selectDay = '[' + data + ']';
// alert(selectDay);
showCalender(startDate, endDate, selectDay, offdays);
}
});
alert(selectDay);
console.log('selectDay' + selectDay);
};
I have checked all data is correctlly formated as gldatepicker recommanded.In my show calender
function:
var showCalender = function (startDate, endDate, selectDay, offdays) {
var dd = $('#mydate').glDatePicker({
showAlways: true,
allowMonthSelect: true,
allowYearSelect: false,
prevArrow: '\u25c4',
nextArrow: '\u25ba',
cssName: 'darkneon',
selectableDOW: selectDay,
dowOffset: 0,
selectedDate: new Date(),
selectableDateRange: [{
from: new Date(startDate),
to: new Date(endDate)
}, ],
specialDates: offdays
});
};
Now only stardate and enddate rightly working.selectDay,offdays are not working. i print selectDay in the console i got this: [1,2,3] but it not woking.What i am missing or what should be right way to do it.
Thanks in advance...

The problem is how you are getting your data for fill the glDatePicker.
You have 3 ajax calls, these calls are by default asynchronous, you execute your showCalender function in the last success function, but you have no sureness that the preceding calls are completed.
You can make your ajax calls synchronous by setting the async parameter to false see the jQuery docs:
async (default: true) Type: Boolean By default, all requests are sent
asynchronously (i.e. this is set to true by default). If you need
synchronous requests, set this option to false. Cross-domain requests
and dataType: "jsonp" requests do not support synchronous operation.
Note that synchronous requests may temporarily lock the browser,
disabling any actions while the request is active. As of jQuery 1.8,
the use of async: false with jqXHR ($.Deferred) is deprecated; you
must use the success/error/complete callback options instead of the
corresponding methods of the jqXHR object such as jqXHR.done() or the
deprecated jqXHR.success().
or you can chain them in every success callbacks, but your code will be difficult to mantain or you can use this plugin to manager multiple ajax calls http://docs.jquery.com/AjaxQueue
It works well with local data, see: http://jsfiddle.net/IrvinDominin/V59E7/
Pay attention only at the object that specialDates option needs:
specialDates: [{
date: new Date(0, 8, 5),
data: {
message: 'Happy Birthday!'
},
repeatYear: true,
cssClass: 'special-bday'
}, {
date: new Date(2013, 0, 8),
data: {
message: 'Meeting every day 8 of the month'
},
repeatMonth: true
}]