首先，使用 Java Swing 来实现 GUI 界面。对于场地表格，使用 JTable 组件来实现，该组件可以展示二维表格数据。将场地设置为表格的行，时间设置为表格的列，然后在表格中显示预约情况。对于室内室外选择按钮，使用 JRadioButton 组件来实现，根据用户的选择来过滤场地表格的数据。对于日期代码，使用 JCalendar 组件来实现，该组件可以让用户选择日期。 预约按钮和取消预约按钮可以使用 JButton 组件来实现，当用户点击预约按钮时，需要检查当前选择的场地和时间是否已经被预约，如果没有被预约，则将预约信息添加到场地表格中。当用户点击取消预约按钮时，检查当前选择的场地和时间是否已经被预约，如果已经被预约，则将预约信息从场地表格中删除的代码

也可以使用 JavaFX 来实现 GUI 界面，使用 TableView 组件来展示场地表格，使用 DatePicker 组件来实现日期选择，使用 ToggleButton 组件来实现室内室外选择，使用 Button 组件来实现预约和取消预约功能。对于预约和取消预约功能，可以使用模态对话框来提示用户操作结果。代码实现可以参考以下示例：

public class ReservationSystem extends Application {
    private TableView<Reservation> tableView;
    private DatePicker datePicker;
    private ToggleButton indoorButton;
    private ToggleButton outdoorButton;

    @Override
    public void start(Stage primaryStage) {
        // 初始化 GUI 组件
        tableView = new TableView<>();
        datePicker = new DatePicker();
        indoorButton = new ToggleButton("室内");
        outdoorButton = new ToggleButton("室外");
        Button reserveButton = new Button("预约");
        Button cancelButton = new Button("取消预约");

        // 初始化表格列
        TableColumn<Reservation, String> venueColumn = new TableColumn<>("场地");
        venueColumn.setCellValueFactory(new PropertyValueFactory<>("venue"));
        TableColumn<Reservation, String> timeColumn = new TableColumn<>("时间");
        timeColumn.setCellValueFactory(new PropertyValueFactory<>("time"));
        tableView.getColumns().addAll(venueColumn, timeColumn);

        // 初始化场地数据
        ObservableList<Reservation> data = FXCollections.observableArrayList(
                new Reservation("室内1", "2022-01-01 09:00"),
                new Reservation("室内1", "2022-01-01 10:00"),
                new Reservation("室外1", "2022-01-01 09:00"),
                new Reservation("室外1", "2022-01-01 10:00")
        );
        tableView.setItems(data);

        // 设置选择日期的监听器
        datePicker.setOnAction(event -> {
            LocalDate date = datePicker.getValue();
            // 根据选择的日期过滤表格数据
            tableView.setItems(filterDataByDate(data, date));
        });

        // 设置选择室内室外的监听器
        ToggleGroup toggleGroup = new ToggleGroup();
        indoorButton.setToggleGroup(toggleGroup);
        outdoorButton.setToggleGroup(toggleGroup);
        toggleGroup.selectedToggleProperty().addListener((observable, oldValue, newValue) -> {
            // 根据选择的室内室外过滤表格数据
            tableView.setItems(filterDataByVenue(data, newValue == indoorButton ? "室内" : "室外"));
        });

        // 设置预约按钮的监听器
        reserveButton.setOnAction(event -> {
            // 获取当前选择的场地和时间
            String venue = tableView.getSelectionModel().getSelectedItem().getVenue();
            String time = tableView.getSelectionModel().getSelectedItem().getTime();
            // 检查是否已经被预约
            if (!isReserved(data, venue, time)) {
                // 添加预约信息到表格中
                data.add(new Reservation(venue, time));
                // 更新表格视图
                tableView.setItems(data);
                // 提示预约成功
                Alert alert = new Alert(Alert.AlertType.INFORMATION, "预约成功！");
                alert.showAndWait();
            } else {
                // 提示已经被预约
                Alert alert = new Alert(Alert.AlertType.WARNING, "该场地和时间已经被预约！");
                alert.showAndWait();
            }
        });

        // 设置取消预约按钮的监听器
        cancelButton.setOnAction(event -> {
            // 获取当前选择的场地和时间
            String venue = tableView.getSelectionModel().getSelectedItem().getVenue();
            String time = tableView.getSelectionModel().getSelectedItem().getTime();
            // 检查是否已经被预约
            if (isReserved(data, venue, time)) {
                // 删除预约信息从表格中
                data.removeIf(reservation -> reservation.getVenue().equals(venue) && reservation.getTime().equals(time));
                // 更新表格视图
                tableView.setItems(data);
                // 提示取消预约成功
                Alert alert = new Alert(Alert.AlertType.INFORMATION, "取消预约成功！");
                alert.showAndWait();
            } else {
                // 提示该场地和时间没有预约
                Alert alert = new Alert(Alert.AlertType.WARNING, "该场地和时间没有预约！");
                alert.showAndWait();
            }
        });

        // 初始化布局
        VBox vbox = new VBox();
        vbox.getChildren().addAll(datePicker, indoorButton, outdoorButton, tableView, reserveButton, cancelButton);
        Scene scene = new Scene(vbox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // 过滤表格数据，只显示选择日期的预约情况
    private ObservableList<Reservation> filterDataByDate(ObservableList<Reservation> data, LocalDate date) {
        return data.filtered(reservation -> reservation.getTime().startsWith(date.toString()));
    }

    // 过滤表格数据，只显示选择室内室外的预约情况
    private ObservableList<Reservation> filterDataByVenue(ObservableList<Reservation> data, String venue) {
        return data.filtered(reservation -> reservation.getVenue().equals(venue));
    }

    // 检查场地和时间是否已经被预约
    private boolean isReserved(ObservableList<Reservation> data, String venue, String time) {
        return data.stream().anyMatch(reservation -> reservation.getVenue().equals(venue) && reservation.getTime().equals(time));
    }

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

// 预约信息类
class Reservation {
    private String venue;
    private String time;

    public Reservation(String venue, String time) {
        this.venue = venue;
        this.time = time;
    }

    public String getVenue() {
        return venue;
    }

    public void setVenue(String venue) {
        this.venue = venue;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}