Jquery Full Calender Integrated With ASP.NET

Jquery Full Calender Integrated With ASP.NET

- First you need to define the function in Code-Behind using c# or vb.net that will make a Class that contains the similar properties that is required by Jquery full calendar to Fill the Calendar

- Then We Use Jquery Ajax and make request to that function that will pass some data that you can fill manually or you can also fetch that from database and then return that to this Ajax Request

- Now use the Code below to Plot then on Full Calendar

If you have any problem setting this please tell me in comments I am here to help you setting this up

Download Full Solution Code Here . Don't Forget to Share Us on Social Media

Code To Fetch Events Using Jquery


 <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                data: "{}",
                url: "Default.aspx/GetEvents",
                dataType: "json",
                success: function (data) {
                    $('div[id*=fullcal]').fullCalendar({

                      
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        editable: true,
                        events: $.map(data.d, function (item, i) {
                            var event = new Object();
                            event.id = item.EventID;
                            event.start = new Date(item.StartDate);
                            event.end = new Date(item.EndDate);
                            event.title = item.EventName;
                            event.url = item.Url;
                            event.ImageType = item.ImageType;
                            return event;
                        }), eventRender: function (event, eventElement) {
                            if (event.ImageType) {
                                if (eventElement.find('span.fc-event-time').length) {
                                    eventElement.find('span.fc-event-time')
.before($(GetImage(event.ImageType)));
                                } else {
                                    eventElement.find('span.fc-event-title')
.before($(GetImage(event.ImageType)));
                                }
                            }
                        },
                        loading: function (bool) {
                            if (bool) $('#loading').show();
                            else $('#loading').hide();
                        }
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                }
            });
            $('#loading').hide();
            $('div[id*=fullcal]').show();
        });
        function GetImage(type) {
            if (type == 0) {
                return "<br/><img src = 'Styles/Images/attendance.png' style=
'width:24px;
height:24px'/><br/>";
            }
            else if (type == 1) {
                return "<br/><img src = 'Styles/Images/not_available.png' style=
'width:24px;
height:24px'/><br/>";
            }
            else
                return "<br/><img src = 'Styles/Images/not_available.png' style=
'width:24px;
height:24px'/><br/>";
        }

    </script>

Web Method In C# that Pass the Event to Jquery Ajax Request

  [WebMethod]
        public static IList GetEvents()
        {
            IList events = new List<Event>();
            for (int i = 0; i < DateTime.DaysInMonth(DateTime.Now.Year, 

DateTime.Now.Month); i++)

            {
                events.Add(new Event
                {
                    EventName = "My Event " + i.ToString(),
                    StartDate = DateTime.Now.AddDays(i).ToString("MM/dd/yyyy"),
                    EndDate = DateTime.Now.AddDays(i+1).ToString("MM/dd/yyyy"),
                    ImageType = i % 2,
                    Url = @"http://www.google.com"
                });
            }
            return events;
        }


Class To Define the Event

 public class Event
    {
        public Guid EventID { get { return new Guid(); } }
        public string EventName { get; set; }
        public string StartDate { get; set; }
        public string EndDate { get; set; }
        public int ImageType { get; set; }
        public string Url { get; set; }
    }

Share this

Unknown