javascriptjquerywebformsfullcalendarfullcalendar-3

How to display saved date on the update\delete dialog in fullcalendar 3.1


I have this code in default.aspx:

<td class="alignLeft">
    <input type="datetime-local" id="eventStart" name="startdaytime" runat="server">               
</td>

I want to display the saved date, while opening the dialog.

function updateEvent(event, element) {
    // alert(event.description);

    if ($(this).data("qtip")) $(this).qtip("destroy");

    currentUpdateEvent = event;

    $('#updatedialog').dialog('open');
    $("#eventName").val(event.title);
    $("#eventDesc").val(event.description);
    $("#eventId").val(event.id);
    $("#eventStart").val(event.start);
    //moment($("#eventStart").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD hh:mm");
    //new Date($("#eventStart").text(event.start));
    
    $("#colorPicker").val(event.color);
    $("#EditEventNote").val(event.note);
    

    if (event.end === null) {
        $("#eventEnd").text("");
    }
    else {
          $("#eventEnd").val(event.end);
    }

    return false;
}

I have tried in many ways, but nothing is working.

Update:call to the 'UpdateEvent':

 $('#updatedialog').dialog({
            autoOpen: false,
            width: 680,
            buttons: {
                "update": function () {
                    var eventToUpdate = {
                        id: currentUpdateEvent.id,
                        title: $("#eventName").val(),
                        description: $("#eventDesc").val(),
                        color: $("#colorPicker").val(),
                        start: new Date($("#eventStart").val()),
                        end: new Date($("#eventEnd").val()),
                        note: $("#EditEventNote").val(),
                    };
                   PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                    $(this).dialog("close");
                                      $('#calendar').fullCalendar('refetchEvents');
                     }, 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update n.2

 currentUpdateEvent.title = $("#eventName").val();
                currentUpdateEvent.description = $("#eventDesc").val();
                currentUpdateEvent.color = $("#colorPicker").val();
                currentUpdateEvent.note = $("#EditEventNote").val();
                currentUpdateEvent.start = new Date($("#eventStart").val());
                currentUpdateEvent.end = new Date($("#eventEnd").val());
                $('#calendar').fullCalendar('updateEvent',currentUpdateEvent);

Solution

  • Since the event dates are delivered to as momentJS objects from fullCalendar, you should be able to format the date to the required format using momentJS's format() function.

    As per the documentation for a datetime-local field, an example of the required format is 2017-06-01T08:30, so this means you should be able to write

    $("#eventStart").val(event.start.format("YYYY-MM-DD[T]HH:mm:ss"));
    

    for the start field, and similar for the end field.