FullCalendar non carica eventi

Question

Sto usando FullCalendar nella mia applicazione asp.net mvc. Non carica eventi. Sto ricevendo la lista degli eventi con una chiamata ajax. Di seguito è il mio codice. Cosa c'è che non va.?

<div class="row"> 
    <div class="col-lg-12"> 
     <section class="panel"> 
      <div class="panel-body"> 
       <div id="calendar"></div> 
      </div> 
     </section> 
    </div> 
</div> 
<script type="text/javascript"> 
    jQuery.extend({ 
     getValues: function (url) { 
      var result = null; 
      $.ajax({ 
       url: url, 
       type: 'get', 
       dataType: 'json', 
       async: false, 
       success: function (data) { 
        result = data; 
       }, 
       error: function (err) { 
        alert(JSON.stringify(err)); 
       } 
      }); 
      return result; 
     } 
    }); 
    var jsonEvents = $.getValues('@Url.Action("GetEvents", "Booking")'); 
    alert(jsonEvents); 

    //var jsonEvents = [{ title: "Dhaval, (4,6), 6", start: "05/21/2016 1:05:00 PM" }, 
    // { title: "Mohit, (2), 4", start: "05/21/2016 1:05:00 PM" }] 

    $('#calendar').fullCalendar({ 
     header: 
     { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'agendaWeek,agendaDay' 
     }, 
     allDay: true, 
     defaultView: 'agendaWeek', 
     events: jsonEvents//'@Url.Action("GetEvents", "Booking")' 
    }); 
</script> 

** il js nel commento è solo per esempio il formato. ** E il GetEvents/Controller è come sotto,

public Json GetEvents() 
{ 
    string query = "query to get events"; 
    // columns in result table are: id, title, date 
     try 
     { 
      SqlConnection connection = new SqlConnection("connectionString"); 
      connection.Open(); 
      SqlCommand command = new SqlCommand(query, connection); 
      SqlDataReader events = command.ExecuteReader(); 
      DataTable dt = new DataTable(); 
      dt.Load(events); 
      string result = DataTableToJSONWithStringBuilder(dt); 
      connection.Close(); 
      return Json(result, JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) { } 
    } 
public string DataTableToJSONWithStringBuilder(DataTable table) 
    { 
     var JSONString = new StringBuilder(); 
     if (table.Rows.Count > 0) 
     { 
      JSONString.Append("["); 
      for (int i = 0; i < table.Rows.Count; i++) 
      { 
       JSONString.Append("{"); 
       for (int j = 0; j < table.Columns.Count; j++) 
       { 
        if (j < table.Columns.Count - 1) 
        { 
         JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\","); 
        } 
        else if (j == table.Columns.Count - 1) 
        { 
         JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\""); 
        } 
       } 
       if (i == table.Rows.Count - 1) 
       { 
        JSONString.Append("}"); 
       } 
       else 
       { 
        JSONString.Append("},"); 
       } 
      } 
      JSONString.Append("]"); 
     } 
     return JSONString.ToString(); 
    } 

Questo è il formato che voglio. [{title: "Giovanni, (2,1), 6", inizio: "13/05/2016 12:00:00"}, {title: "Olivia, (11,4), 6", inizio: "11/05/2016 12:00:00 AM"}]

Errore di visualizzazione quando si ispeziona l'elemento. :
Impossibile caricare la risorsa: il server ha risposto con uno stato di 400 (Richiesta non valida): http: localho ../ ABC/[% 7Btitle:% 22John,% 20 (4,6),% 206% 22, inizio:% 2205/21/2016% 201: 05: 00% 20pm% 22 fine:% 2205/21/2016% 201: 30: 00% 20pm% 22% 7D,% 7Btitle:% 22Olivia,% 20 (2),% 204% 22, inizia:% 2205/21/2016% 201: 05: 00% 20pm% 22 fine:% 2205/21/2016% 201: 30: 00% 20pm% 22% 7D] start =? 2016/05/15 & end = 2016/05/22 & _ = 1463885539445

qui mi hanno commentato var jsonEvents = [...]. Quando uso eventi predefiniti, il calendario li mostra perfetti. Ma quando chiamo al server, c'è un errore. DO FULLCALENDAR ESEGUE SOLO GLI EVENTI DA UN FILE MEMORIZZATO SUL SERVER. PERCHÉ LA DOCUMENTAZIONE MOSTRA SOLO URL AD UN FILE CHE CONTIENE JSON DATA.

Aiutami. Grazie.

Answer 1

Il tuo unico vero problema che rende il vostro calendario di non farsi vedere è:

defaultView: 'agendaweek', 

Deve essere

defaultView: 'agendaWeek', 

Sì ... Lettera maiuscola incasinato la tua cosa buco.

E non avete bisogno di tutti gli altri

$("#calendar").fullCalendar(...) 

accanto al principale. solo mantenere questo (con capitale w)

$('#calendar').fullCalendar(
      { 
       header: 
       { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       defaultView: 'agendaWeek', 
       selectable: false, 
       selectHelper: false, 
       events: events 
      }); 

EDIT

Questo perché il formato della data non è corretta. L'impostazione predefinita è MM/gg/AAAA. stai cercando di impostare una data al mese 13. E il motivo per cui hai più calendari è che lo hai impostato più volte. Fallo e basta. Puoi vedere un esempio di lavoro here con il tuo json (ho corretto le date). Basta pulire tutto il tuo javascript e HTML per essere come nell'esempio jsFiddle e poi iniziare ad aggiungere cose da te.

Answer 2

provare a seguire

$ (documento).ready (function() {

var sourceFullView = { url: '/Booking/GetEvents/' }; 
    var CalLoading = true; 

    $('#calendar').fullCalendar({ 
     header: { 
      left: '', 
      right: '', 
      center: 'prev,title,next', 
     }, 
     defaultView: 'month', 
     editable: true, 
     allDaySlot: false, 
     selectable: true, 
     slotMinutes: 15, 
     droppable: true, 
     events: '/Booking/GetEvents/' 

});

Non sono sicuro di ciò che si ottiene nella risposta JSON dalla query in questione. quindi, se puoi provare a recuperare i record utilizzando la query Linq di Entity Framework, il seguente codice di esempio potrebbe aiutarti.

  public JsonResult GetEvents() 
      { 
       try 
       { 
        var eventsList = from ev in db.YourTableName 
              select new 
              { 
               Id = ev.Id, 
               Title = ev.Title, 
               Date = ev.Date 
              }; 
        var rows = eventsList.ToArray(); 
        return Json(rows, JsonRequestBehavior.AllowGet); 
       } 
       catch (Exception ex) 
       { 
        throw ex; 
       } 
      } 

Answer 3

provare

eventi: {url: '@ Url.Action ("GetEvents", "prenotazione")', tipo: 'GET', ..}

invece di

eventi: '@ Url.Action ("GetEvents", "prenotazione")'

Ecco il riferimento completo a Proprietà oggetto evento: http://fullcalendar.io/docs/event_data/Event_Object/