Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add events in FullCalendar on click

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

like image 645
Neeraj Verma Avatar asked Sep 18 '15 05:09

Neeraj Verma


People also ask

How do I create a dynamic event in FullCalendar?

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.

How do you get a clicked date in FullCalendar?

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.


1 Answers

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);

                }
like image 170
Neeraj Verma Avatar answered Sep 21 '22 00:09

Neeraj Verma