Full calendar refresh events - javascript

I used this full calendar which takes events from ajax call
i want it to get new ajax values on button click event, how could this work?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events:{
url: 'emp-attendance-ajax.php?id=' + id
},
});

if you need to update one event ( better because faster ) :
.fullCalendar( 'updateEvent' , event )
else I think it's
.fullCalendar( 'refetchEvents' )

It's resolved i used this
events: {
url: 'emp-attendance-ajax.php',
type: 'POST',
data: function() { // a function that returns an object
return {
id: id
};
}
},
instead of this one
events:{
url: 'employees-attendance/emp-attendance-ajax.php?id=' + i++
},
and it's worked

Related

I am trying to make a Timesheet web app using fullCalender

When user selects event type and no. of hours from dropdown then it should be added to the calendar. I have updated the event listener still no data is showing. Sorry if it seems a trivial question. i am new to web applications and a bit time strained.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
ok1.addEventListener('click',function() {
let date = moment($('#calendar').fullCalendar('getDate'));
let val = document.getElementById('inputGroupSelect02').value;
let desc=document.getElementById('nobh').toString();
$('#calendar').fullCalendar('renderEvent',
$('#calendar').fullCalendar({events: [{
start: date,
title: val,
description: desc
}]}),true);
},true);
Thanks #ADyson following worked:-
$('#calendar').fullCalendar('renderEvent', { start: date, title: val, description: desc }, true);

Render events as disabled fields

I am working on a project where users create appointments using fullcalendar. Users can only create appointments on those timeslots(30min) that are available. These events are coming from a file named as events_json.php. i am including this file in like this
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
Now the events are showing but i don't want to show the user that, user should only see the time-slots as disabled and the free time-slots as links with title as "Book".
I found the renderEvent in documentation but couldn't get around it.
EDIT 1
The events_json.php is sending events like this
The file is sending events like this,
$output_arrays = array(array("title"=>"Happy Hour", "start"=>"2016-01-13T07:00:00-05:00"),
array("title"=>"Click for Google", "start"=> "2016-09-02")
);
echo json_encode($output_arrays);
In order to show existing events as "taken", you can handle the eventDataTransform event.
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
eventDataTransform: function(event) //this is called once for each event returned in the JSON
{
event.title = "Taken";
return event;
},
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
N.B. the "eventRender" you mention isn't an event, it's a method you can call to add new events to the calendar on the client-side. That's probably why it didn't help you in this situation. It might be more helpful when you want users to book into a slot - handle the "select" event (as you're doing already) and then use renderEvent to create a new appointment on the calendar. You can control the duration and all other properties of the event that gets added.

How to get the value of allDay in fullcalendar jquery plugin?

I'm using the fullcalendar jquery plugin and I want to get the value of allDay that is true or false and I want to append the value to a form.But value that is getting appended is [object Object]
<input type="hidden" id="apptAllDay" value="[object Object]">
<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#apptStartTime').val(start);
$('#apptEndTime').val(end);
$('#apptAllDay').val(allDay);
$.magnificPopup.open({
items: {
src: '#popup',
type: 'inline'
}
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventStartEditable : false,
events: "http://localhost/app1/events",
});
$(document).on("click","#addEvent",function(e) {
e.preventDefault();
doSubmit();
});
function doSubmit(){
var title = $("#titleContainer").val();
var description = $.trim($("#descContainer").val());
var url = $("#urlContainer").val();
if (!title) {
alert("Title is required");
return false;
}
$("#calendar").fullCalendar('renderEvent',
{
title: title,
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true")
},
true);
}
});
How can I get the real value that is TRUE or FAlSE?
This might probably help you, change according to your requirement.
function parseClientEvents(){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);//gives events full description.
console.log(clientArr[i].allDay);
//check for value here and append to your hidden field.
//all your logic goes here.
}
return true;
}

How to use a loop inside jquery Fullcalendar events?

Hi i'm trying to loop inside the jquery Fullcalendar events, but i don't know why this is not working :
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: //My loop here for title: birthdaysList.name , start birthdaysList.date
});
});
OK first of all, you can't do a loop inside envents: , you have to make an array and then call it from the envents: , like this:
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
var events = []; //The array
for(var i =0; i < birthdaysList.length; i++)
{events.push( {title: birthdaysList[i].name , start: birthdaysList[i].date})}
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: events
});
});

fullcalendar - How to load all events on calendar using ajax

I want to load all events in full calendar using Ajax when the page loads.I am getting response from Ajax.But the event is not added in Full calendar.
here is my jquery code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
events: function(start,end,callback){
var mydata = {
action: "fw_ajax_callback",
subaction: "get_myappointments",
};
$.ajax({
url :ajax_url,
type: 'POST',
data: mydata,
dataType: 'json',
success:function(appointments){
var events = [];
if(!!appointments){
$.map( appointments, function( r ) {
events.push({
title: r.title,
start: r.start,
end: r.start
});
});
}
callback(events);
}
})
}
});
From my console I found an error stating callback is not a function.Please help me i am a newbie.
I think you are making what is supposed to be easy look very complex: I have added a JSFiddle Link to show you how it work.
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format("YYYY-MM-DD"),
editable: true,
events: {
url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
error: function() {
$('#script-warning').show();
},
success: function(){
alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});

Categories