java FullCalendar - 添加多个事件或添加事件源

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17162554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-11-01 01:11:03  来源:igfitidea点击:

FullCalendar - Adding Multiple Events or Add Event Source

javajqueryfullcalendar

提问by Melvin

I have looked through the post in stackoverflow to add events into FullCalendar, however I am really new and find it really difficult to understand without an example. In short, is anyone here able to dumb it down for me, in order to add an array of objects into the FullCalendar?

我已经浏览了 stackoverflow 中的帖子,将事件添加到 FullCalendar 中,但是我真的很新,发现没有示例就很难理解。简而言之,这里有没有人能够为我简化一下,以便将一组对象添加到 FullCalendar 中?

I would like to add appointments that I have created Appointment(Date date, String name, String phoneNo). So they are retrieved in list:

我想添加我创建的约会约会(日期日期,字符串名称,字符串电话号码)。所以它们在列表中检索:

 PersistenceManager pm = PMF.get().getPersistenceManager();
 String query = "select from " + Appointment.class.getName();  
 query += " where merchant == '" + session.getAttribute("merchant") + "'";
 List<Appointment> appointment = (List<Appointment>) pm.newQuery(query).execute();

How am I able to populate the FullCalendar plugin with the list I obtained? Thanks a lot!

如何使用我获得的列表填充 FullCalendar 插件?非常感谢!

回答by Melvin

if anyone encounters the same problem as I do - you have a list of java objects and want it to populate FullCalendar, here's the solution:

如果有人遇到和我一样的问题 - 您有一个 Java 对象列表并希望它填充 FullCalendar,这里是解决方案:

JSP Page

JSP页面

$(document).ready(function() {

            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                        },
                    selectable: true,
                    selectHelper: true,

                select: function(start, end, allDay) {
                        var title = prompt('Event Title:');
                        if (title) {
                            calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                            );
                            }
                            calendar.fullCalendar('unselect');
                        },
                                editable: true,

                                eventSources: [
                                    {
                                            url: '/calendarDetails',
                                            type: 'GET',
                                            data: {
                                                start: 'start',
                                                end: 'end',
                                                id: 'id',
                                                title: 'title',
                                                allDay: 'allDay'
                                            },
                                            error: function () {
                                                alert('there was an error while fetching events!');
                                            }
                                    }
                            ]         
                    });
            });

Please take not of the URL, it is the servlet URL

请不要取URL,它是servlet URL

Servlet

小服务程序

    public class CalendarServlet extends HttpServlet {
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
                throws IOException {

        String something = req.getSession().getAttribute("merchant").toString(); //get info from your page (e.g. name) to search in query for database

        //Get the entire list of appointments available for specific merchant from database

        //Convert appointment to FullCalendar (A class I created to facilitate the JSON)
        List<FullCalendar> fullCalendar = new ArrayList<FullCalendar>();
        for (Appointment a : appointment) {
            String startDate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(a.getDate());
            startDate = startDate.replace(" ", "T");

            //Calculate End Time
            Calendar c = Calendar.getInstance();
            c.setTime(a.getDate());
            c.add(Calendar.MINUTE, 60);
            String endDate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(c.getTime());
            endDate = endDate.replace(" ", "T");

            FullCalendar fc = new FullCalendar(startDate, endDate, a.getId(), a.getName() + " @ " + a.getPhone(), false);
            fullCalendar.add(fc);
        }

        //Convert FullCalendar from Java to JSON
        Gson gson = new Gson();
        String jsonAppointment = gson.toJson(fullCalendar);

        //Printout the JSON
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");
        try {
            resp.getWriter().write(jsonAppointment);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

if you need more info on JSON or GSON, check the comments above.

如果您需要有关 JSON 或 GS​​ON 的更多信息,请查看上面的评论。

回答by Henrique C.

Melvin you have tones of examples here in Stack, try searching for add event sources.

Melvin 你在 Stack 中有很多例子,尝试搜索添加事件源。

From my experience im fullcalendar, you can add events through JSON, well formed XML and array's and i think thats it. You can use ajax calls do retrieve does 3 types of formats.

根据我的全日历经验,您可以通过 JSON、格式良好的 XML 和数组添加事件,我认为就是这样。您可以使用 ajax 调用来检索 do 3 种格式。

In your server side you should create a method to return a String already with the XML/JSON/array built so you can pass to you ajax call.

在您的服务器端,您应该创建一个方法来返回一个已经构建了 XML/JSON/array 的字符串,以便您可以传递给您的 ajax 调用。

回答by MZaragoza

take a look at https://github.com/mzararagoza/rails-fullcalendar-icecubethis is done in rails but i think what you are looking for is

看看https://github.com/mzararagoza/rails-fullcalendar-icecube这是在 rails 中完成的,但我认为您正在寻找的是

dayClick: function(date, allDay, jsEvent, view) {
          document.location.href=new_event_link + "?start_date=" + date;
},

full jquery

完整的jQuery

$('#calendar').fullCalendar({
        dayClick: function(date, allDay, jsEvent, view) {
          document.location.href=new_event_link + "?start_date=" + date;
        },
          header: {
              left: 'prev,today,next',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          selectable: true,
          selectHelper: true,
          editable: false,
          ignoreTimezone: false,
          select: this.select,
          eventClick: this.eventClick,
          eventDrop: this.eventDropOrResize,
          eventSources: [
            {
                url: '/event_instances.json',
                data: {
                    custom_param1: 'something',
                    custom_param2: 'somethingelse'
                },
                error: function() {
                    alert('there was an error while fetching events!');
                }
            }
          ],

          eventResize: this.eventDropOrResize
      });