title: How to Populate FullCalendar from a Database using Ajax and C#
body: <p>I am learning to use the FullCalendar.io and read through the documentation on the <a href="https://fullcalendar.io/docs" rel="nofollow noreferrer">FullCalendar.io</a> site but have not been able to figure out how to update my database with the events created / changed from using the Calendar. </p>
  
  <p>I am very new to this so any clear direction on saving events to the database would be appreciated. </p>
  
  <p>So far I got a demo working but don't have any C# code yet as not sure how to get events data saved to database or pulled from database and displayed. </p>
  
  <p>Here is what my calendar looks like: </p>
  
  <p><a href="https://i.stack.imgur.com/uAcFR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uAcFR.png" alt="enter image description here"></a></p>
  
  <p><strong>Here is the ASPX file:</strong> </p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="css/fullcalendar.min.css"&gt;
      &lt;link rel="stylesheet" href="css/fullcalendar.print.css" media="print"&gt;
      &lt;link rel="stylesheet" href="css/adminlte.css"&gt;
      &lt;link rel="stylesheet" href="css/jquery-ui.css"&gt;
      &lt;link rel="icon" href="/img/favicon.png"&gt;
  &lt;/head&gt;
  &lt;body class="hold-transition sidebar-mini"&gt;
      &lt;div class="wrapper"&gt;
          &lt;nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom"&gt;
          &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" data-widget="pushmenu" href="#"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item d-none d-sm-inline-block"&gt;
              &lt;a href="index.aspx" class="nav-link"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;!-- Main Sidebar Container --&gt;
          &lt;aside class="main-sidebar sidebar-light-primary elevation-4"&gt;
          &lt;!-- Sidebar --&gt;
          &lt;div class="sidebar"&gt;
          &lt;!-- Sidebar Menu --&gt;
          &lt;nav class="mt-2"&gt;
              &lt;ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
          &lt;/aside&gt;
  
          &lt;div class="content-wrapper"&gt;
          &lt;div class="content-header"&gt;
          &lt;div class="container-fluid"&gt;
          &lt;div class="row mb-2"&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;h1 class="m-0 text-dark"&gt;Testing Calendar&lt;/h1&gt;
            &lt;/div&gt;&lt;!-- /.col --&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;ol class="breadcrumb float-sm-right"&gt;
                &lt;li class="breadcrumb-item"&gt;&lt;a href="./index.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="breadcrumb-item active"&gt;Reports&lt;/li&gt;
              &lt;/ol&gt;
            &lt;/div&gt;&lt;!-- /.col --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
        &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
      &lt;/div&gt;
      &lt;!-- /.content-header --&gt;
  
      &lt;form id="form1" runat="server"&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"&gt;&lt;/asp:ScriptManager&gt;
      &lt;!-- Main content --&gt;
      &lt;section class="content"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="row" &gt;
              &lt;!-- SEARCH WEEKEND FEATURE --&gt;             
              &lt;div class="col-12"&gt;
                  &lt;div class="card"&gt;      
                      &lt;div class="card-body"&gt;
                          &lt;div class="row"&gt;
                            &lt;div class="col-md-3"&gt;
                              &lt;div class="card"&gt;
                                &lt;div class="card-header"&gt;
                                  &lt;h4 class="card-title"&gt;Draggable Events&lt;/h4&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                  &lt;!-- the events --&gt;
                                  &lt;div id="external-events"&gt;
                                    &lt;div class="external-event bg-success"&gt;Interview&lt;/div&gt;
                                    &lt;div class="external-event bg-warning"&gt;Payment&lt;/div&gt;
                                    &lt;div class="external-event bg-info"&gt;Tour&lt;/div&gt;
                                    &lt;div class="external-event bg-primary"&gt;Arrival&lt;/div&gt;
                                    &lt;div class="external-event bg-danger"&gt;Resign&lt;/div&gt;
                                    &lt;div class="checkbox"&gt;
                                      &lt;label for="drop-remove"&gt;
                                        &lt;input type="checkbox" id="drop-remove"&gt;
                                        remove after drop
                                      &lt;/label&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;!-- /.card-body --&gt;
                              &lt;/div&gt;
                              &lt;!-- /. box --&gt;
                              &lt;div class="card"&gt;
                                &lt;div class="card-header"&gt;
                                  &lt;h3 class="card-title"&gt;Create Event&lt;/h3&gt;
                                &lt;/div&gt;
                                &lt;div class="card-body"&gt;
                                  &lt;div class="btn-group" style="width: 100%; margin-bottom: 10px;"&gt;
                                    &lt;!--&lt;button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown"&gt;Color &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;--&gt;
                                    &lt;ul class="fc-color-picker" id="color-chooser"&gt;
                                      &lt;li&gt;&lt;a class="text-primary" href="#"&gt;&lt;i class="fa fa-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a class="text-warning" href="#"&gt;&lt;i class="fa fa-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a class="text-success" href="#"&gt;&lt;i class="fa fa-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a class="text-danger" href="#"&gt;&lt;i class="fa fa-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a class="text-muted" href="#"&gt;&lt;i class="fa fa-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                  &lt;/div&gt;
                                  &lt;!-- /btn-group --&gt;
                                  &lt;div class="input-group"&gt;
                                    &lt;input id="new-event" type="text" class="form-control" placeholder="Event Title"&gt;
  
                                    &lt;div class="input-group-append"&gt;
                                      &lt;button id="add-new-event" type="button" class="btn btn-primary btn-flat"&gt;Add&lt;/button&gt;
                                    &lt;/div&gt;
                                    &lt;!-- /btn-group --&gt;
                                  &lt;/div&gt;
                                  &lt;!-- /input-group --&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;                        
                            &lt;div class="col-md-6"&gt;
                              &lt;div class="card card-primary"&gt;
                                &lt;div class="card-body p-0"&gt;
                                  &lt;!-- THE CALENDAR --&gt;
                                  &lt;div id="calendar"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;!-- /.card-body --&gt;
                              &lt;/div&gt;
                              &lt;!-- /. box --&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;          
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
           $.ajax({
               type: "POST",
               contentType: "application/json", | data: "{}",
               url: "calendar.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 "&lt;br/&gt;&lt;i class='fa fa-money nav-icon text-info'&gt;&lt;/i&gt;&lt;br/&gt;"
          }
          else if (type == 1) {
              return "&lt;br/&gt;&lt;i class='fa fa-pie-chart nav-icon text-info'&gt;&lt;/i&gt;&lt;br/&gt;"
          }
          else
              return "&lt;br/&gt;&lt;i class='fa fa-calendar nav-icon text-info'&gt;&lt;/i&gt;&lt;br/&gt;"
      }
  &lt;/script&gt;
  &lt;/div&gt;                
  &lt;/section&gt;
  
  &lt;!-- REQUIRED SCRIPTS --&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;!-- ./wrapper --&gt;
  &lt;/div&gt;
  
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery-ui.min.js" type="text/javascript"&gt;//&lt;/script&gt;
  &lt;script src="js/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/fastclick.js"&gt;&lt;/script&gt;
  &lt;script src="js/adminlte.js"&gt;&lt;/script&gt;
  &lt;script src="js/demo.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/moment.js"&gt;&lt;/script&gt;
  &lt;script src="js/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;!-- Page specific script --&gt;
  &lt;script&gt;
  var events=new Array();
  var numberofevents = this.serviceVariableGetDates.getTotal();
      for (i=0;i&lt;numberofevents;i++)
      {
      //alert("numbrr:" + i);
      var dates=this.serviceVariableGetDates.getItem(i);
      console.log(dates.getData());
      var start_date = dates.getValue("c0");
      var end_date = dates.getValue("c1");
      var event_name = dates.getValue("c2");
      //var EventEntry = [ 'title: '+ event_name, 'start: '+ start_date,'end: '+ end_date ];
      event = new Object();       
      event.title = event_name; // this should be string
      event.start = start_date; // this should be date object
      event.end = end_date; // this should be date object
      event.color = "blue";
      event.allDay = false;
      this.label1.setCaption(start_date);
      //EventArray.push(EventEntry);
      console.log(events['title']);
      events.push(event);
      }
  $('#calendar').fullCalendar('addEventSource',events);
  &lt;/script&gt;   
  
  &lt;script&gt;
    $(function () {
  
      /* initialize the external events
       -----------------------------------------------------------------*/
      function ini_events(ele) {
        ele.each(function () {
  
          // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
          // it doesn't need to have a start or end
          var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
          }
  
          // store the Event Object in the DOM element so we can get to it later
          $(this).data('eventObject', eventObject)
  
          // make the event draggable using jQuery UI
          $(this).draggable({
            zIndex        : 1070,
            revert        : true, // will cause the event to go back to its
            revertDuration: 0    //  original position after the drag
          })
  
        })
      }
  
      ini_events($('#external-events div.external-event'))
  
      /* initialize the calendar
       -----------------------------------------------------------------*/
      //Date for the calendar events (dummy data)
      var date = new Date()
      var d    = date.getDate(),
          m    = date.getMonth(),
          y    = date.getFullYear()
      $('#calendar').fullCalendar({
        header    : {
          left  : 'prev,next today',
          center: 'title',
          right : 'month,agendaWeek,agendaDay'
        },
        buttonText: {
          today: 'today',
          month: 'month',
          week : 'week',
          day  : 'day'
        },
        //Random default events
        events    : [ ],
        editable  : true,
        droppable : true, // this allows things to be dropped onto the calendar !!!
        drop      : function (date, allDay) { // this function is called when something is dropped
  
          // retrieve the dropped element's stored Event Object
          var originalEventObject = $(this).data('eventObject')
  
          // we need to copy it, so that multiple events don't have a reference to the same object
          var copiedEventObject = $.extend({}, originalEventObject)
  
          // assign it the date that was reported
          copiedEventObject.start           = date
          copiedEventObject.allDay          = allDay
          copiedEventObject.backgroundColor = $(this).css('background-color')
          copiedEventObject.borderColor     = $(this).css('border-color')
  
          // render the event on the calendar
          // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
          $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)
  
          // is the "remove after drop" checkbox checked?
          if ($('#drop-remove').is(':checked')) {
            // if so, remove the element from the "Draggable Events" list
            $(this).remove()
          }
  
        }
      })
  
      /* ADDING EVENTS */
      var currColor = '#3c8dbc' //Red by default
      //Color chooser button
      var colorChooser = $('#color-chooser-btn')
      $('#color-chooser &gt; li &gt; a').click(function (e) {
        e.preventDefault()
        //Save color
        currColor = $(this).css('color')
        //Add color effect to button
        $('#add-new-event').css({
          'background-color': currColor,
          'border-color'    : currColor
        })
      })
      $('#add-new-event').click(function (e) {
        e.preventDefault()
        //Get value and make sure it is not null
        var val = $('#new-event').val()
        if (val.length == 0) {
          return
        }
  
        //Create events
        var event = $('&lt;div /&gt;')
        event.css({
          'background-color': currColor,
          'border-color'    : currColor,
          'color'           : '#fff'
        }).addClass('external-event')
        event.html(val)
        $('#external-events').prepend(event)
  
        //Add draggable funtionality
        ini_events(event)
  
        //Remove event from text input
        $('#new-event').val('')
      })
    })
  &lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>