I have embed the fullcalender control in my asp.net mvc application. It is running fine locally. but when I uploads it to my domain server (third party) it showing me
This Error: Uncaught TypeError: Object # has no method ‘fullCalendar’ in crome console (debugger). and not rendering the control.
** EDITED: My HTML code is this **
” %>
Index
<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
< style type=’text/css’>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
< script type=”text/javascript”>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var officerid = document.getElementById('officerid').value;
url = "/TasksToOfficer/Calender/" + officerid;
var currenteventIden = <%= serializer.Serialize( ViewData["iden"] ) %>
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
border: 0
},
eventClick: function(event, element) {
var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
var iden = event.id;
if (title) {
var st = event.start;
var ed = event.end;
var aldy = event.allDay;
var dt = event.date;
event.title = title;
calendar.fullCalendar('updateEvent',event);
var date = new Date(st);
var NextMonth = date.getMonth() + 1;
var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear();
var QueryStringForEdit=null;
QueryStringForEdit="officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=true&iden=" + iden;
if (officerid) {
$.ajax(
{
type: "POST",
url: "/TasksToOfficer/Create",
data: QueryStringForEdit,
success: function(result) {
if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success
},
error: function(req, status, error) {
}
});
}
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:', { buttons: { Ok: true, Cancel: false }
}
);
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
false); // This is false , because do not show same event on same date after render from server side.
var date = new Date(start);
var NextMonth = date.getMonth() + 1; // Reason: it is bacause of month array it starts from 0
var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear();
if (officerid) {
$.ajax({ type: "POST",
url: "/TasksToOfficer/Create",
data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=false",
success: function(result) {
if (result.success) $("#feedback input").attr("value", "");
//$("#feedback_status").slideDown(250).text(result.message);
},
error: function(req, status, error) {
}
});
}
}
calendar.fullCalendar('unselect');
},
editable: true,
events: url
});
});
//--------------------------------------------------------------------------//
</script >
<h2>
Index</h2>
<div id="calendar">
</div>
<input id="officerid" type="hidden" value="<%=ViewData["officerid"].ToString()%>" />
You’re sure you’ve uploaded the (correct) javascript file to your external server? Don’t trust Visual Studio’s Publish feature for it!
Is the url to the resource correct? Url could point to a local resource.
[Edit]
There’s only thing I can think of, so I’ll repeat myself.
I think that the path to the script is wrong.
So please check again. Are these files below referenced? Is the path correct.
Be carefull with paths which are relative to the page you’re on!
Make them relative to the domain: i.e. they start with ‘/’ and check all directories and files exists on the server.
Make sure ‘jquery-1.4.4.min.js’ or any other version of jquery is referenced before ‘fullcalendar.min.js’.
The fullcalendar zip files contain demo’s… check those…
I’m out of ideas otherwise.