0

I would like to populate my FullCalendar, which I have drawn on a webview, with data/ event dates stored in a database.

I know that I'll have to do this via JSON. The problem is that practically all documentation I've come accross online only stop at "How To Convert JSON to Java object", and vise-versa. How about making the converted JSON/ Java object visible in the HTML/ Java class?

For example, say I have a List of event/ appointment objects retrieved from a database.

List<FullCalendarData> events = new ArrayList();

The FullCalendarData POJO class:

@Component
@Entity
@Table(name = "ENTITY_OBJECT")
@Scope(proxyMode = ScopedProxyMode.TARGET_CLASS, value = "prototype")

@Inheritance(strategy = InheritanceType.JOINED)
public class FullCalendarData {

    private String eventName;
    private String startTime;
    private String endTime;

    public String getEventName() {
        return eventName;
    }

    public void setEventName(String eventName) {
        this.eventName = eventName;
    }

    public String getStartTime() {
        return startTime;
    }

    public void setStartTime(String startTime) {
        this.startTime = startTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }

}

Convert List<FullCalendarData> events from Java to JSON:

Gson gson = new Gson();
String jsonAppointment = gson.toJson(events);

Now the problem is, how do I make jsonAppointment visible in a the FullCalendar in the HTML\ webview below, or in other words, how do I access and iterate over jsonAppointment and use it (jsonAppointment) instead of the events array below?

<!DOCTYPE html>
<html>
    <head>
        <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
        <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='../lib/jquery.min.js'></script>
        <script src='../lib/jquery-ui.custom.min.js'></script>
        <script src='../fullcalendar/fullcalendar.min.js'></script>
        <script>

            $(document).ready(function() {

                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#calendar').fullCalendar({
                    editable: true,
                    events: [
                        {
                            title: 'All Day Event',
                            start: new Date(y, m, 1)
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: new Date(y, m, d + 4, 16, 0),
                            allDay: false
                        }
                    ]
                });

            });

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

Call our webview:

public class FullCalendarWebView {

    public VBox calendar() {
        final WebView webView = new WebView();
        final WebEngine engine = webView.getEngine();
        engine.load("file:D:/standAloneDev//src/fc/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

        JSObject script = (JSObject) engine.executeScript("window");
        script.setMember("eventClick", new JavaApp().javaApp());

        VBox vb = new VBox();
        vb.getChildren().add(webView);

        return vb;
    }

}
Program-Me-Rev
  • 6,184
  • 18
  • 58
  • 142
  • http://stackoverflow.com/questions/1395551/convert-a-json-string-to-object-in-java – Vahid Jan 11 '15 at 08:14
  • @Vahid ...the problem is, how do I make jsonAppointment visible in a the FullCalendar in the HTML\ webview..... is what I asked above – Program-Me-Rev Jan 11 '15 at 08:20

1 Answers1

1

Sending a single event to the calendar

In order to send some events to the calendar from JavaFX, first of all you should create a JavaScript function that generates one single event on the calendar:

private WebView webView;
private WebEngine engine;

private void createCalendar() {
    webView = new WebView();
    engine = webView.getEngine();
    engine.load("file:D:/standAloneDev//src/fc/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

    engine.getLoadWorker().stateProperty().addListener((ov,oldState, newState)->{
        if(newState==State.SUCCEEDED){

            // JS to Java
            JSObject script = (JSObject) engine.executeScript("window");
            script.setMember("myClick", new JavaApp());

            // Java to JS, function to create single event
            engine.executeScript("function addEvent(title, start, end) {\n" +
                            "var eventData = {\n" +
                            "   title: title,\n" +
                            "   start: start,\n" +
                            "   end: end\n" +
                            "};\n" +
                            "$('#calendar').fullCalendar('renderEvent', eventData, true);\n" +
                         "}");
        }
    });
}

Now we can test this function on the JavaFX application, calling the script with some data:

@Override
public void start(Stage primaryStage) {

    Button btn=new Button("Add Event");
    btn.setOnAction(e->{
        FullCalendarData data1=new FullCalendarData();
        data1.setEventName("Event 1");
        data1.setStartTime("2015-01-11T16:00:00");
        data1.setEndTime("2015-01-11T18:00:00");
        engine.executeScript("addEvent('"+data1.getEventName()+
                             "','"+data1.getStartTime()+
                             "','"+data1.getEndTime()+"');");

    });

    createCalendar();

    Scene scene = new Scene(new VBox(webView,btn), 600, 400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

Sending a list of events to the calendar

If you want to send a list of events using JSON format, you can create another function to process the list and call addEvent() on each element on the list:

engine.getLoadWorker().stateProperty().addListener((ov,oldState, newState)->{
        if(newState==State.SUCCEEDED){
            ...
            // Java to JS, send JSON list
            engine.executeScript("function addListEvents(result) {\n" +
                            "for(var i=0; i<result.data.length; i++){\n" +
                            "   addEvent(result.data[i].eventName, result.data[i].startTime, result.data[i].endTime);\n" +
                            "};\n" +
                         "}");
        }
    });

Using a wrapper for the list of events:

class CalendarEvents{
    final List<FullCalendarData> data=new ArrayList<>();

    public List<FullCalendarData> getData() {
        return data;
    }

    public void addEvent(FullCalendarData event) {
        this.data.add(event);
    }

}

we can retrieve a list of events, convert it to JSON format and call this script:

@Override
public void start(Stage primaryStage) {
    Button btn=new Button("Add Events");
    btn.setOnAction(e->{

        // list of random events
        FullCalendarData data1=new FullCalendarData();
        data1.setEventName("Event 1");
        data1.setStartTime("2015-01-11T16:00:00");
        data1.setEndTime("2015-01-11T18:00:00");

        FullCalendarData data2=new FullCalendarData();
        data2.setEventName("Event 2");
        data2.setStartTime("2015-01-12T15:00:00");
        data2.setEndTime("2015-01-12T18:00:00");

        FullCalendarData data3=new FullCalendarData();
        data3.setEventName("Event 3");
        data3.setStartTime("2015-01-13T15:00:00");
        data3.setEndTime("2015-01-1316:00:00");

        CalendarEvents cal = new CalendarEvents();
        cal.addEvent(data1);
        cal.addEvent(data2);
        cal.addEvent(data3);

        Gson gson=new Gson();
        String json=gson.toJson(cal,CalendarEvents.class);

        engine.executeScript("addListEvents("+json+");");
    });

    createCalendar();

    Scene scene = new Scene(new VBox(webView,btn), 600, 400);

    primaryStage.setScene(scene);
    primaryStage.show();
}

You will have your events on the calendar:

Calendar

José Pereda
  • 44,311
  • 7
  • 104
  • 132
  • Hi @José Pereda. Thanks for the great enlightenning answer. I tried it out and it works amazingly. Thank you. – Program-Me-Rev Jan 12 '15 at 19:48
  • Hi @José Pereda. I have one small problem. All events I have in the database show as whole day events. For example, I can't get an event with the startTime: 2015-01-12 23:00:11 endTime: 2015-01-12 23:30:11 to show as a half hour event. Could you please help on this last bit? Thanks again. – Program-Me-Rev Jan 12 '15 at 20:41
  • 1
    That works for me (on week view). I'm using version 2.2.3 of FullCalendar, maybe that helps. – José Pereda Jan 12 '15 at 20:48
  • Thnks @José Pereda. You were right. 2.2.6 works right – Program-Me-Rev Jan 12 '15 at 23:22