Javafx Calendar example
I had a project idea of a Calendar that shows date and weather.After reading the DatePicker and DateCell classes documentation .Got an idea of building a custom DateCell ,however working with virtualized controls like ListView,TableView and DateCell ,you have to override the method updateItem, in order to customize the cells.It is highly recommended not to create new instances inside the updateItem.For example for my ListView i had to extend the ListCell and instantiate everything in the class constructor.
I this example am going to show some use of the new Date and Time api in java 8.
public class CalendarFx extends Application {
ObservableList<String> images=FXCollections.observableArrayList("sunny.png","kweather.png","cloud.png","sun_rain.png","showers.png");
@Override
public void start(Stage primaryStage) {
DatePicker date_picker=new DatePicker();
date_picker.setShowWeekNumbers(false);
date_picker.setDayCellFactory(new Callback<DatePicker,DateCell>(){
@Override
public DateCell call(DatePicker param) {
return new DateCell(){
@Override
public void updateItem(LocalDate item, boolean empty){
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
StackPane cell_pane = new StackPane();
Random r=new Random();
ImageView image_view=new ImageView("file:"+images.get(r.nextInt(images.size())));
Circle circle=new Circle(20);
Label label=new Label();
label.setText(getText());
label.setFont(Fonts.bebasNeue(17));//Enzo library font
label.setTextFill(Color.AQUA);
label.setLabelFor(circle);
StackPane.setAlignment(image_view, Pos.CENTER_RIGHT);
StackPane.setMargin(image_view,new Insets(0,20,55,45));
cell_pane.getChildren().addAll(circle,label,image_view);
//item.get(ChronoField.DAY_OF_WEEK) returns an int from 1 to 7(Monday-Sunday)
//DayOfWeek.of(int) return the name of the day of week. type ENUM.
DayOfWeek day=DayOfWeek.of(item.get(ChronoField.DAY_OF_WEEK));
if(day.equals(DayOfWeek.SATURDAY)){
setStyle("-fx-background-color:blue;");//saturday cells blue background
}else if(day.equals(DayOfWeek.SUNDAY)){
setStyle("-fx-background-color:green;");//sunday cells green background
}else{
setStyle("-fx-background-color:grey;"); //weekdays grey
}
setGraphic(cell_pane);
setText("");//dont show any text in the cells
}
}
};
};
});
StackPane root = new StackPane();
root.getChildren().addAll(date_picker);
Scene scene = new Scene(root);
scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
primaryStage.setTitle("Calendar/Weather");
primaryStage.setScene(scene);
primaryStage.show();
}
The css
style.css
.date-picker .month-year-pane{
-fx-background-color: aqua;
-fx-padding: 5 5 5 5;
}
.date-picker .day-name-cell{
-fx-background-color: black;
-fx-text-fill:aqua;
}
I this example am going to show some use of the new Date and Time api in java 8.
public class CalendarFx extends Application {
ObservableList<String> images=FXCollections.observableArrayList("sunny.png","kweather.png","cloud.png","sun_rain.png","showers.png");
@Override
public void start(Stage primaryStage) {
DatePicker date_picker=new DatePicker();
date_picker.setShowWeekNumbers(false);
date_picker.setDayCellFactory(new Callback<DatePicker,DateCell>(){
@Override
public DateCell call(DatePicker param) {
return new DateCell(){
@Override
public void updateItem(LocalDate item, boolean empty){
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
StackPane cell_pane = new StackPane();
Random r=new Random();
ImageView image_view=new ImageView("file:"+images.get(r.nextInt(images.size())));
Circle circle=new Circle(20);
Label label=new Label();
label.setText(getText());
label.setFont(Fonts.bebasNeue(17));//Enzo library font
label.setTextFill(Color.AQUA);
label.setLabelFor(circle);
StackPane.setAlignment(image_view, Pos.CENTER_RIGHT);
StackPane.setMargin(image_view,new Insets(0,20,55,45));
cell_pane.getChildren().addAll(circle,label,image_view);
//item.get(ChronoField.DAY_OF_WEEK) returns an int from 1 to 7(Monday-Sunday)
//DayOfWeek.of(int) return the name of the day of week. type ENUM.
DayOfWeek day=DayOfWeek.of(item.get(ChronoField.DAY_OF_WEEK));
if(day.equals(DayOfWeek.SATURDAY)){
setStyle("-fx-background-color:blue;");//saturday cells blue background
}else if(day.equals(DayOfWeek.SUNDAY)){
setStyle("-fx-background-color:green;");//sunday cells green background
}else{
setStyle("-fx-background-color:grey;"); //weekdays grey
}
setGraphic(cell_pane);
setText("");//dont show any text in the cells
}
}
};
};
});
StackPane root = new StackPane();
root.getChildren().addAll(date_picker);
Scene scene = new Scene(root);
scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
primaryStage.setTitle("Calendar/Weather");
primaryStage.setScene(scene);
primaryStage.show();
}
The css
style.css
.date-picker .month-year-pane{
-fx-background-color: aqua;
-fx-padding: 5 5 5 5;
}
.date-picker .day-name-cell{
-fx-background-color: black;
-fx-text-fill:aqua;
}
The Results
good ideas here for my TA project.
ReplyDeleteGood idea and that's what i was looking for. But my question is will it(Calendar) be open on form-load or its only open when clicked
ReplyDelete