问如何正确地为全日历插件创建过滤器？
EN

Stack Overflow用户

提问于 2022-09-16 06:44:35

回答 1查看 73关注 0票数 0

我在我的一个ASP.NET MVC应用程序中有一个工作日历视图，我将我的数据通过控制器以json格式从我的数据库中导入到完整日历jquery中，用这个html和javascript代码创建日历。如何使用select #Term下拉列表创建过滤器？

@{
    ViewBag.Title = "Calendar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="heading" style="width: 100%; float: left; margin-bottom: 15px;">
    <h2 style="float: left">Calendar</h2>
    <select id="Term" style="float: right; margin-top: 20px;">
        <option value="all">All</option>
        <option value="2021-2022">2021-2022</option>
        <option value="2022-2023">2022-2023</option>
        <option value="2023-2024">2023-2024</option>
    </select>
 
</div>

<div id="calender"></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">&times;</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="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

    <script>
            $(document).ready(function () {
                var events = [];
                $.ajax({
                    type: "GET",
                    url: "/home/GetEvents", 
                    success: function (data) {
                        $.each(data, function (i, v) {
                            events.push({
                                title: v.EventType,
                                description: v.School,
                                start: moment(v.Date),
                                end: v.End != null ? moment(v.Date) : null,
                                color: v.Color,
                                year: v.TermYear,
                                school: v.School
                            });
                        })

                        GenerateCalender(events);

                    },

                    error: function (error) {
                        alert('failed');
                    }
                })


                function GenerateCalender(events) {
                    $('#calender').fullCalendar('render');
                    $('#calender').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>School:</b>' + calEvent.description));
                            $('#myModal #pDetails').empty().html($description);

                            $('#myModal').modal();
                        }
                    })



                }

            })
        </script>
    }

javascript

jquery

fullcalendar

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-21 10:54:11

根据您在评论中的请求，我将演示如何使用fullCalendar 5实现事件提要。

首先，下载事件并初始化日历没有多大意义。这会延迟日历的显示，也意味着fullCalendar无法在需要时请求新事件。您不应该简单地让服务器在开始时将所有可能的事件下载到它的数据库中--一旦您的日历存在了一段时间，并且您有了很多事件，它就可以减慢进程，获取许多可能永远不会被查看的历史事件。相反，您的服务器应该只提供fullCalendar当前显示的时间段内的事件。如果如我下面所示实现日历设置，fullCalendar可以向服务器提供这些日期供其使用。然后，如果用户更改视图以显示不同的时间段，则只有这样，日历才会向服务器发出另一个请求，以获取所需的事件。这通常更有效，因为只有在实际需要的情况下才会下载事件。

由于服务器似乎没有按照fullCalendar所需的格式提供JSON数据，所以需要使用文档中所示的事件作为一种功能方法，在文档中定义一个自定义回调，fullCalendar可以在需要获取事件时执行该回调。然后，该回调可以运行AJAX请求，从服务器获取事件并将它们传递回fullCalendar (通过提供的回调，如文档中的示例所示)。

像这样的东西应该对你有用：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    events: function(fetchInfo, successCallback, failureCallback) //function to run whenever the calendar needs events
    {
      $.ajax({
        type: "GET",
        url: "/home/GetEvents", 
        data: { start: fetchInfo.startStr, end: fetchInfo.endStr }, //pass the date range to the server, so it can return only what's needed, not the whole database
        success: function (data) {
          var events = [];
    
          $.each(data, function (i, v) {
            events.push({
              title: v.EventType,
              description: v.School,
              start: moment(v.Date).format("YYYY-MM-DD"),
              end: v.End != null ? moment(v.Date).format("YYYY-MM-DD") : null,
              color: v.Color,
              year: v.TermYear,
              school: v.School
            });
          });
    
          successCallback(events); //pass the events back to fullCalendar
        },
        error: function (error) {
          alert('fetching events failed');
          console.log(error);
          failureCallback(error);
        }
      });
    }
  });

  calendar.render();
});