how to show monthly repeated events in full calender plugin - fullcalendar

Question

With this code i able to show daily and weekly event, but i am unable to show monthly event.I am using full calendar plugin in one of my laravel project.by using dow parameter i show daily event and with ranges show event form starting date.
$('#calendar').fullCalendar({
defaultDate: moment(),
editable: false,
eventLimit: true, // allow "more" link when too many events
events:function(start, end, timezone, callback){
$.ajax({url: baseUrl +"/calenderevents",
type:'post',
success: function(data)
{
var events = [];
var range = [];
$.each(data, function(index, element) {
events.push({
title : element.title,
start : element.start,
end : element.end,
id : element.id,
dow : element.dow,
ranges : range
});
range.push({
start: moment(element.ranges)
});
});
callback(events);
}
});
},
dayClick: function() {
$('#event-message').text("Add Activity");
$('#calender-error').html('');
if($("#user_role_id").data("user-role") == 1){
return false;
}
$("#delete-event").hide();
$('.dimensions').attr('readonly', 'readonly');
$('#clear-form').click();
$('.calender-event').attr({
'id':'calender_event_form',
'action':baseUrl+'/assisted',
});
$.fancybox({
content: $('#add_calender_event'),
padding : 10,
fitToView:false,
autoSize: false,
width:485,
height:600,
openEffect : 'elastic',
closeEffect : 'elastic',
});
},
eventRender: function (event, element) {
// element.addClass('href', 'javascript:void(0);');
element.addClass('event');
element.attr('id', event.id);
if("ranges" in event)
{
return (event.ranges.filter(function(range){ // test event against all the ranges
return (event.start.isAfter(range.start));
}).length)>0;
}
}
});

Answer 1

var matchingDaysBetween = function (start, end, test) {
var days = [];
for (var day = moment(start); day.isBefore(end); day.add(30, 'd')) {
if (test(day)) {
days.push(moment(day));
// push a copy of day
}
}
return days;
}

Answer 2

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var defaultEvents = [
<c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
<c:choose>
<c:when test='${fn:containsIgnoreCase(periodicTask.frequency, "Weekly")}'>
{ id: '${periodicTask.id}', title: '${periodicTask.task}',
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
start: moment(new Date('${periodicTask.startDate}')).startOf('year'), //next two weeks
end: moment(new Date('${periodicTask.endDate}')).add(7,'d'),
}]
,type:'${periodicTask.description}',location:'${periodicTask.location.name}',endDate:new Date('${periodicTask.endDate}'),area: '${periodicTask.area.name}',frequency:'${periodicTask.frequency}', startDate: new Date('${periodicTask.startDate}'),repeat: 0,color: "#"+ Math.random().toString(16).slice(2, 8) ,dow: [${periodicTask.day}]},
</c:when>
<c:otherwise>
{ id: '${periodicTask.id}', title: '${periodicTask.task}',start: new Date(y, m, '${periodicTask.startDay}'), end: new Date(y, m, '${periodicTask.endDay}', 24, 0, 0, 0) ,type:'${periodicTask.description}',area: '${periodicTask.area.name}',startDate: new Date('${periodicTask.startDate}'),frequency:'${periodicTask.frequency}',location:'${periodicTask.location.name}', repeat: 1,endDate:new Date('${periodicTask.endDate}'), color: "#"+ Math.random().toString(16).slice(2, 8) },
</c:otherwise>
</c:choose>
</c:forEach>
];
// Any value represanting monthly repeat flag
var REPEAT_MONTHLY = 1;
// Any value represanting yearly repeat flag
var REPEAT_YEARLY = 2;
function Unix_timestamp(t)
{
var dt = new Date(t*1000);
var hr = dt.getHours();
var m = "0" + dt.getMinutes();
var s = "0" + dt.getSeconds();
return dt;
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventTime: false,
eventLimit: true,
editable: true,
eventMouseover: function (data, event, view) {
// $('#'+data.id).tooltip('show')
tooltip = '<div class="tooltip tooltip-top" style="display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:10px; color:#fff;font-size:12px Arial;;height:auto;position:absolute;z-index:10001;line-height: 150%;">' + 'title ' + ':- ' + data.title + '</br>' + 'description ' + ':- ' + data.type + '</br>' + 'location ' + ':- ' + data.location + '</br>' + 'Frequency ' + ':- ' + data.frequency + '</br>' + 'Area ' + ':- ' + data.area+'';
if(data.frequency =='Weekly'){
var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
tooltip += '</br>'+'Day' + ':- ' + weekday[data.dow] + '</br></div>';
}else{
tooltip += '</br>'+'Start Date ' + ':- ' + data.startDate + '</br>End Date ' + ':- ' + data.endDate + '</br></div>';
}
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltip ').fadeIn('500');
$('.tooltip ').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltip ').css('top', e.pageY + 10);
$('.tooltip ').css('left', e.pageX + 20);
});
},
eventDrop: function(event, delta, revertFunc) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Re-Shedule it!"
},
function (isConfirm) {
if (isConfirm)
{
window.location = "${pageContext.request.contextPath}/task/periodic-task-shedule-update/"+event.id+"/"+event.start.format()+"/"+new Date(event.start).getDay() ;
}
else{
revertFunc()
}
});
},
eventMouseout: function (data, event, view) {
$(this).css('z-index', 8);
$('.tooltip ').remove();
},
events: function(start, end, timezone, callback) {
/* $.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/task/calendar-periodic-task-view",
dataType: 'json',
data: {
start: event.start,
end: event.end
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
start: $('#start').val(''),
end: $('#end').val('')
});
});
callback(events);
}
}); */
var current_month = new Date($('#calendar').fullCalendar('getDate').format()).getMonth()+1;
var current_fullYear = new Date($('#calendar').fullCalendar('getDate').format()).getFullYear();
var events = [];
$.each(defaultEvents, function(key, event) {
if (Date.parse(new Date(event.endDate)) >= Date.parse(new Date($('#calendar').fullCalendar('getDate').format()))) {
if(event.repeat ===0 ){
var objevent={
start: "14:00",
color:event.color,
id:event.id,
location:event.location,
repeat:event.repeat,
title:event.title,
dow:event.dow,
area:event.area,
frequency:event.frequency,
type:event.type,
endDate:event.endDate,
startDate: event.startDate
}
events.push(objevent);
}else if(event.repeat === 1 && ( current_month > (new Date(event.start).getMonth()+1)) || current_fullYear > new Date(event.start).getFullYear() ){
var new_start_date = new Date(current_fullYear+'-'+current_month+'-'+new Date(event.start).getDate());
var new_end_date = new Date(current_fullYear+'-'+current_month+'-'+new Date(event.end).getDate());
var objevent={
color:event.color,
start:new_start_date,
id:event.id,
location:event.location,
repeat:event.repeat,
area:event.area,
frequency:event.frequency,
end:new_end_date,
title:event.title,
type:event.type,
endDate:event.endDate,
startDate: event.startDate
}
events.push(objevent);
}
events.push(objevent);
}
});
callback(events);
},
});