Перенос событий из базы данных в полный календарь
Итак, я искал это везде и не мог реализовать рабочий метод.
Я создаю C#, систему ASP.NET, и в этом проекте она использует Full Calendar v3.9, у меня также есть база данных на SQLServer, где сохраняются события. Я загружаю эти события в Календарь, но мне не удалось это сделать.
Мой класс (ModeloTarefas):
private int id;
private string title, start , end;
public int Id
{
get { return id; }
set { id = value; }
}
public string Title
{
get{ return title; }
set{ this.title = value; }
}
public string Start
{
get { return start; }
set { start = value; }
}
public string End
{
get { return end; }
set { end = value; }
}
//CONSTRUCTOR
public ModeloTarefas(int id, String title, String start, String end)
{
this.id = id;
this.title = title;
this.start = start;
this.end = end;
}
Метод веб-сервера:
[WebMethod]
public String ListarTarefas()
{
//Criar um array para guardar as informações que virão do BD
List<ModeloTarefas> lista = new List<ModeloTarefas>();
string tarefasJsonString = "";
try
{
con.Open();
//Comando para selecionar os itens da tabela peixes
SqlCommand listar = new SqlCommand("SELECT * FROM Tarefas", con);
SqlDataReader leitor = listar.ExecuteReader();
//Realiza a captura dos dados caso haja algo na tabela
if (leitor.HasRows)
{
var indexOfId = leitor.GetOrdinal("ID");
var indexOfTitle = leitor.GetOrdinal("Title");
var indexOfStart = leitor.GetOrdinal("start");
var indexOfEnd = leitor.GetOrdinal("end");
while (leitor.Read())
{
var id = (int)leitor.GetValue(indexOfId);
var title = leitor.GetValue(indexOfTitle).ToString();
var start = leitor.GetValue(indexOfStart);
var end = leitor.GetValue(indexOfEnd);
//Convert Implicity typed var to Date Time
DateTime RealData_Inicio = Convert.ToDateTime(start);
DateTime RealData_Fim = Convert.ToDateTime(end);
//Convert Date Time to ISO
String ReadyData_Inicio = RealData_Inicio.ToString("s");
String ReadyData_Fim = RealData_Fim.ToString("s");
ModeloTarefas tarefa = new ModeloTarefas(id, title, ReadyData_Inicio, ReadyData_Fim);
lista.Add(tarefa);
}
tarefasJsonString = (new JavaScriptSerializer()).Serialize(lista);
}
}
catch (Exception e)
{
lista = null;
}
if (con.State == ConnectionState.Open)
con.Close();
return tarefasJsonString;
}
JavaScript для загрузки календаря:
<script>
//Get current Date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = yyyy + '/' + mm + '/' + dd;
//Load Calendar
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'Dia' },
listWeek: { buttonText: 'Semana' }
},
defaultView: 'month',
defaultDate: today,
locale: 'pt-br',
navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
//Create events when clicking
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
// Traz os eventos do Banco de Dados
eventSources: [
{
url: '../WebService1.asmx/ListarTarefas',
type: 'POST',
error: function () {
alert('Ocorreu um erro ao retornar as Tarefas. Por favor, entre em contato conosco.');
console.log(MediaError)
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
});
});
</script>
Я не профессионал в Javascript (на самом деле это мой первый большой проект с JS). Я попробовал некоторые решения, которые я нашел здесь, на Stackru, но не смог заставить его работать.
Это JSON, который возвращает веб-метод:
<string xmlns="http://tempuri.org/">
[{"Id":3,"Title":"Teste Tarefa 1","Start":"2018-11-13T00:00:00","End":"2018-11-13T00:00:00"},{"Id":4,"Title":"Teste Tarefa 2","Start":"2018-11-13T00:00:00","End":"2018-11-13T00:00:00"}]
</string>