I am creating an on-call schedule in which the user selects the group with a member list and the length and type of rotation. When the user clicks the 'Create Schedule' button, a list of events are displayed on the calendar representing this rotation schedule. The events are created and added to an event array but they will not display on the calendar. When the code reaches,
$('#edit_calendar').fullCalendar('addEventSource', newEvents);
the application just hangs and no events are displayed on the calendar. This is the function that is called for the click event:
$("#rotation_schedule_btn").click(function () {
//create member list order
var memberList = [];
$("#rotationList li").each(function () {
memberList.push({
id: $(this).attr('id'),
name: $(this).text(),
color: $(this).css('background-color')
})
});
//start and end date and time for new schedule
var startDate = new Date($('#schedule_start_date').val());
var endDate = new Date($('#schedule_end_date').val());
//remove events between startDate & endDate
$('#edit_calendar').fullCalendar('removeEvents', function (event) {
if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
|| event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
return true;
}
});
//Create events from rotation schedule selected
var newEvents = [];
var rotation_length = $('#rotation_type_select option:selected').val();
var rotation_start_date = new Date(startDate);
var rotation_end_date = new Date(rotation_start_date);
rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
rotation_end_date.setMinutes(rotation_end_date.getMinutes() - 1);
var member_index = 0;
while (rotation_end_date <= endDate)
{
var event = new Object();
event = {
title: memberList[member_index].name,
start: rotation_start_date,
end: rotation_end_date,
objectID: memberList[member_index].id,
color: memberList[member_index].color,
allDay: true,
textColor: 'black'
};
newEvents.push(event);
rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length));
rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
if ((memberList.length - 1) == member_index)
{
member_index = 0;
}
else {
member_index++;
}
}
//Render events on calendar
$('#edit_calendar').fullCalendar('addEventSource', newEvents);
}); //end create schedule button click
Why won't the newEvents array display on the calendar? I would greatly appreciate it if you can tell me where I have gone wrong.
Thanks.
UPDATE After reviewing the newEvents array, it seems that all of the start and end dates are the same. There are 3 events, each event should last 1 week (7 days). But all of the events have the same start and end date.
I think I know what's going on. In this case you are passing a reference to your event objects rather than the value of rotation_start_date and rotation_end_date:
event = {
title: memberList[member_index].name,
start: rotation_start_date,
end: rotation_end_date,
objectID: memberList[member_index].id,
color: memberList[member_index].color,
allDay: true,
textColor: 'black'
};
The moment you update said the values of those dates, all your events see the same update since they all have the same reference to those objects. What you want to do is either declare new variables that will hold the value within your loop or just set the start and end date of the event to a new date using the values from rotation_start_date and rotation_end_date
var event = new Object();
event = {
title: 'title',
start: new Date(rotation_start_date),
end: new Date(rotation_end_date),
objectID: member_index,
color: 'blue',
allDay: true,
textColor: 'black'
};
You didn't provide any code, but I created a jsfiddle with some example code to test this out fullcalendar example
Final answer:
while (rotation_end_date <= endDate)
{
var event = new Object();
event = {
title: memberList[member_index].name,
start: new Date(rotation_start_date),
end: new Date(rotation_end_date),
objectID: memberList[member_index].id,
color: memberList[member_index].color,
allDay: true,
textColor: 'black'
};
newEvents.push(event);
rotation_start_date = new Date(rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length)));
rotation_end_date = new Date(rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length)));
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I have two javascript function on for flip back and other for flip front. The flipBack and flipFront works when element is clicked.
I have EmployeesController and Employee Model,and In Employees view this is add_emp. ctp view.
this is the code snippet for dropdown,.