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;

}
The Results



Comments

  1. good ideas here for my TA project.

    ReplyDelete
  2. Good 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

Post a Comment

Popular Posts