I have a global variable called myDataset
:
var myDataset = {
"classes":[
[
{
"name":"ECEC 301 Advanced Programming for Engineers Lecture",
"days":"MWF",
"times":"02:00 pm - 03:20 pm",
"crn":"11215"
},
{
"name":"ECEC 301 Advanced Programming for Engineers Lab",
"days":"W",
"times":"09:00 am - 10:50 am",
"crn":"11216"
}
],
[
{
"name":"ECEC 301 Advanced Programming for Engineers Lecture",
"days":"MWF",
"times":"02:00 pm - 03:20 pm",
"crn":"11215"
},
{
"name":"ECEC 301 Advanced Programming for Engineers Lab",
"days":"F",
"times":"02:00 pm - 03:50 pm",
"crn":"11217"
}
]
]
};
Immediately under this, I initialize my fullCalendar
object:
$('#calendar').fullCalendar({
editable: false,
weekMode: 'liquid',
handleWindowResize: true,
weekends: false, // Hide weekends
defaultView: 'agendaWeek', // Only show week view
header: false, // Hide buttons/titles
minTime: '07:00:00', // Start time for the calendar
columnFormat: {
week: 'dddd' // Only show day of the week names
}
});
I am using the addEventSource
to override the default behavior:
$('#calendar').fullCalendar( 'addEventSource',
function(start, end, callback) {
// When requested, dynamically generate virtual
// events for every monday and wednesday.
var events = [];
for (loop = start.getTime();
loop <= end.getTime();
loop = loop + (24 * 60 * 60 * 1000)) {
var test_date = new Date(loop);
var classes = myDataset.classes;
for(i = 0; i < classes.length; i++){
var obj = classes[i];
for(j=0; j < obj.length; j++){
var days = obj[j].days;
var daysArray = days.split('');
for(k =0; k < daysArray.length; k++){
if(daysArray[k] == 'M' && test_date.is().monday()){
events.push({
title: obj[j].name,
start: $.fullCalendar.formatDate( test_date, 'yyyy-MM-dd HH:mm:ss')
});
}
else if(daysArray[k] == 'T' && test_date.is().tuesday()){
events.push({
title: obj[j].name,
start: $.fullCalendar.formatDate( test_date, 'yyyy-MM-dd HH:mm:ss')
});
}
else if(daysArray[k] == 'W' && test_date.is().wednesday()){
events.push({
title: obj[j].name,
start: $.fullCalendar.formatDate( test_date, 'yyyy-MM-dd HH:mm:ss')
});
}
else if(daysArray[k] == 'R' && test_date.is().thursday()){
events.push({
title: obj[j].name,
start: $.fullCalendar.formatDate( test_date, 'yyyy-MM-dd HH:mm:ss')
});
}
else if(daysArray[k] == 'F' && test_date.is().friday()){
events.push({
title: obj[j].name,
start: $.fullCalendar.formatDate( test_date, 'yyyy-MM-dd HH:mm:ss')
});
}
}
}
}
}
// return events generated
callback( events );
}
);
However, when I load the page, I get the following error:
Uncaught TypeError: start.getTime is not a function
This error appears on the third part of my code snippet in the addEventSource
.
On the header of my HTML page, I have the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
I also tried placing that below.
Finally, I also checked my Sources
in Chrome Dev Tools, and the library is indeed loaded.
What's weird is.. My Fiddle works: http://jsfiddle.net/h9cC6/2088/
EDIT:
Output of start
:
EDIT 2:
So it looks like the Fiddle is using the Date object, but my code is using the Moment object..
If your code is using a moment
object, but you want to work with a date
object, you need to tweak your code a little bit, from:
for (loop = start.getTime();
loop <= end.getTime();
loop = loop + (24 * 60 * 60 * 1000)) {
To:
for (loop = start._d.getTime();
loop <= end._d.getTime();
loop = loop + (24 * 60 * 60 * 1000)) {
Using toDate
method: http://momentjs.com/docs/#/displaying/as-javascript-date/
for (loop = start.toDate().getTime();
loop <= end.toDate().getTime();
loop = loop + (24 * 60 * 60 * 1000)) {
Updated Answer
I just updated your fiddle to use fullcallendar 2.4.0
and adapted your code: