Save jQuery FullCalendar selected Day details in ASP.Net

Hi nauna,

Please refer below sample. Use fullCalendar eventClick event and save the selected events in an Array. Then use the Array and save in HiddenField on Button click to save in the database.

HTML

<div id="calendar"></div>
<asp:Button ID="btnSelect" runat="server" Text="Select" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: '{}',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $.each(JSON.parse(data.d), function (i, v) {
                    events.push({
                        title: "\nName: " + v.FirstName,
                        start: moment(v.BirthDate),
                    });
                });
                GenerateCalendar(events);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Error: " + XMLHttpRequest.responseText);
            }
        })

        var selectedEvents = [];

        function GenerateCalendar(events) {
            $('#calendar').fullCalendar('destroy');
            $('#calendar').fullCalendar({
                defaultDate: new Date(),
                timeFormat: 'h(:mm)a',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: events,
                eventClick: function (eventInfo) {
                    var selectedEvent = { title: eventInfo.title };
                    selectedEvents.push(selectedEvent);
                    $(this).css('background-color', 'red');
                }
            })
        }

        $("#btnSelect").on("click", function () {
            alert(JSON.stringify(selectedEvents));
            return false;
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
}

[System.Web.Services.WebMethod]
public static string GetData()
{
    List<EmployeeModel> employeeModel = new List<EmployeeModel>();
    employeeModel.Add(new EmployeeModel { FirstName = "Robert", BirthDate = new DateTime(2022, 07, 25, 13, 50, 55) });
    employeeModel.Add(new EmployeeModel { FirstName = "Maria", BirthDate = new DateTime(2022, 07, 24, 18, 23, 07) });
    return Newtonsoft.Json.JsonConvert.SerializeObject(employeeModel);
}

public class EmployeeModel
{
    public string FirstName { get; set; }
    public DateTime? BirthDate { get; set; }
}

Screenshot