Calendar Component for Vaadin 8

Vaadin 6 / 7 / 8
21

Hi,

very nice component!!

a question, is there a way to set the row heigth in day/week view ?

Thanks.

22

Appreciate your work on that calendar component.

  1. A question how can we make the monthly view our default and only view

and

  1. is it possible now to color the monthly date cell with different color ?

Thanks,

23

In my on going project I will be using this component but my requirements are,

1)calender must be filtered according to the user’s tasks
eg if the user has booked a task say A user than if I select A user than it must show only the task of A user.

Is it possible to write a custom event by which calender will be able to filter?

24

not directly on the component. You can switch events with a custom data provider. put the filter logic in the dataprovider and set it on the calendar component.

25

Kelvin Dervishllari:
Appreciate your work on that calendar component.

  1. A question how can we make the monthly view our default and only view

and

  1. is it possible now to color the monthly date cell with different color ?

Thanks,

  1. set a custom BasicDateClickHandler on the component to prevent cycle between day/week/month views.
    see: org.vaadin.addon.calendar.handler.BasicDateClickHandler#dateClick(CalendarComponentEvents.DateClickEvent event).
    Use Calendar#withMonth(.) or Calendar#withMonthInYear(.,.) to set the month.

  2. currently not. It’s planned, but no time to do this. :-/ you can make a ticket so far.

26

Lutz Guettler:

Kelvin Dervishllari:
Appreciate your work on that calendar component.

  1. A question how can we make the monthly view our default and only view

and

  1. is it possible now to color the monthly date cell with different color ?

Thanks,

  1. set a custom BasicDateClickHandler on the component to prevent cycle between day/week/month views.
    see: org.vaadin.addon.calendar.handler.BasicDateClickHandler#dateClick(CalendarComponentEvents.DateClickEvent event).
    Use Calendar#withMonth(.) or Calendar#withMonthInYear(.,.) to set the month.

  2. currently not. It’s planned, but no time to do this. :-/ you can make a ticket so far.

Thanks

I already did the first part of the question just the way you said it.

For second one :

Is it possible to change the color of the event item ?

and if it is how ?

My case is that i have three status values “Completet”, “Noncompleted” and “Non started” and i want to set the color based in the value of the status

As a provider i have a method called populateCalendar() showed below:

public void populateCalendar(List<LocalDate> realizationDates, String state){        
        
        CALRealization calRealization = new CALRealization(true/*!event.getStart().truncatedTo(DAYS).equals(event.getEnd().truncatedTo(DAYS))*/);
			
        for(LocalDate realizationDate : realizationDates){
        
            ZonedDateTime theDate = realizationDate.atStartOfDay(ZoneId.systemDefault());                
            
            calRealization.setStart(theDate);
            calRealization.setEnd(theDate);

            calRealization.setDetails(state);                
            
            CALRealizationItem item = new CALRealizationItem(calRealization);

// item.setStyleName(state);

            eventProvider.addItem(item);
            
        }
}

at my scss file i have this style that i use for the event

/* State is the general name, because each color style has its own name */

.state .v-calendar-event-all-day{
background: #ff0000 !Important ;
}

27

Giovanni Adobati:
Hi,

very nice component!!

a question, is there a way to set the row heigth in day/week view ?

Thanks.

Any help ?

28

Lutz,

First of all, thanks for this component, we are going to use it in our project.
But, we have a question.

Can we use the component on an iPad/iPhone? We see the component in the ipad, but we can not add a meeting.

Thanks in advance for your answer.

29

Lutz,

Is there a way for your addon to import those events from Google Calendar and populate into the addon?

It will be an additional bonus.

Thanks.

30

You must implement this by yourself. The component has no specific binding to any event provider like google. Implement a data provider catching the events from google do the trick.

31

Could you explain me how to install this addon?

I did a import to pom.xml and then pasted a folder to my project with three classes like Meeting.java, MeetingCalendar.java and MeetingItem.java.

But when I try to initialize Calendar like in Your demo:

// Initialize our new UI component

MeetingCalendar meetings = new MeetingCalendar(); meetings.setSizeFull();

I got error:

java.lang.NoSuchMethodError: 'com.vaadin.shared.Registration org.vaadin.addon.calendar.Calendar.addListener(java.lang.String, java.lang.Class, com.vaadin.event.SerializableEventListener, java.lang.reflect.Method)'
at org.vaadin.addon.calendar.Calendar.setHandler(Calendar.java:1361) ~[calendar-component-2.0.2.jar:2.0.2]

at org.vaadin.addon.calendar.Calendar.setHandler(Calendar.java:1377) ~[calendar-component-2.0.2.jar:2.0.2]

at org.vaadin.addon.calendar.Calendar.setDefaultHandlers(Calendar.java:360) ~[calendar-component-2.0.2.jar:2.0.2]

at org.vaadin.addon.calendar.Calendar.<init>(Calendar.java:307) ~[calendar-component-2.0.2.jar:2.0.2]

at org.vaadin.addon.calendar.Calendar.<init>(Calendar.java:281) ~[calendar-component-2.0.2.jar:2.0.2]

at com.example.zpo_projekt.addons.calendar.meetings.MeetingCalendar.initCalendar(MeetingCalendar.java:94) ~[classes/:na]

at com.example.zpo_projekt.addons.calendar.meetings.MeetingCalendar.<init>(MeetingCalendar.java:41) ~[classes/:na]

at com.example.zpo_projekt.ui.AdminLogged.lambda$init$69bf3e83$4(AdminLogged.java:66) ~[classes/:na]

I got same error when I try to just copy your DemoUI.java and paste to my project

Something is wrong in initCalendar() method with this line:

calendar = new Calendar<>(eventProvider);

I got same error when I try to just copy your DemoUI.java and paste to my project

Something is wrong in initCalendar() method with this line:

calendar = new Calendar<>(eventProvider);