【问题标题】:.net core Fullcalendar get data by giving month.net core Fullcalendar 通过给出月份获取数据
【发布时间】:2021-03-14 08:16:06
【问题描述】:

我们正在使用带有 .net core-ef 核心的 fullcalendar。我们通过将其传递给 fullcalendar 来获取所有事件数据。这意味着很多事件。然后它会在本月使用这些数据默认创建事件日历。我想要的是让它变得懒惰。获取数据时,它只会返回给出月份的事件。

在c#中

public JsonResult GetEvents(E_Model model){
     var list = _Service.GetEvents().ToList();
   }

在js ajax调用文件中

function GetEvents() {
  
        var events = [];
        $.ajax({
            type: "POST",
            url: "/calHome/GetEvents",
            data: { model: data },
            success: function (data) {
                calender.style.display = 'block';          
                $.each(data, function (i, v) {                       
                    events.push({
                        id: v.id,
                        title: v.name,
                        description: v.description,      
              //i got start and end moment
             start: moment(v.start),
                    end: v.end != null ? moment(v.end) : null,});
        })
        GenerateCalender(events);

}

生成日历

function GenerateCalender(events) {
    $('#calender').fullCalendar('destroy');
    $('#calender').fullCalendar({
        contentHeight: 800,
        firstDay: 1,
        defaultDate: new Date(),
        timeFormat: 'HH:mm',
 eventLimit: true,
        events: events,
}

ajax GetEvents 在控制器中调用 GetEvents 它返回 json 然后在 ajax 中调用 GetEvents 调用 genaretecalendar。在 aja 中调用 GetEvents 方法时。 我想在按下 prev 或 next 按钮时制作它,它将月份提供给控制器并按月获取数据。我试着听上一个事件像

$('.fc-prev-button').one('click',function (e) {
                console.log('prev, do something');
            });
       

 events: {
            type: "POST",
            url: "/home/GetEvents",
            data: function () { // a function that returns an object
                return {
                     
                };
            }

控制器

[HttpPost]
 public JsonResult GetEvents(FiltModel model)
                               //model includes string start, end

【问题讨论】:

  • 还有当点击上一个或下一个按钮时我如何收听
  • 你有什么建议吗@ADyson
  • 师父不要灰心,讽刺有时候不是坏事,我很高兴和你交谈,谢谢你的付出和努力。我会成功的
  • YEs 终于在您的帮助下成功了,非常感谢。祝主人愉快
  • 你能回答我吗?

标签: javascript c# asp.net-core fullcalendar fullcalendar-3


【解决方案1】:

实现这一点的最佳方法是使用 fullCalendar 文档中描述的events as JSON feed 模式。

基本上它的工作原理是这样的:如果你告诉 fullCalendar 你的控制器操作的 URL,它会在日历中的日期范围发生变化时自动向服务器发出新请求(并且它还没有下载该日期的事件范围)。它还会自动将“开始”和“结束”日期参数附加到请求中 - 因此您的服务器所要做的就是读取这些参数并在您的数据库查询中使用它们来过滤返回到日历的结果。您还可以选择将其他相关数据附加到请求中 - 例如您的其他过滤器选项。

所以在你的情况下,你最终会得到这样的代码:

JavaScript - fullCalendar 事件配置:

events: {
  type: "POST",
  url: "/home/GetEvents",
  data: function () { // a function that returns an object
  return {
    //your filter object goes here
  };
}

控制器:

[HttpPost]
public JsonResult GetEvents(FiltModel model) {
   //...where the FiltModel class includes start and end parameters - ideally these should be DateTime objects, not strings.

   //... then, query the database using the filter options in the model, and return JSON in the format required by fullCalendar
}

【讨论】:

    猜你喜欢
    • 2020-03-03
    • 1970-01-01
    • 2014-02-24
    • 1970-01-01
    • 2023-01-11
    • 1970-01-01
    • 1970-01-01
    • 2022-08-17
    • 2021-05-19
    相关资源
    最近更新 更多