Calendar

Flow
1

Hi all.

Im new in Vaadin.

I got one problem right now.

How to add images to BasicEvents in Caledar?

Could you show me example?

Regards
DG

2

I don’t think there is an API call to do it. If you are referring to the Dashboard demo showing an image in the CalendarEvent, that’s achieved by hacking the CSS of each event. Something like

String style = ".v-calendar-event-" + calendarEventId + " .v-calendar-event-content { background-image:" + imageURL + ";}";
Page.getCurrent().getStyles().add(styles);
3

Thank you for reply. And i will try you way.

What i did already?

I created style with same name for normal event and allday event:

.v-calendar .v-calendar-event-testcolor {
background-color: #FFCC66;
background-image: url(“file://C:/_projects_docs/
screen/icons_work/mscMini.png”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

.v-calendar .v-calendar-event-testcolor-all-day {
background-color: #D666FF;
background-image: url(“file://C:/_projects_docs/screen/icons_work/sgwMini.png”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

Only different image and color, but both with name “testcolor”.

I add styleName in this way:

event.setStyleName(“testcolor”
);

No matter if it is all day event or normal event.

Result i get: see attachment

And i didnt get images. Why? wrong URL? I use chrome web browser.

29533.png

4

Well the problem is in your background-image url. The file:// doesn’t work there. If you check from browser how the image url is translated it’s not what you expect. You need to have that png file in your theme folder VAADIN/themes/mytheme

E.g.

background-image: url(icons_work/mscMini.png);

EDIT: fixed the url

5

And background-attachment: fixed doesn’t do probably what you expect. Removing that helps.

6

Thx for next advices.

I put icons to icons/ran/*.png → look icons_place.png attachment.

then i change scss files to:

.v-calendar .v-calendar-event-testcolor {
background-color: #FFCC66;
background-image: url(…/VAADIN/themes/mytheme/icons/ran/mscMini.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}
.v-calendar .v-calendar-event-testcolor-all-day {
background-color: #D666FF;
background-image: url(…/VAADIN/themes/mytheme/icons/ran/sgsnMini.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

after building i get style.css file with:

.mytheme .v-calendar .v-calendar-event-testcolor {
background-color: #FFCC66;
background-image: url(…/VAADIN/themes/mytheme/icons/ran/mscMini.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

.mytheme .v-calendar .v-calendar-event-testcolor-all-day {
background-color: #D666FF;
background-image: url(…/VAADIN/themes/mytheme/icons/ran/sgsnMini.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

the result is without icons still… sorry didnt try you method yet.

but i have another wuestion. In month view Event is all purple or orange depends on it is All Day Event or normal event.(2_month_view.png attachment)

But in week view colored is only border from right side of event look attachment 3_wee_view.png

Still dont have icons.
29535.png
29535.png
29537.png

7

I removed background-attachment: fixed;
still no change.

Now i see that i could put wrong patches. I will test just like this:

.mytheme .v-calendar .v-calendar-event-testcolor {
background-color: #FFCC66;
background-image: url(icons/ran/mscMini.png);
background-repeat: no-repeat;
background-position: top right;
}
.mytheme .v-calendar .v-calendar-event-testcolor-all-day {
background-color: #D666FF;
background-image: url(icons/ran/sgsnMini.png);
background-repeat: no-repeat;
background-position: top right;
}

Regards

8

Still nothing change;/

Left me your way to put there icons

String style = “.v-calendar-event-” + calendarEventId + " .v-calendar-event-content { background-image:" + imageURL + “;}”;
Page.getCurrent().getStyles().add(styles);

Do you have any ideas why colors in week view are only on right border of event?

9

Yes finaly i add icons.

.mytheme .v-calendar .v-calendar-event-testcolor {
background-color: #FFCC66;
background-image: url(http://lansa.robinsonmfg.com/LANSAIMG/libs_tmp/jqmobile/1.4.5/themes/default/images/icons-png/carat-l-black.png);
background-repeat: no-repeat;
background-position: top right;
}

.mytheme .v-calendar .v-calendar-event-testcolor-all-day {
background-color: #D666FF;
background-image: url(http://lansa.robinsonmfg.com/LANSAIMG/libs_tmp/jqmobile/1.4.5/themes/default/images/icons-png/carat-l-black.png);
background-repeat: no-repeat;
background-position: top right;
}

But there is another problem.

no-repeat not working!

Any advices?

Regards
DG

10

And still i dont know why i day and week view colored are only right border of event.