CODEWITHSUNDEEP
c#javascriptjqueryfullcalendar
anuguy
anuguy

Reputation: 21

Update Events Dynamically

i have a couple of queries regarding the fullcalendar by arshaw..

  1. when i select a particular stretch of dates and give an appropriate title as shown here i get the event rendered in the calendar.. but when i want to save the event (I'm using asp.net) ie say after the user clicks on a save button,the title,startdate,end date has to be written into the events[{}] of the script..for this im using response.write("script /script(with the tags of course)") after the button click which doesnt work.. would anyone suggest a better or a simpler working way?

  2. also how to disable the selectable property? eg only an admin can set the event and a user can only see the event and not edit it..

Upvotes: 2

Views: 535

Answers (1)

nemke
nemke

Reputation: 2458

I don't think that you can update fullcalendar event JavaScript object with Response.Write() method.

You should use ajax to save event on server side and update calendar on client side. Do something like this

 function saveEvent() {

    var event = { startDate: $('#txtDate').val(), description: $('#txtDescription').val(), id: id }


    $.ajax({
        type: "POST",
        async: false,
        url: "../UserCalendarService.asmx/SaveEvent",
        data: "{'startDate': '" + event.startDate + "','description':'" + event.description + "','id':'" + event.id + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            result = result.d;
            eventFound = $('#calendar').fullCalendar('clientEvents', result.id).length;
            if (eventFound == 1) {
                existingEvent = $('#calendar').fullCalendar('clientEvents', result.id);
                existingEvent[0].title = result.title;
                existingEvent[0].start = result.start;
                existingEvent[0].editable = result.editable;
                existingEvent[0].allday = true;
                $('#calendar').fullCalendar('updateEvent', existingEvent[0]);
            }
            else {
                $('#calendar').fullCalendar('renderEvent', {
                    title: result.title,
                    start: result.start,
                    id: result.id,
                    editable: result.editable,
                    allday: true
                },
             false // make the event "stick"
            );
            }
        },
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            if (err.Message == 'SomeErrorMessage') {
                //handleError, redirect or popup message
            }
        }
    });

}

As for your second question, event object has editable property. It is true or false. You can found more about it in proper documentation.

Upvotes: 1

Related Questions