Save jQuery FullCalendar selected Day details in ASP.Net

nauna
 
on Jul 23, 2022 06:23 AM
397 Views

hello,

I want to use jQuery big calendar for booking like this Fullcalendar Basic Demo.

But i want to pass dynamic data to calendar and when user select any date from calendar on button click event i want to save it on database.

please advice

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Shivam.M
 
on Jul 25, 2022 03:46 AM

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