Color Picker with Calendar control

I’m trying to use the Vaadin Colour Picker with the Vaadin Calendar but I can’t quite see how to combine them.

It appears that the calendar control allows you to control an events colour by using setStyleName, however as I understand it this requires a custom css file which contains the set of defined colour style names.

Whilst the Colour picker returns a colour no. via getCSS.

I don’t understand how I can pass the color no. returned via getCSS to setStyleName.

Thanks in advance.
Brett

I’ve made some progress on this front and thought I would post what I’ve done as it may be useful.

Firstly I’ve created a ColorPickerField which can be used with a field group:

package au.com.vaadinutils.fields;

import com.vaadin.ui.ColorPicker;
import com.vaadin.ui.Component;
import com.vaadin.ui.CustomField;
import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
import com.vaadin.ui.components.colorpicker.ColorChangeListener;

public class ColorPickerField extends CustomField
{
private static final long serialVersionUID = -1573292123807845727L;

private ColorPicker colorPicker;

public ColorPickerField()
{
    this.colorPicker = new ColorPicker();
    this.colorPicker.addColorChangeListener(new ColorChangeListener()
    {
        private static final long serialVersionUID = 1L;

        @Override
        public void colorChanged(ColorChangeEvent event)
        {
            setValue(new Color(event.getColor()));
        }
    });

}

@Override
protected Component initContent()
{
    return this.colorPicker;
}

@Override
public Class<? extends Color> getType()
{
    return Color.class;
}


@Override
public Color getInternalValue()
{
    return new Color(this.colorPicker.getColor());
}

@Override
public void setInternalValue(Color newFieldValue)
{
    this.colorPicker.setColor(new com.vaadin.shared.ui.colorpicker.Color(newFieldValue.getRed(), newFieldValue.getGreen(),
            newFieldValue.getBlue(), newFieldValue.getAlpha()));
    super.setInternalValue(newFieldValue);
}

}

I’ve used my own Color class as I need to be able to persist the Color so:

package au.com.vaadinutils.fields;

import javax.persistence.Embeddable;

/**

  • A wrapper class for the color pickers Color class so we can embed a Color
  • in a JPA Entity.
  • @author bsutton

*/
@Embeddable
public class Color
{
private int red;
private int green;
private int blue;
private int alpha;

public Color()
{
    red = 255;
    green = 255;
    blue = 255;
    alpha = 255;
}
public Color(com.vaadin.shared.ui.colorpicker.Color color)
{
    setRed(color.getRed());
    setGreen(color.getGreen());
    setBlue(color.getBlue());
    setAlpha(color.getAlpha());
}

public String getCSS()
{
    return new com.vaadin.shared.ui.colorpicker.Color(getRed(), getGreen(), getBlue(), getAlpha()).getCSS();
}

public int getRed()
{
    return red;
}

public void setRed(int red)
{
    this.red = red;
}

public int getGreen()
{
    return green;
}

public void setGreen(int green)
{
    this.green = green;
}

public int getBlue()
{
    return blue;
}

public void setBlue(int blue)
{
    this.blue = blue;
}

public int getAlpha()
{
    return alpha;
}

public void setAlpha(int alpha)
{
    this.alpha = alpha;
}

}

Now if I can only work out how to set the color of a calendar dynamically.

Maybe
this
would help in your case. This way you can dynamically add styles to your css.

Marius,
thanks for the tip, and yes it works!

For the record.

package au.org.scoutmaster.views;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.apache.log4j.Logger;

import au.org.scoutmaster.dao.DaoFactory;
import au.org.scoutmaster.dao.EventDao;
import au.org.scoutmaster.domain.Event;
import au.org.scoutmaster.domain.Event_;
import au.org.scoutmaster.util.SMNotification;

import com.vaadin.addon.jpacontainer.JPAContainer;
import com.vaadin.server.Page;
import com.vaadin.server.Page.Styles;
import com.vaadin.ui.Notification.Type;
import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventResize;
import com.vaadin.ui.components.calendar.CalendarComponentEvents.MoveEvent;
import com.vaadin.ui.components.calendar.ContainerEventProvider;
import com.vaadin.ui.components.calendar.event.CalendarEvent;

final class ScoutsContainerEventProvider extends ContainerEventProvider
{
    private Logger logger = Logger.getLogger(ScoutsContainerEventProvider.class);

    private final JPAContainer<au.org.scoutmaster.domain.Event> container;
    private static final long serialVersionUID = 1L;

    @SuppressWarnings("unchecked")
    ScoutsContainerEventProvider()
    {
        super(new DaoFactory().getEventDao().createVaadinContainer());
        this.container = (JPAContainer<Event>) super.getContainerDataSource();

        this.setStartDateProperty(Event_.eventStartDateTime.getName());
        this.setEndDateProperty(Event_.eventEndDateTime.getName());
        this.setDescriptionProperty(Event_.details.getName());
        this.setCaptionProperty(Event_.subject.getName());

    }

    @Override
    public void addEvent(CalendarEvent event)
    {
        au.org.scoutmaster.domain.Event entity = new au.org.scoutmaster.domain.Event(event.getCaption(),
                event.getDescription(), event.getStart(), event.getEnd(), event.getStyleName());
        container.addEntity(entity);
    }

    @Override
    public void eventMove(MoveEvent event)
    {
        ScoutCalEvent calendarEvent = (ScoutCalEvent) event.getCalendarEvent();
        Event eventEntity = calendarEvent.getEntity();

        Date newStart = event.getNewStart();

        Date oldStart = eventEntity.getEventStartDateTime();
        eventEntity.setEventStartDateTime(newStart);

        long duration = eventEntity.getEventEndDateTime().getTime() - oldStart.getTime();

        Date newEndTime = new Date(newStart.getTime() + duration);
        eventEntity.setEventEndDateTime(newEndTime);
        try
        {
            EventDao daoEvent = new DaoFactory().getEventDao();
            eventEntity = daoEvent.merge(eventEntity);
            calendarEvent.eventEntity = eventEntity;
        }
        catch (Exception e)
        {
            logger.error(e, e);
            SMNotification.show(e, Type.ERROR_MESSAGE);
        }
    }

    @Override
    public void eventResize(EventResize event)
    {
        ScoutCalEvent calendarEvent = (ScoutCalEvent) event.getCalendarEvent();
        Event eventEntity = calendarEvent.getEntity();

        Date newEndTime = event.getNewEnd();
        Date newStartTime = event.getNewStart();
        eventEntity.setEventEndDateTime(newEndTime);
        eventEntity.setEventStartDateTime(newStartTime);
        try
        {
            EventDao daoEvent = new DaoFactory().getEventDao();
            eventEntity = daoEvent.merge(eventEntity);
            calendarEvent.eventEntity = eventEntity;
        }
        catch (Exception e)
        {
            logger.error(e, e);
            SMNotification.show(e, Type.ERROR_MESSAGE);
        }

    }

    @Override
    public List<CalendarEvent> getEvents(Date startDate, Date endDate)
    {
        EventDao daoEvent = new DaoFactory().getDao(EventDao.class);
        List<Event> entries = daoEvent.findBetween(startDate, endDate);

        // Wrap Events as CalendarEvents for the view
        ArrayList<CalendarEvent> arrayList = new ArrayList<CalendarEvent>();
        for (Event event : entries)
        {
            arrayList.add(new ScoutCalEvent(event));

            // Inject the color style required by each event into the page
            Styles styles = Page.getCurrent().getStyles();

            // Inject the style. We Use the colour name as the css name (sans the leading #
            styles.add(".v-calendar-event-" + event.getColor().getCSS().substring(1) + " { background-color:" + event.getColor().getCSS() + "; }");
        }

        return arrayList;
    }

    public class ScoutCalEvent implements CalendarEvent
    {
        private static final long serialVersionUID = 1L;
        private Event eventEntity;

        public ScoutCalEvent(Event eventEntity)
        {
            this.eventEntity = eventEntity;
        }

        @Override
        public Date getStart()
        {
            return this.eventEntity.getEventStartDateTime();
        }

        @Override
        public Date getEnd()
        {
            return this.eventEntity.getEventEndDateTime();
        }

        @Override
        public String getCaption()
        {
            return this.eventEntity.getSubject();
        }

        @Override
        public String getDescription()
        {
            return this.eventEntity.getDetails();
        }

        @Override
        public String getStyleName()
        {
            // We use the colour name as part of the css style name
            // as this makes it easy to match the style to the colour.
            // But take out the leading # as css doesn't like it.
            return this.eventEntity.getColor().getCSS().substring(1);
        }

        @Override
        public boolean isAllDay()
        {
            return this.eventEntity.getAllDayEvent();
        }

        public Event getEntity()
        {
            return this.eventEntity;
        }

    }

}