Fullcalendar 4: update info event from modal Bootstrap - javascript

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);
}
});
}

Related

FullCalendar strange behavior deleting event from database

I need your help to understand the behaviour of my instance of FullCalendar Scheduler v5.5.0.
My event source is a JSON array generated by a basic SQL request from database, each event with it's own unique id as usual.
I'm using some jQuery code to make ajax calls to insert / update / delete events.
Everything works well but when i want to delete multiple events one after another without reloading page, then the ajax call to delete script is done multiple times for each event.
e.g : I want to delete the event with the id 2674, I click the button made for and it triggers the ajax call to the delete script (at this step i can see one call to the delete.php page in the network tab of the devtool console with the id 2674 in the post request) and everything is ok, event is deleted on the view.
But when I delete another event just after (id: 2631), then I have 3 calls to the delete script, the first and second with the id 2674 in the post request (the event I have deleted first) and the last one with the id 2631 as expected.
If I repeat this action again i have 6 calls to the delete.php page:
the first and second with the id 2674 in the post request (the event i have deleted first),
the third with the id 2631 (the event i have deleted in second),
the 4th with the id 2674 (the event i have deleted first),
the 5th with the id 2631 (the event i have deleted in second),
and the last one with the id 2651 as expected.
Here is my code, do you have an idea to explain this behavior ?
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'fr';
var url ='./';
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
firstDay: 1,
hiddenDays: [0], // hide Tuesdays and Thursdays
selectable: true,
slotDuration: '00:20:00',
slotMinTime: '08:00:00',
slotMaxTime: '20:00:00',
allDaySlot: false,
headerToolbar: {
left: 'prev next today',
center: 'title',
//right: 'resourceTimeGridDay,dayGridMonth,timeGridDay,listDay,listWeek'
right: 'resourceTimeGridDay,resourceTimeGridSixDay,dayGridMonth'
},
titleFormat: { // will produce something like "Tuesday, September 18, 2018"
month: 'long',
year: 'numeric',
day: 'numeric',
weekday: 'long'
},
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' },
dayGridMonth: { buttonText: 'Mois' },
timeGridDay: { buttonText: 'Jour' },
resourceTimeGridDay: { buttonText: 'Jour'},
resourceTimeGridSixDay: {
type: 'resourceTimeGrid',
duration: { days: 6 },
buttonText: 'Semaine',
}
},
datesAboveResources:true,
nowIndicator: true,
contentHeight: 900,
initialView: 'resourceTimeGridDay',
initialDate: curdate,
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
resources: [
{
title: 'Frédéric Xavier',
id: 'fred'
}, {
title: 'Emmanuelle Chouin',
id: 'manu'
}
],
eventDidMount: function(info) {
var start = info.event.start;
var end = info.event.end;
var startTime;
var endTime;
if (!start) {
startTime = '';
} else {
startTime = start;
startevent = start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
if (!end) {
endDate = '';
endevent ='';
} else {
endTime = end;
endevent = end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
var title = startevent + " - " + endevent + " " + info.event.title;
var description = info.event.extendedProps.description;
if (!info.event.extendedProps.description) {
description = '';
}
$(info.el).popover({
title: title,
placement:'top',
trigger : 'hover',
content: description,
container:'body'
});
$('.popover.in').remove(); //<--- Remove the popover
//$(info.el).popover('show');
if(info.event.extendedProps.description){
$(info.el).find(".fc-event-title").append(" <i class='fas fa-exclamation-triangle fa-lg red-text'></i>");
}
},
dateClick: function(info) {
$('#event').modal('show');
var str = info.dateStr
$('#datedeb').val(str.substring(0,10)).focusin();
$('#heuredeb').val(str.substring(11, str.indexOf(':00+'))).focusin();
$("input[name='resource'][value='" + info.resource.id + "']").prop('checked', true);
var twentyMinutesLater = new Date(str);
twentyMinutesLater.setTime(twentyMinutesLater.getTime() + 20*60000);
var test = twentyMinutesLater + ' ';
$('#heurefin').val(removeN(test, 16).substring(0,5)).focusin();
},
select: function(info) {
var str = info.startStr
var str2 = info.endStr
$('#event').modal('show');
$('#datedeb').val(str.substring(0,10)).focusin();
$('#heuredeb').val(str.substring(11, str.indexOf(':00+'))).focusin();
$("input[name='resource'][value='" + info.resource.id + "']").prop('checked', true);
$('#heurefin').val(str2.substring(11, str2.indexOf(':00+'))).focusin();
},
events: url+'api/load.php',
eventDrop: function(arg) {
var madate = arg.event.startStr;
var datedeb = madate.substring(0,10);
var heuredeb = madate.substring(11,madate.indexOf(':00+'))
var end = arg.event.endStr;
var heurefin = end.substring(11,end.indexOf(':00+'))
$.ajax({
url:url+"/api/update.php",
type:"POST",
data:{id:arg.event.id, date:datedeb, start:heuredeb, end:heurefin, title:arg.event.title,color:arg.event.backgroundColor, commentaire:arg.event.extendedProps.description, resource:arg.event._def.resourceIds[0]},
});
calendar.refetchEvents();
},
eventDragStop: function(arg) {
$('.popover').remove(); //<--- Remove the popover
calendar.refetchEvents();
$('.popover').remove(); //<--- Remove the popover
},
eventResize: function(arg) {
var madate = arg.event.startStr;
var datedeb = madate.substring(0,10);
var heuredeb = madate.substring(11,madate.indexOf(':00+'))
var end = arg.event.endStr;
var heurefin = end.substring(11,end.indexOf(':00+'))
$.ajax({
url:url+"api/update.php",
type:"POST",
data:{id:arg.event.id, date:datedeb, start:heuredeb, end:heurefin, title:arg.event.title,color:arg.event.backgroundColor, commentaire:arg.event.extendedProps.description, resource:arg.event._def.resourceIds[0]},
});
calendar.refetchEvents();
//location.reload();
},
eventClick: function(arg) {
var id = arg.event.id;
$('#editEventId').val(id);
$('#deleteEvent').attr('data-id', id);
//$('#modif').modal('show');
$.ajax({
url:url+"api/getevent.php",
type:"POST",
dataType: 'json',
data:{id:id},
success: function(data) {
$('#edit-nom').val(data[0].title).focusin();
$('#edit-commentaire').val(data[0].description).focusin();
$('#edit-datedeb').val(data[0].start.substring(0,10)).focusin();
//alert(data[0].start.substring(11,data[0].start.indexOf(':00')));
$('#edit-heuredeb').val(data[0].start.substring(11,data[0].start.length+5)).focusin();
$('#edit-heurefin').val(data[0].end.substring(11,data[0].end.length+5)).focusin();
$("input[name='editcolor'][value='" + data[0].backgroundColor + "']").prop('checked', true);
$("input[name='edit-resource'][value='" + data[0].resourceId + "']").prop('checked', true);
$('.Nom').replaceWith('<span class="Nom font-weight-bold text-danger">'+data[0].title+'</span>');
$('#modif').modal('show');
}
});
$(document).on('click', '#deleteEvent', function() {
$('#modif').modal('hide');
$('#modalConfirmDelete').modal('show');
$('#delete').replaceWith('<button type="button" class="btn btn-outline-danger" id="delete" data-id="'+id+'">Oui</button>');
$(document).on('click', '#delete', function() {
$.ajax({
url:url+"api/delete.php",
type:"POST",
cache : false,
data:{id:id},
success: function(msg) {
console.log(msg);
$('#modalConfirmDelete').modal('hide');
calendar.refetchEvents();
},
});
});
});
}
});
calendar.render();
$(document).on('click', '#createEvent', function(event) {
var request_method = $("#form").attr("method");
var post_url = $( "#form").attr('action');
var post_data = $( "#form" ).serialize();
$.ajax({
type: request_method,
url: post_url,
data: post_data,
success: function(msg) {
$("#form")[0].reset();
$('#event').modal('hide');
console.log(msg);
calendar.refetchEvents();
},
error: function(msg) {
console.log(msg);
}
});
});
$(document).on('click', '#editEvent', function(event) {
var request_method = $("#formupdate").attr("method");
var post_url = $( "#formupdate").attr('action');
var post_data = $( "#formupdate" ).serialize();
$.ajax({
type: request_method,
url: post_url,
data: post_data,
success: function(msg) {
console.log(msg);
$("#formupdate")[0].reset();
$('#modif').modal('hide');
calendar.refetchEvents();
},
error: function(msg) {
console.log(msg);
}
});
});
});
The problem is you are piling up event handlers. Every time you click on any event on the calendar, eventClick runs. Within event click, you run $(document).on('click', '#deleteEvent', function() { which adds a new "click" handler to show the deletion modal. Then every time the modal is shown, it runs $(document).on('click', '#delete', function() { which adds a new "click" event handler to the Delete button...but your code never removes any of the event handlers which were previously added to those buttons.
Therefore it appears to work fine the first time you delete something, but subsequently if you press Delete again, it will run all the "click" event handlers associated with the button. That's why you can see it running requests for events you had deleted previously - it's re-running event handlers which are still attached to the button. You can use off() in jQuery to remove existing event handlers from an element.
e.g.
$(document).off('click', '#deleteEvent');
$(document).on('click', '#deleteEvent', function() {
//....
$(document).off('click', '#delete');
$(document).on('click', '#delete', function() {

Full calendar resource extra params not added

I try to customize the params that send with the events and resources on the fullCalendar library.
I use full calendar version 3.
I can fetch these custom params from a form and assign them to events request.
But the issue is with resources that I use the same code for both but the requested URL for resource breaks and also lost the default start and end prams as well.
The code that I tried:
resources: {
// Resource route to load Instructors.
url: resourcesCallback,
method: 'GET',
data: function() {
var fields = jQuery('.calendar_filter_form').serializeArray();
var datas = {};
jQuery.each(fields, function(index, val) {
/* iterate through array or object */
datas[val.name] = val.value;
});
return datas;
},
failure: function() {
alert('There was an error while fetching instructors!');
},
},
and the event part:
events: {
// Resource route to load Instractors.
url: eventsCallback,
method: 'GET',
data: function() {
var fields = jQuery('.calendar_filter_form').serializeArray();
var data = {};
jQuery.each(fields, function(index, val) {
/* iterate through array or object */
data[val.name] = val.value;
});
return data;
},
failure: function() {
alert('there was an error while fetching events!');
},
}
The generated URL that I get are these:
For events:
Request URL: DOMAIN/load?instractor=&lessonType=&date=&start=2019-07-22T00%3A00%3A00&end=2019-07-23T00%3A00%3A00&_=156377682
For resources:
Request URL: DOMAIN/resources?_=1563776826863
I need to generate the second URL like the first, as you see the code is same but result is different, what is wrong?
The full code if needed:
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
// Active the ajax reload the resources(instructors).
refetchResourcesOnNavigate: true,
// To make the time slot divided in 15mis.
slotDuration: "00:15:00",
displayEventTime : false,
// This define each time slot can get how many part
// of the rows, for example if we set it to "00:01:00"
// then it will divide each row by 15 mins but just show
// the one between one like: 00:15:00 , 00:45:00 , 01:15:00.
slotLabelInterval: "00:01:00",
slotLabelFormat: ['H:mm'],
groupByResource: true,
// To trun of the all day row at the top of calendar.
allDaySlot: false,
groupByDateAndResource: true,
// Settings for manage the calendar header options.
header: {
left: 'prev, today, next',
center: 'title',
right: null,
},
eventRender: function (event, $element) {
// Render the Main content of the events with more details
// and with html tags to be more user friendly.
$element.find('.fc-title').html('<p style="text-align:center">'
+ event.lessonType + ' ~ ' + event.student
+ '<br>' + event.description
+ '<br>' + event.lessonAvailable + '~' + event.nextEvent + '</p>'
);
},
// Define the Calendar column name.
// This part should be dynamic and will
// define by instructor names.
resources: {
// Resource route to load Instructors.
url: resourcesCallback,
method: 'GET',
data: function() {
var fields = jQuery('.calendar_filter_form').serializeArray();
var data = {};
jQuery.each(fields, function(index, val) {
/* iterate through array or object */
data[val.name] = val.value;
});
return data;
},
failure: function() {
alert('There was an error while fetching instructors!');
},
},
// The main part of getting data and manipulate them
// to show those in proper format in the calendar.
// To match with resources here the resourceId should match
// with the ids that provided in the resources.
// Also to get proper location according to time slot
// it need the correct start and end params that should
// be in correct date format like: 2019-07-18T19:30:00.
events: {
// Resource route to load instructors.
url: eventsCallback,
method: 'GET',
data: function() {
var fields = jQuery('.calendar_filter_form').serializeArray();
var datas = {};
jQuery.each(fields, function(index, val) {
/* iterate through array or object */
datas[val.name] = val.value;
});
return datas;
},
failure: function() {
alert('there was an error while fetching events!');
},
}
});
In the meantime, of course, the obvious workaround is to use the resources-as-function pattern instead, then you can construct the AJAX request exactly as you need it.
Thanks, #ADyson.
resources: function(callback){
jQuery('input[name="start"]').val(jQuery('#calendar').fullCalendar('getView').start.format());
jQuery('input[name="end"]').val(jQuery('#calendar').fullCalendar('getView').end.format());
jQuery.ajax({
url: resourcesCallback,
type: 'GET',
dataType: "json",
data: jQuery('.calendar_filter_form').serialize(),
error: function() {
// alert('Oops! Try again.');
},
success: function(response){
callback(response);
}
});
},

laravel: how to feed data in fullcalendar, fetched from database in controller

my Controller :
public function eventCalender(){
$eventCalender = [
'title' => 'Matts Booking',
'start' => '2019-05-05',
];
$response = [
'eventCalender' => $eventCalender,
'status' => 1,
];
return response()->json($response);
}
my js file :
function getEventCalender() {
var actionurl = base_url + "/events/event-calender";
$.ajax({
type: "GET",
url: actionurl,
success: function (res) {
if (res['status'] == 1) {
$("#event-list").hide();
$("#calender-list").show();
} else {
console.log("Something went wrong!!!!");
}
},
error: function (jqXHR, exception) {
$("#errormsg").show();
}
});
}
$(document).ready(function () {
getEventCalender();
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'list', 'googleCalendar'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear'
},
defaultDate: '2019-03-12',
navLinks: true,
businessHours: true,
editable: true,
event: res.eventCalender,
});
calendar.render();
});
});
so this is my controller and js file what i want is when i get data from controller how do i print that data in calendar ?
and i am using fullcalendar so when i add
document.addEventListener('DOMContentLoaded', function () { }
this function then only my calendar show in page.
If i put above function out of getEventCalender() function then my calender show perfectly but when i put it in getEventCalender() function like shown above it doesn't show my calendar.
Call the getEventCalender() in a document ready function to execute after all the content has loaded
$(function() {
getEventCalender();
})

Full calendar not showing events generated dynamically

My events are not getting displayed on fullcalendar. I am fetching the list of events from the backend server using nodejs. the events are getting generated dynamically. I am able to get the events in array but t he events are not showing on the calendar. Any help would be appreciated
function searchappointmentssss(forappdate) {
$.ajax({
url: 'http://localhost:3000/searchappointment',
type: 'post',
data: {
date: forappdate
},
dataType: 'json',
success: function(data) {
var aaaaaaa = [];
data.forEach(function(dataa) {
var ddddddd = dataa.date.split("T");
var appppppp = {};
appppppp.title = dataa.patientname + "\n" + dataa.purposeofvisit;
appppppp.description = dataa.purposeofvisit;
appppppp.start = ddddddd[0] + " " + dataa.time;
appppppp.end = ddddddd[0] + " " + dataa.endtime;
appppppp.id = dataa.appointmentid;
appppppp.visstatus = dataa.status;
appppppp.gicid = dataa.gic;
aaaaaaa.push(appppppp);
});
console.log(aaaaaaa);
$('#calendar').fullCalendar({
defaultView: "agendaDay",
defaultDate: "2018-10-26",
events: aaaaaaa,
eventTextColor: '#ffffff',
header: {
left: 'prev,next',
center: 'title',
right: ''
},
viewRender: function(view, element) {
var newddddddd = moment($('#calendar').fullCalendar('getDate')).format("YYYY-MM-DD");
searchappointmentssss(newddddddd);
$("#dateselectedforapp").val(newddddddd + "T00:00");
},
eventClick: function(calEvent, jsEvent, view) {
$("#exampleModal2").modal('toggle');
$("#message-textm4").val(calEvent.id);
$("#message-textm444").val(calEvent.gicid);
$("#message-textm").val(calEvent.description);
$("#message-textm6").val(calEvent.visstatus);
$("#message-textm99").val(moment(calEvent.start).format("YYYY-MM-DD"));
$("#message-textm2").val(moment(calEvent.start).format("hh:mm"));
$("#message-textm3").val(moment(calEvent.end).format("hh:mm"));
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
//document.execCommand("InsertImage", false, "upload/"+data);
//alert(data);
//$("#progressbar").hide();
//location.reload();
//$("#article").load("submitArticle.php");
//window.location.href = window.location.href;
},
error: function() {
alert(data);
}
});
}
Ps: Just putting this text cos stackoverflow was saying you question contains only code. this is not relevant :P

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.

Categories

Resources