Struts2 JSON FullCalendar Integration

Question

Struts2 JSON FullCalendar Integration

Having trouble fetching data from JSON for my Fullcalendar Jquery function. I've gone through the documentation but the example provided isn't clear to me.

Here is a snippet of my code:

<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek'
        },
        editable: true,
        events: 'jsone.action'

    });

});

In my action, I'm currently returning only 3 test values:

@ParentPackage("json-default")
@Action(value = "jsone", results = {
@Result(type = "json", name = "success"),})
 public String title;
public String start;
public String end;

public String execute() {
    title="Event";
    start="2014-01-12T10:30:00-05:00";
    end="2014-01-12T12:30:00-05:00";
    System.out.println("execute");
    return SUCCESS;
}
//setters getters

When I call the "jsone" action, I receive this response, which seems to be in the correct format. Even when loading the calendar, there are no error messages and the jsone action executes correctly:

{"end":"2014-01-12T12:30:00-05:00","start":"2014-01-12T10:30:00-05:00","title":"event"}

I have also referenced a post on Stack Overflow by someone facing a similar problem:

jquery json struts2 fullcalendar

Answer 1

Answer №1

After mastering the correct way to fetch data, I am eager to share the solution. Let's start with a simple example using just one event.

First, in the action (using annotations)

@ParentPackage("json-default")
@Action(value = "jsone", results = {
@Result(type = "json", name = "success"),})

Next, inside the action (Java class)

public String title;
public String start;
public String end;

public String execute() {
    title="Event";
    start="2014-06-12T10:30:00-05:00";
    end="2014-06-12T12:30:00-05:00";
    return SUCCESS;
}
//GETTERS SETTERS

This is how your events should be displayed in your JSP

events: function(start, end, timezone, callback) {
            $.ajax({
                url: 'jsone.action',
                dataType: 'json',
                data: {
                    start: start.unix(),
                    end: end.unix()
                },
                success: function(doc) {
                    var events = [];
                    events.push({
                        title: doc.title,
                        start: doc.start,
                        end: doc.end
                    });
                    callback(events);
                }
            });
        }

Using the START and END parameters allows you to retrieve a specific number of events rather than the entire list. The CALLBACK parameter returns an array of events, and in the success function(doc), the doc parameter represents the event fetched from the Action, giving you easy access to your action attributes ('title', 'start', 'end' in this example). Make sure to note which version of fullcalendar you are using, as the new BETA version (2.x) utilizes moment instead of the traditional Date format used in version 1.x. Ensure your date format matches this style:

start="2014-06-12T10:30:00-05:00";
    end="2014-06-12T12:30:00-05:00";

IMPORTANT: This example relies on "Struts2 JSON-Plugin," so @ParentPackage("json-default") is necessary to use it. You can integrate it using Maven with the following dependency:

<dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-json-plugin</artifactId>
    <version>2.3.16.3</version>
</dependency>

Answer 2

After mastering the correct way to fetch data, I am eager to share the solution. Let's start with a simple example using just one event.

First, in the action (using annotations)

@ParentPackage("json-default")
@Action(value = "jsone", results = {
@Result(type = "json", name = "success"),})

Next, inside the action (Java class)

public String title;
public String start;
public String end;

public String execute() {
    title="Event";
    start="2014-06-12T10:30:00-05:00";
    end="2014-06-12T12:30:00-05:00";
    return SUCCESS;
}
//GETTERS SETTERS

This is how your events should be displayed in your JSP

events: function(start, end, timezone, callback) {
            $.ajax({
                url: 'jsone.action',
                dataType: 'json',
                data: {
                    start: start.unix(),
                    end: end.unix()
                },
                success: function(doc) {
                    var events = [];
                    events.push({
                        title: doc.title,
                        start: doc.start,
                        end: doc.end
                    });
                    callback(events);
                }
            });
        }

Using the START and END parameters allows you to retrieve a specific number of events rather than the entire list. The CALLBACK parameter returns an array of events, and in the success function(doc), the doc parameter represents the event fetched from the Action, giving you easy access to your action attributes ('title', 'start', 'end' in this example). Make sure to note which version of fullcalendar you are using, as the new BETA version (2.x) utilizes moment instead of the traditional Date format used in version 1.x. Ensure your date format matches this style:

start="2014-06-12T10:30:00-05:00";
    end="2014-06-12T12:30:00-05:00";

IMPORTANT: This example relies on "Struts2 JSON-Plugin," so @ParentPackage("json-default") is necessary to use it. You can integrate it using Maven with the following dependency:

<dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-json-plugin</artifactId>
    <version>2.3.16.3</version>
</dependency>

Struts2 JSON FullCalendar Integration

Answer №1

Similar questions

How can JavaScript/jQuery be used to update LocalStorage Objects when editing a form?

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

Retrieve information from an HTML webpage using Node.js

use jquery to dynamically switch CSS class on navigation with animated arrows

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I'm having trouble getting my jsonp to function properly. Can anyone help me troubleshoot?

What is the process for encrypting and decrypting image files over the internet?

The GAS web application is experiencing issues with sorting dates correctly on the Javascript table

The hyperlink tag within the overlay div is unresponsive

Comparing two JSON arrays with missing keys

What are the steps to integrate dynamic data into chartjs?

The functionality of a jQuery click event may cease to work once a loader has been incorporated into a

AJAX request: No values are being returned by $_GET

Struggling with Implementing jQuery for Triggering Multiple Functions on a Single Change Event?

Exploring the magic of Hover effects using CSS and JQuery

What is the best way in jQuery to show each element of an array one at a time with a space in an input field?

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

Updating a property value within a JSON object: Adjusting attributes in a JSON data format

What is the best way to generate a "JSON diff" that can be displayed in the JavaScript console?

The operation of 'val' is not supported by HTMLInputElement