C# FullCalendar不显示数据asp.net核心页面_C#_Asp.net Core_Fullcalendar_Razor Pages

C# FullCalendar不显示数据asp.net核心页面

c# asp.net-core fullcalendar

C# FullCalendar不显示数据asp.net核心页面,c#,asp.net-core,fullcalendar,razor-pages,C#,Asp.net Core,Fullcalendar,Razor Pages,我正在尝试使用Visual Studio 2019在Asp.net Core Razor页面中创建FullCalendar应用程序，但它不显示任何数据。我想单击日期并在弹出对话框中输入事件 index.cshtml： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> &l

我正在尝试使用Visual Studio 2019在Asp.net Core Razor页面中创建FullCalendar应用程序，但它不显示任何数据。我想单击日期并在弹出对话框中输入事件

index.cshtml：

  <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
   
    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <script src="~/lib/jquery.min.js"></script>
    <script src="~/lib/moment.js/moment.min.js"></script>
    <script src='fullcalendar/fullcalendar.js'></script>

    <link href='~/fullcalendar/core/main.css' rel='stylesheet' />
    <link href='~/fullcalendar/daygrid/main.css' rel='stylesheet' />
  
 <script src='~/fullcalendar/core/main.js'></script>
    <script src='~/fullcalendar/daygrid/main.js'></script>

    <script>

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth'
            });

            calendar.render();
        });

    </script>

       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css"
          rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css"
          type="text/css" rel="stylesheet" />
</head>
<body>
    <div id='calendar'></div>
 
  <script>
        <link href="~/lib/fullcalendar/fullcalendar.min.css" rel='stylesheet' />
  </script>    
        <script src="~/lib/moment.js/moment.min.js"></script>
        <script src="~/lib/fullcalendar/fullcalendar.min.js"></script>
        <script>
            $(function () {
                $('#calendar').fullCalendar({});

            })
        </script>
   
    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <br />
                <div id="bootstrapModalFullCalendar"></div>

            </div>
        </div>
    </div>
    <div id="myModalSave" 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">&times;</button>
                    <h4 class="modal-title">Save Event</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="hdEventID" value="0" />
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" id="txtTitle" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>StartDate</label>
                            <div class="input-group date" id="dtp1">
                                <input type="text" id="txtStartDate" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group" id="divEndDate" style="display:none">
                            <label>EndDate</label>
                            <div class="input-group date" id="dtp2">
                                <input type="text" id="txtEndDate" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="txtDescription" rows="3" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Theme Color</label>
                            <select id="ddThemeColor" class="form-control">
                                <option value="">Default</option>
                                <option value="red">Red</option>
                                <option value="blue">Blue</option>
                                <option value="black">Black</option>
                                <option value="green">Green</option>
                            </select>
                        </div>
                        <button type="button" id="btnSave" class="btn btn-success">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            var events = [];
            var selectedEvent = null;
            FetchEventAndRenderCalendar();
            function FetchEventAndRenderCalendar() {
                events = [];
                $.ajax({
                    type: "GET",
                    url: "/home/GetEvents",
                    success: function (data) {
                        $.each(data, function (i, v) {
                            events.push({
                                eventID: v.EventID,
                                title: v.Title,
                                description: v.Description,
                                startdate: moment(v.Start),
                                enddate: v.End != null ? moment(v.End) : null,
                                color: v.ThemeColor,
                            });
                        })

                        GenerateCalender(events);
                    },
                    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) {
                        selectedEvent = calEvent;
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>StartDate:</b>' + calEvent.startdate.format("YYYY-MM-DD HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>EndDate:</b>' + calEvent.enddate.format("YYYY-MM-DD HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    },
                    selectable: true,
                    select: function (start, end) {
                        selectedEvent = {
                            eventID: 0,
                            title: '',
                            description: '',
                            startdate: start,
                            enddate: end,
                            color: ''
                        };
                        openAddEditForm();
                        $('#calendar').fullCalendar('unselect');
                    },
                    editable: true,
                    eventDrop: function (event) {
                        var data = {
                            EventID: event.eventID,
                            Title: event.title,
                            StartDate: event.start.format('YYYY-MM-DD HH:mm A'),
                            EndDate: event.end != null ? event.end.format('YYYY-MM-DD HH:mm A') : null,
                            Description: event.description,
                            ThemeColor: event.color,
                        };
                        SaveEvent(data);
                    }
                })
            }

            $('#btnEdit').click(function () {
                //Open modal dialog for edit event
                openAddEditForm();
            })
            $('#btnDelete').click(function () {
                if (selectedEvent != null && confirm('Are you sure?')) {
                    $.ajax({
                        type: "POST",
                        url: '/home/DeleteEvent',
                        data: { 'eventID': selectedEvent.eventID },
                        success: function (data) {
                            if (data.status) {
                                //Refresh the calender
                                FetchEventAndRenderCalendar();
                                $('#myModal').modal('hide');
                            }
                        },
                        error: function () {
                            alert('Failed');
                        }
                    })
                }
            })
            $('#dtp1,#dtp2').datetimepicker({
                format: 'DD/MM/YYYY HH:mm A'
            });
            function openAddEditForm() {
                if (selectedEvent != null) {
                    $('#hdEventID').val(selectedEvent.eventID);
                    $('#txtTitle').val(selectedEvent.title);
                    $('#txtStartDate').val(selectedEvent.start.format('YYYY-MM-DD HH:mm A'));
                    $('#txtEndDate').val(selectedEvent.end != null ? selectedEvent.end.format('YYYY-MM-DD HH:mm A') : '');
                    $('#txtDescription').val(selectedEvent.description);
                    $('#ddThemeColor').val(selectedEvent.color);
                }
                $('#myModal').modal('hide');
                $('#myModalSave').modal();
            }
            $('#btnSave').click(function () {
                //Validation/
                if ($('#txtSubject').val().trim() == "") {
                    alert('Subject required');
                    return;
                }
                if ($('#txtStart').val().trim() == "") {
                    alert('Start date required');
                    return;
                }
                else {
                    var startDate = moment($('#txtStartDate').val(), "YYYY-MM-DD HH:mm A").toDate();
                    var endDate = moment($('#txtEndDate').val(), "YYYY-MM-DD HH:mm A").toDate();
                    if (startDate > endDate) {
                        alert('Invalid end date');
                        return;
                    }
                }

                var data = {
                    EventID: $('#hdEventID').val(),
                    Subject: $('#txtTitle').val().trim(),
                    Start: $('#txtStartDate').val().trim(),
                    Description: $('#txtDescription').val(),
                    ThemeColor: $('#ddThemeColor').val(),
                }
                SaveEvent(data);
                // call function for submit data to the server
            })
            function SaveEvent(data) {
                $.ajax({
                    type: "POST",
                    url: '/home/SaveEvent',
                    data: data,
                    success: function (data) {
                        if (data.status) {
                            //Refresh the calender
                            FetchEventAndRenderCalendar();
                            $('#myModalSave').modal('hide');
                        }
                    },
                    error: function () {
                        alert('Failed');
                    }
                })
            }
        })
    </script>
    

</body>
</html>

型号>Calendar.cs：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace FullCalendar.Models
{
    public class Calendar
    {
        [Key]
        public int EventID { get; set; }
              
        [StringLength(50)]
        [Column("Title")]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [StringLength(50)]
        [Column("Description")]
        [Display(Name = "Description")]
        public string Description { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "End Date")]
        public DateTime EndtDate { get; set; }

        [StringLength(50)]
        [Column("ThemeColour")]
        [Display(Name = "Theme Colour")]
        public string ThemeColour { get; set; }
      
    }
}

为什么不显示事件数据

控制台窗口显示以下错误消息（请参阅随附的两个屏幕截图）：-

我对我的应用程序做了一些更新。首先，我发现我安装了两个不同版本的FullCalendar.io软件——wwwroot目录中的FullCalendar v.5.3.0和FullCalendar v.4.3.0。因此，我删除了所有这些fullcalendar版本，并从下载zip包安装了当前版本5.3.2。我手动安装在wwwroot/lib目录下的fullcalendar文件夹中

我在主项目解决方案（即Pages/Calendars/index.cshtml）-index.cshtml的Pages部分下的名为Calendars的文件夹中创建了一个Razor页面，并在主项目区域中添加了以下代码（使用此链接中描述的脚本标记方法-）：-

@page
@模型MyApp.Pages.Calendars.IndexModel
@{
布局=空；
}
指数
document.addEventListener（'DOMContentLoaded'，函数（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
InitialVew:“dayGridMonth”，
headerToolbar：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
});
calendar.render（）；
});

visual studio中的输出解决方案如下所示：-

.ToString（“MM/dd/yyyy”）

是错误的。fullCalendar只接受ISO日期字符串。请看@ADyson：谢谢您的反馈。在上面的描述中，我已将日期更改为ISO日期字符串格式。解决方案版本仍显示为空白网页。当我检查控制台窗口时，它显示了一些错误消息（我添加了两个图像来显示错误消息）。哪些错误你不明白？404意味着它无法加载日历或其他脚本所需的任何文件。它们可能不存在于这些位置的项目中。据我所知，接下来的错误主要是下载失败的后果。另外，仔细查看HTML，您的页面似乎试图在不同的位置加载大约3个不同版本的fullCalendar。momentJS也包括3次。我还没有开始看CSS。我建议认真整理一下你的链接。检查您要使用的fullCalendar版本的文档，检查需要哪些文件，并确保a）正确加载了这些文件，b）加载了其他不需要的文件，c）没有多次加载同一个文件。Hi@wire_jp，根据您提供的屏幕截图和实际代码，结构不一致，并且缺少一些关键文件，例如

fullcalendar.min.js

，等等。对其他js文件的引用可能存在一些问题，例如

实际上应该是

，您可以尝试再次检查介绍，以确保路径正常。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace FullCalendar.Models
{
    public class Calendar
    {
        [Key]
        public int EventID { get; set; }
              
        [StringLength(50)]
        [Column("Title")]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [StringLength(50)]
        [Column("Description")]
        [Display(Name = "Description")]
        public string Description { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "End Date")]
        public DateTime EndtDate { get; set; }

        [StringLength(50)]
        [Column("ThemeColour")]
        [Display(Name = "Theme Colour")]
        public string ThemeColour { get; set; }
      
    }
}

@page
@model MyApp.Pages.Calendars.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href='~/lib/fullcalendar/lib/main.css' rel='stylesheet' />    
    <script src='~/lib/fullcalendar/lib/main.js'></script> 

    <script>

         document.addEventListener('DOMContentLoaded', function () {
             var calendarEl = document.getElementById('calendar');
             var calendar = new FullCalendar.Calendar(calendarEl, {
                 initialVeiw: 'dayGridMonth',
                 headerToolbar: {
                     left: 'prev, next today',
                     center: 'title',
                     right: 'dayGridMonth,timeGridWeek,timeGridDay'                    
                 },
             });
             calendar.render();
         });

     </script> 

    </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>