I have Fullcalendar opening in iframe. I have a script from dyn-web.com on parent page that resizes Iframe and this works fine most of the time:
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
When I open the calendar initially it resizes fine, but when I select another month that has a longer page render, it will not resize.
How can I invoke the resize on the parent window?
This is the start of my calendar but I cannot figure out the syntax to dynamically call resize. I have played with the height parameter, but it needs to be dynamic:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
}
},
You need to do something like this:
$('#calendar').fullCalendar({
month: <%=monthStart%>,
year: <%=yearStart%>,
eventSources:
[
{ url: <%=esource%>,
type: 'GET',
error: function() {
alert('there was an error while fetching events! ');
}
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
The viewDisplay handler is called every time the month/week/day view is changed. You can also use the windowResize handler to capture an event fired after the resize has actually taken place.
Related
I am trying to use an ajax call in the events option of fullcalendar with a json feed, but it's not working. I am working in an asp.net mvc4 application. My ajax call works fine, returns json as expected, but as a test I am just trying to create a local array, called events, add some sample data and pass it to the callback. But for some reason this does not get set in the fullcalendar code, and this does not show on the rendered calendar. I am debugging into the fullcalendar source, but haven't yet figured out why it's not getting set. Any ideas?
$('#calendar').fullCalendar({
theme: false,
timeFormat: '',
height: 'auto',
weekends: true,
events: function (start, end, callback) {
$.ajax({
type:'POST',
url: '#Url.Content("~/Home/GetJson")',
dataType: 'json',
data: {
start: start.toLocaleString("yyyy-mm-dd"),
end: end.toLocaleString("yyyy-mm-dd")
},
error: function (xhr, type, exception) { alert("Error: " + exception); },
success: function (response) {
var events = [];
events.push({
title: "new title",
start: "2014-11-05T13:15:30Z"
});
callback(events);
}
});
}
});
I have confirmed fullcalendar works if I pass in a json string in the events option like this
events:
[{ title: 'Event1', start: '2014-11-05T13:15:30Z' },
{ title: 'Event2', start: '2014-11-06T13:15:30Z' }]
Assuming you are using FullCalendar 2.*, the signature for events as a function is:
function( start, end, timezone, callback ) { }
As long as your event object is valid (you need to have a title and a start), your code should work if you change
events: function (start, end, callback) {
to
events: function (start, end, timezone, callback) {
I have a strange problem and i m not able to understand why it is happening.
I called a page - Remarks(say) by jquery ajax on row click of grid viw. Then i binded that page (coming in response) into a div - dvRemarks(say). This div is opening in a popup.
Pop-up window is only opening first time, which is working fine. But when i click second time, data is coming in response, But this time popup is not opening. Problem is with popup only but i don't understand why it is ?
When i again refresh the page, it again opens up Ist time only.
Below is jquery :-
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
Below is the function which i am calling on click :-
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').html(response);
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
And below is the div - dvRemarks in which i am binding response
<div id="dvRemarks1" runat="server" style="display: none;" title="Enter Remarks">
<div id="dvRemarks" runat="server">
</div>
</div>
Thanks.
Not sure on this but give a try to below one.
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true, //Calling destroy on close function might help
close: function() {
$(this).dialog("destroy");
}
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
give a try changing ajax call to
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').empty().html(response); //empty function may be of some help here
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
I have fullcalendar working fine loading data using json from a flatfile(s).
I would like to load each months data from that months file on clicking prev/next.
Using ajax? events: function( start, end, callback ) addEventSource - removeEventSource? other?
Allow that jQuery is still a work in progress for me.
UPDATE:
I have set:
viewDisplay: function(view) { var next = view.title; alert(next); },
which gives me Month Year on clicking next/prev
How to parse this to json-events.php
I tried [split next] events: "json-events.php?month=month",
nope...
This is not using php, but you can change the AJAX call in getCalData() to do it.
EventSource will be filled with the next data.
I hope this helps a little bit.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}
fullcalendar by default send 2 additional parameters when getting events, params[:start], params[:end]
u can use them to return queried events between these 2 values
you can just add View Render property to configuration Object of fullcalendar
viewRender: function(view, element) {
//console.debug("View Changed: ",view.start, view.end);
// events = loadevents();
jQuery(nativeelement).fullCalendar('removeEvents');
jQuery(nativeelement).fullCalendar('addEventSource', events);
}
now you can load month by month.
This syntax for angular2
Just wondering if anyone had a better way of setting the background of a whole day in fullcalendar js? The problem with my approach is that if you go to another page in the calendar, the table cell background remains altered. I could reset all backgrounds on the fullCalendar('prev') event I guess but that seems messy. Anyone know of a way to render the actual event so that it expands to fill the whole day?
var trainingDiary = $("#training_diary").fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
var title = prompt('Event Title:');
var dayObj = $(this);
//console.log($(this));
if (title) {
$.ajax({
url: "/app_dev.php/addtrainingday",
global: false,
type: "POST",
data: "dayNo=" + date.getDate(), //returns day of month. getDay() returns day of week
async:true,
success: function(msg) {
trainingDiary.fullCalendar('renderEvent',
{
title: title,
start: date,
allDay: allDay,
backgroundColor:'#cccccc'
},
true // make the event "stick" across calendar pages
)
dayObj.css({'background-color':'#339933','background-image':'url()'})
console.log(msg.valueOf());
} //end ajax success
})
} else {
trainingDiary.fullCalendar('unselect');
}
},
//selectable:true,
//selectHelper:true,
theme: true,
header: {left:'title',
center: '',
right: 'today prev next'},
firstDay:1
});
looks like this can be done with the eventRender() callback.
http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
Is there a good way to have the fullCalendar jquery plugin auto-refresh its events?
I am able to simply call 'refetchEvents' using a timer, but that presents issues if the user is currently dragging an event (throwing javascript errors during the refresh while the event is dragged). Is there a better way?
Good solution... but is not enough:
var calE = {
url: 'calendarEvents.do',
type: 'POST',
data: {
siteId: $("#siteId").val()
},
error: function() {
alert('there was an error while fetching events!');
}
};
function loadCal(){
$('#calendar').fullCalendar({
theme: true,
events: calE,
editable: false,
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
viewDisplay: function(viewObj) {}
});
}
function reloadCalendar(){
$('#calendar').fullCalendar('removeEventSource', calEvent );
var source = {
url: 'calendarEvents.do',
type: 'POST',
data: {
siteId: $("#siteId").val()
},
error: function() {
alert('there was an error while fetching events!');
}
};
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', source );
$('#calendar').fullCalendar('rerenderEvents');
calE = source;
}
By using this you'll keep the original algorithm to fetch the data.
you'd just need to keep track of a flag, whether auto-refreshing should happen. it should be true by default, but set to false when dragging or resizing. you can set it based on the eventDragStart, eventDragStop, eventResizeStart, and eventResizeStop.
see http://arshaw.com/fullcalendar/docs/event_ui/ for a list of mouse-related triggers.