I am trying to add events on calendar cell click in .NET like this:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
I took the help of this post:
create event with fullcalendar when clicking on calendar (rails)
I am getting the Selected date and text on Alert , bit not able to post it on selected cell ..
I have tried same solution on jsfiddle:
http://jsfiddle.net/5o66w860/
My code:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'Test1',
start: new Date(2012, 8, 20),
tip: 'Personal tip 1'},
{
title: 'Test2',
start: new Date(2012, 8, 21),
tip: 'Personal tip 2'}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: events_array,
eventRender: function(event, element) {
element.attr('title', event.tip);
},
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
/**
* ajax call to store event in DB
*/
jQuery.post(
"event/new" // your url
, { // re-use event's data
title: title,
start: start,
end: end,
allDay: allDay
}
);
}
calendar.fullCalendar('unselect');
}
});
});
I also to remove , events array . .. but still not working
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row. Save this answer.
Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.
Ok , got It after some googling :
Just need to change Code on select
select: function (start, end, jsEvent, view) {
var abc = prompt('Enter Title');
var allDay = !start.hasTime && !end.hasTime;
var newEvent = new Object();
newEvent.title = abc;
newEvent.start = moment(start).format();
newEvent.allDay = false;
$('#calendar').fullCalendar('renderEvent', newEvent);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With