How to add any event in fullcalendar on click of button?

Question

I have added ('+') button on each day/ cells.

var add_button = '<input type="button" value="+" />'; 
$(".fc-day-number").prepend(add_button);

How to add event after clicking on this ('+') button, able to do the same on click of any day by writing this:

dayClick: function(date) {
                addEvent(date);                 
            },

function addEvent(date) {
    var newEvent = {
    title: timeSlot,
    start: date.format()
    };
}

Answer 1

When the button is clicked you can open a dialog. Dialog is a form which takes in values. When the form is saved you can do an jquery ajax call to save it to your storage.

dayClick: function (date, allDay, jsEvent, view) {
            $('#eventTitle').val("");
            $('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
            $('#eventTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
            ShowEventPopup(date);
        },

function ShowEventPopup(date) {

    $('#popupEventForm').modal('show');
    $('#eventTitle').focus();
}

$('#btnPopupSave').click(function () {

    $('#popupEventForm').hide();

    var dataRow = {
        'Title': $('#eventTitle').val(),
        'NewEventDate': $('#eventDate').val(),
        'NewEventTime': $('#eventTime').val(),
        'NewEventDuration': $('#eventDuration').val()
    }

    ClearPopupFormValues();

    $.ajax({
        type: 'POST',
        url: "/Diary/SaveEvent",
        data: dataRow,
        success: function (response) {
            if (response == 'True') {
                $('#calendar').fullCalendar('refetchEvents');
                alert('New event saved!');
            }
            else {
                alert('Error, could not save event!');
            }
        }
    });
});