Develop Reference

My FullCalendar will not parse JS object(array) which is returned from controller when there is dayofWeek

I want to create a calendar with scheduled event, so I fetched the data from my database into controller, process them into the format as it needed, and return an Json array of event object.However, the calendar do not show the event with daysofWeek.
//events is an array of primary key, which will later been used to retrieve data from database in controller
var a = JSON.stringify(events);
$(function () {
$.post('/SchedulingManager/SetVariable',
{ key: a, value: "Test" }, function (result) {
GenerateCalendar(result);
});
});
}));
function GenerateCalendar(array) {
$('#calendar'). fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
},
timeFormat: 'hh:mm a',
selectable: true,
defaultView: 'month',
editable: true,
allDaySlot: true,
selectable: true,
slotMinutes: 15,
events:array,
})
}
})();
This is the JSON array that is return from the controller
However, the calendar only shows the event with fix date, but not the events that is with daysofWeek property.( And the time displayed is wrong too for another case).But , when I copy the exactly same code
{ dow: '[1,2,3,4,5]', title: 'OFA-0001 : (test event log)', start: ' 10:00:00 ', end: '11:00:00 ' }
the event is showned .
Event is shown if I create the array in view
No weekly event is showed if the object with daysofWeek is in the array that is retrieved from controller
Can anynone help me with this I am stuck.Thank you.

Fullcalendar 3 - Get current instance on Select function

I use Fullcalendar 3, and I have several instances of Calendars.
I want to select the current instance on select function, for now I have :
$('.calendar').fullCalendar({
defaultDate: moment('2000-01-03'),
allDaySlot: false,
selectable: true,
editable: true,
select: function(start, end, allDay) {
console.log(this);
// this does nothing
// before I had $('#calendar').fullCalendar('....');
this.el.fullCalendar('renderEvent', {
start: start,
end: end,
allDay: allDay
},
false // make the event "stick"
);
this.el.fullCalendar('unselect');
},
Before I used $('#calendar').fullCalendar('....');, but now I have different instances.
How can I use a function like renderEvent inside the select function ? Using the current instance ?

Ok this way is working :
select: function(start, end, allDay) {
this.calendar.el.fullCalendar('renderEvent', {
start: start,
end: end,
allDay: allDay
},
false // make the event "stick"
);
this.calendar.el.fullCalendar('unselect');
},
And for example, on eventClick event, I had to use another one :
eventClick: function(calEvent, jsEvent, view) {
if(confirm("Voulez-vous supprimer cet horaire ?")) {
// delete in frontend
calEvent.source.calendar.el.fullCalendar('removeEvents', calEvent.id);
}
}

Fullcalendar doesn't work

I like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});

You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.

only allow to save an event to a specific month in fullcalendar

i´ve got another question to fullcalendar.
I´want to allow the stuff to save events only to a fix month. The other months should be readonly. Is there a way to realize this?
This is my code:
$j('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-05-12',
selectable: true,
selectOverlap: false,
weekends: false,
eventOverlap: false,
select: function(start, end) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
},
eventResize: function (event, dayDelta, minuteDelta) {
saveRange(event);
},
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view ){
saveDrop(event, view);
},
eventReceive: function (event, dayDelta, minuteDelta){
saveDay(event);
},
eventRender: function(event, element) {
if(event.className != 'disableDelete'){ element.append( "<span class='closeon'>x</span>" );}
element.find(".closeon").click(function() {
$j('#calendar').fullCalendar('removeEvents',event._id);
deleteDay(event);
});
},
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($j('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$j(this).remove();
}
},
editable: true
});
The user should be able to view the other months but not be able to set events on it. So i want to set the other days readonly. Is it possible?
Thanks!

You can do this as follows
var monthStartDate = new Date('1/1/2017');
var monthEndDate = new Date('1/31/2017');
// monthStartDate and monthEndDate is month range in which you want to save event
select: function(start, end) {
if(start >= monthStartDate && start <= monthEndDate && end >= monthStartDate && end <= monthEndDate) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
}
},
This will not allow to save events between monthStartDate and monthEndDate.

fullcalendar not showing event base on event time

I am building a event calendar within Hero Framework. I have got my fullcalendar linked to DB via JSON method. The record is showing start at "2012-04-18 12:00" and end at "2012-04-18 14:00" but calendar failed to show the event base on the time. It is shown as ALL-DAY event. Any idea how to solve that?
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDaySlot: false,
firstHour: 9,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});

you need to set the event allDay property to false

When you return the events from your {url}ajaxget/data url, you need to specify that the event is not all day.
You do this my setting an allDay field on each event that is not all day long.
It may look like this:
[{
start : 10000000,
end : 10000500,
title : 'example event'
allDay : false
}, ... ]
You can also find this info in the documentation.