Я пытаюсь реализовать FullCalendar в моем проекте ASP.NET WebForms .Я видел несколько примеров, чтобы добиться этого без всякой удачи, поскольку они для MVC, к которому я не привык.
Мои События Таблица базы данных:
EventId (int)
Subject (nvarchar (100))
Description (nvarchar (300))
Start (datetime)
End (datetime)
ThemeColor ((nvarchar (10))
IsFullDay (bit)
WebForm2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication6.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="calendar">
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "WebForm2.aspx/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalendar(events);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
}
//error: function (error) {
// alert('failed');
//}
})
function GenerateCalendar(events) {
//$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
})
</script>
</form>
</body>
</html>
WebForm2.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web.Services;
using System.Web.UI.WebControls;
namespace WebApplication6
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<events> GetEvents()
{
DataTable dt = new DataTable();
using (SqlConnection sqlConn = new SqlConnection("ConnectionString"))
{
using (SqlCommand sqlCmd = new SqlCommand("usp_GetEvents", sqlConn))
{
sqlCmd.CommandType = CommandType.StoredProcedure;
sqlConn.Open();
SqlDataAdapter ad = new SqlDataAdapter(sqlCmd);
ad.Fill(dt);
sqlConn.Close();
}
}
return dt.AsEnumerable().Select(datarow =>
new events()
{
EventId = Convert.ToInt32(datarow["EventId]),
Subject = Convert.ToString(datarow["Subject"]),
Description = Convert.ToString(datarow["Description"]),
Start = Convert.ToDateTime(datarow["Start"]),
End = Convert.ToDateTime(datarow["End"]),
ThemeColor = Convert.ToString(datarow["ThemeColor"]),
IsFullDay = false
}
).ToList();
}
public class events
{
public int EventId { get; set; }
public string Subject { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string ThemeColor { get; set; }
public bool IsFullDay { get; set; }
}
}
}
Используя этот код, события загружаются из базы данных (я поставил точку останова на нем) но не заполнил в календаре.Календарь действительно показывает, но без событий.Может кто-нибудь помочь мне с этим?
Вот несколько изображений