Calendar Component for Vaadin 8

[Lutz1 (Lutz Guettler)]

@Jim Saringer

Appreciate your work on that calendar component, thank you.

I have a question regarding the styling of events. I’m only interested in the monthly view of the calendar and would like an event to fill out the entire day with a particular background-color. Can this be achieved by adding a scss style to one of the items added to the eventprovider? I’ve tried but with no success so far, what selectors do I have to override at this point?

Hi,
currently it’s not possible to do that. I have updated the highlights on the addon page to show a solution for viewing complete item captions in monthly view. This can be adapted to a custom style of events. In the example i use :hover as trigger. This can be done by click and set a custom style.

[Jim46 (Jim Saringer)]

Hey,
when using the calendar in the monthly view the days are shown in full text (Monday, Tuesday etc.). This is an issue when the calendar component only has limited space available. How can I use short cuts (Mon, Tue. …) like in the demo version of the vaadin calendar
https://demo.vaadin.com/calendar?

[Lutz1 (Lutz Guettler)]

you can set the

@Jim Saringer

Hey,
when using the calendar in the monthly view the days are shown in full text (Monday, Tuesday etc.). This is an issue when the calendar component only has limited space available. How can I use short cuts (Mon, Tue. …) like in the demo version of the vaadin calendar
https://demo.vaadin.com/calendar?

Set it by override of String getDayNamesShort(). Same for month String
getMonthNamesShort().

[Syahirul (Syahirul Muhammad)]

hello…

I’m new to vaadin, and i’m using eclipse to work with vaadin…

I want to know, how to use this add-on in my project? I already follow the insruction to add some line in my pom.xml file on my project. after that what should I do?

thank you for your help

[Claus-Peter1 (Claus-Peter Klas)]

Hi,
I would like to add a background picture to an event, like it is done in the Dashboard Demo.
Is this already possible with the calendar addon?

regards,
Peter

[Mihaly9 (Mihály Balogh)]

Hi,

i would like to know how can i color the individual cells in the calendar? I want a shared calendar where every user has his own color and every item is visible with the color of the corresponding user. I have tried to use the setStyleName on my “BasicItem” but it did nothing. It has still the same style name “state-planned”. I made my calendar like it is shown in the github demo but im kind of stuck here. Please help!

Regards
Mike

[Lutz1 (Lutz Guettler)]

Mihály Balogh:

I have tried to use the setStyleName on my “BasicItem” but it did nothing. It has still the same style name “state-planned”.

The style “state-planned” from demo is a custom style from _custom_calendar.scss. Look here https://github.com/blackbluegl/calendar-component/blob/master/calendar-component-demo/src/main/webapp/VAADIN/themes/demo/_custom_calendar.scss in line 90.

[Lutz1 (Lutz Guettler)]

Claus-Peter Klas:

Is this already possible with the calendar addon?

Yes…

[Nedzad1 (Nedzad Paradzik)]

Hi Lutz,

Thank you for addon. I have question regarding view mode: Is it possible to represent yearly view, to display only month names ? From the documentation and looking into the code currently it is not possible. Are there any plans for the future ?
In out application we have events lasting couple of years and we want to display it in short yearly view.

Thanks in advance,
Kind regards,
Ned

[Lutz1 (Lutz Guettler)]

It’s not planned atm. We show this kind of data in a tree grid with custom styles and more special functionality in the detail.

[Giovanni (Giovanni Adobati)]

Hi,

very nice component!!

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

Thanks.

[Kelvin16 (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

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

Thanks,

[kushal1 (kushal baldev)]

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?

[Lutz1 (Lutz Guettler)]

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.

[Lutz1 (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

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

[Kelvin16 (Kelvin Dervishllari)]

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

2. 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 ;
}

[Giovanni (Giovanni Adobati)]

Giovanni Adobati:
Hi,

very nice component!!

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

Thanks.

Any help ?

[Patrick268 (Patrick Engels)]

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.

[Melvin11 (Melvin Mah)]

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.

[Lutz1 (Lutz Guettler)]

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.