How to change start date, end date in update dialog in fullcalendar

Question

I will change the start and end date in fullcalendar ,in update dialog. I added two textbox to the update dialog. In calendarscript.js I added two lines, passing the new values for the dates, but I get the error:

'System.FormatException-- /Date(NaN)/ isn't a valid value for DateTime'

$(document).ready(function() {
    // update Dialog
    $('#updatedialog').dialog({
        autoOpen: false,
        width: 470,
        buttons: {
            "update": function() {
                   var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    start: new Date($("#eventStart").val()),
                    end: new Date($("#eventEnd").val())
                 };

How can I pass date values?

There is an update: I no longer have the error in the console - now it changes the date but it sets the time incorrectly.

For example I put as the date of the event:

2021/08/20 18:00 -20/08/2021 19:00

It sets the time at 15:00 and 16:00 on 2021/08/20

New Update: this is the code I'm using:

$('#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())
                     start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm"),
                    end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm")

                };

On the C# side I have:

public static void updateEvent(int id, String title, String color, String description, DateTime start, DateTime end, bool allDay)
    {...

The end and start values arrive as '01/01/0001 00:00:00'

I send data to C# in this way:

$('#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())
                     start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm"),
                    end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm")

                };

                //if (checkForSpecialChars(eventToUpdate.title) || checkForSpecialChars(eventToUpdate.description)) {
                //    alert("immetti caratteri da A a Z, da a a z, da 0 a 9, spazi");
                //}
                //else {
                PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                $(this).dialog("close");

                currentUpdateEvent.title = $("#eventName").val();
                currentUpdateEvent.description = $("#eventDesc").val();
                currentUpdateEvent.color = $("#colorPicker").val();
                //currentUpdateEvent.start = $("#eventStart").val();
                //currentUpdateEvent.end = $("#eventEnd").val();
                currentUpdateEvent.start = new Date($("#eventStart").val());
                currentUpdateEvent.end = new Date($("#eventEnd").val());
                $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                //location.reload(true);
                /* } */

            },

C# side I have,

[System.Web.Services.WebMethod(true)]
    public static string UpdateEvent(CalendarEvent cevent)
    {
        List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
        if (idList != null && idList.Contains(cevent.id))
        {
             
            if (CheckAlphaNumeric(cevent.title) && CheckAlphaNumeric(cevent.description))
            {
               // EventDAO.updateEvent(cevent.id, cevent.title, cevent.description, cevent.color);
                EventDAO.updateEvent(cevent.id, cevent.title, cevent.color, cevent.description, cevent.start, cevent.end, false);
....

When exactly do you get that error? I feel like you've probably missed out the line of code which throws it. What values were in your date textboxes at the time? What version of fullCalendar are you using? There is lots missing from your question, which leads to uncertainty. Please take the [tour], read [ask] and how to create a [mre] of your problem, so you understand how to use the site and what info you need to provide. Then please edit your question, and if it's understandable then we'll be happy to try and help you. Thanks. — ADyson, Aug 17 '21 at 13:00
I'm using fullcalendar 3.10 I added two input boxes: and in the default.aspx,under — ISO, Aug 17 '21 at 13:33
If you have extra code to add please **edit your question** as I requested. Don't put code in the comments, it is hard to read and it's easy for others not to notice it. The "edit" button is under your question near the the little blue tag. And also, that code isn't the information I asked you for, anyway - please re-read my request. — ADyson, Aug 17 '21 at 13:39
Thanks for the update. I don't think you should be using `new Date` to parse those date strings...the Date constructor can't necessarily recognise the string format you've used (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date). Also, fullCalendar3 uses momentJS to parse dates so there's no need to use the `Date` object anyway. And with that you can specify the exact format it should use - see https://momentjs.com/docs/#/parsing/string-format/. This should work better: https://codepen.io/ADyson82/pen/oNWRQKY — ADyson, Aug 17 '21 at 14:50
Thanks Adyson, but if I use 'start: moment ($ ("# eventStart"). Val (), "YYYY / MM / DD HH: mm"), end: moment ($ ("# eventEnd"). val (), "YYYY / MM / DD HH: mm") ,the value '01 / 01/0001 00:00:00 'is passed to the update in EventDao.cs — ISO, Aug 17 '21 at 15:47
Well that's a separate issue to what I showed in my demo. Also it's unclear how that would affect what you send to your server, because this code is just for passing to fullCalendar. Or are you also using the same object for an AJAX call? It's unclear. As I said before, what you've shown is clearly only part of the code. Please provide a [mre] of any issues/errors you want to talk about. — ADyson, Aug 17 '21 at 16:03
Thanks for the update but you're still not showing me how you're actually sending the data from JavaScript to the c# code. Also is that a webmethod in an asmx file, or an MVC action, or what?? There are many different varieties of asp.net, it would help to know what we're dealing with. — ADyson, Aug 18 '21 at 16:22
Sorry ADyson,is a webmehod:[System.Web.Services.WebMethod(true)] public static string UpdateEvent(CalendarEvent cevent) { List idList = (List)System.Web.HttpContext.Current.Session["idList"]; if (idList != null && idList.Contains(cevent.id)) { if (CheckAlphaNumeric(cevent.title) && CheckAlphaNumeric(cevent.description)) { EventDAO.updateEvent(cevent.id, cevent.title, cevent.color, cevent.description, cevent.start, cevent.end, false); — ISO, Aug 18 '21 at 16:32
You can update the question with that code please. Also again please show how you are sending the data from the browser to the c#. That could be quite important. — ADyson, Aug 18 '21 at 17:30
Ok thanks yes. so now I can see that you're using two different event objects - one to send to C#, and another to send to fullCalendar. So I think what we can do with the dates in the `eventToUpdate` objects is explicitly re-format them to an unambiguous format before we send them to C# - otherwise I'm not sure what format they'll be serialized in automatically for the AJAX request, and it seem it's not a format your webmethod can understand. So I suggest `start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm)` - and the same for the end date. — ADyson, Aug 19 '21 at 12:19
I wrote it all up as a full answer below, so you can mark it as "accepted" - thanks :-) — ADyson, Aug 19 '21 at 15:34

ADyson · Accepted Answer · 2021-09-13T23:03:31.873

Using Date to parse those date strings is not a good idea...the Date constructor can't necessarily recognise the string format you've used.

Instead you should use momentJS to parse the date and specify the input format so it can read it reliably.

Then to make the date suitable for passing to your C# webmethod, you should explicitly re-format them to an unambiguous format - otherwise I'm not sure what format they'll be serialized in automatically for the AJAX request, and it seems it's not a format your webmethod can understand.

So I suggest, in your eventToUpdate object, setting the date properties as follows:

start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm")
end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm")

Relevant documentation:

JS Date object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Moment JS date parsing: https://momentjs.com/docs/#/parsing/string-format/

MomentJS date output formatting: https://momentjs.com/docs/#/displaying/format/

How to change start date, end date in update dialog in fullcalendar

1 Answers1

Linked