How to add JQuery onto JavaFx WebView

Question

I've been trying to make the following work but I've been unsuccessful at integrating other similar solutions online onto my problem.

The HTML file I'd like to add onto a webview is as follows:

<!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)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });

    });

</script>
<style>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 900px;
        margin: 0 auto;
        }

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

This is what I've been trying to do so far:

public class WebViewSample extends Application {

    private Scene scene;

    @Override
    public void start(Stage stage) {
        // create the scene
        stage.setTitle("Web View");
        scene = new Scene(new Browser(), 750, 500, Color.web("#666970"));
        stage.setScene(scene);
        scene.getStylesheets().add("WebViewSample/fullcalendar-1.6.4/fullcalendar/fullcalendar.css");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

    class Browser extends Region {

        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();

        public Browser() {
            //apply the styles
            getStyleClass().add("browser");
            // load the web page
            webEngine.load("WebViewSample/fullcalendar-1.6.4/demos/default.html");
            //add the web view to the scene
            getChildren().add(browser);

        }

        private Node createSpacer() {
            Region spacer = new Region();
            HBox.setHgrow(spacer, Priority.ALWAYS);
            return spacer;
        }

        @Override
        protected void layoutChildren() {
            double w = getWidth();
            double h = getHeight();
            layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
        }

        @Override
        protected double computePrefWidth(double height) {
            return 750;
        }

        @Override
        protected double computePrefHeight(double width) {
            return 500;
        }
    }

All I get from this is a blank white window, instead of something like the JQuery calendar plugin FullCalender being drawn on the window.

My main goal is to add a functioning FullCalender onto a JavaFx program via the JavaFx webview.

Thank you in advance.

[Here is a jQuery date picker embedded in a WebView](https://gist.github.com/jewelsea/1422815). It is not the same as the FullCalendar control, but perhaps the concept is similar enough that it will help you find a solution on your own. — jewelsea, May 01 '14 at 08:25
Thanks for taking the time to respond, [jewelsea](http://stackoverflow.com/users/1155209/jewelsea). I've been looking at it for some time now but I can't make out a way to implement a solution from it. I've also been looking at [this **'How do I include jquery in javafx webview?'**](http://stackoverflow.com/questions/19446510/how-do-i-include-jquery-in-javafx-webview) too but to no much success. — ILikeProgramming, May 01 '14 at 09:08

score 0 · Answer 1 · answered Nov 26 '14 at 21:44

This is what worked:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class FullCalendarWebView extends Application {

    @Override
    public void start(Stage primaryStage) {
        final WebView webView = new WebView();
        final WebEngine engine = webView.getEngine();
        engine.load("file:D:/standAloneDev/java/workingDir/Jive/FullCalendarWebView/src/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

        Scene scene = new Scene(webView, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

How to add JQuery onto JavaFx WebView

1 Answers1

Linked