Styling calendar

Support
#1

I am trying top use styling in calendar to style the events in different colour based on selection.

I have started with the cuba sample app for calendar and added the css codes in styles.scss file but not sure what needs to be done to get working, thanks for your help.

my xml file content


<layout>
    <calendar id="calendarWeekly"
              captionProperty="caption"
              datasource="tasksDs"
              descriptionProperty="description"
              endDate="2016-12-24"
              endDateProperty="endDate"
              height="100%"
              isAllDayProperty="allDay"
              startDate="2016-12-18"
              startDateProperty="startDate"
              stylenameProperty="styleName"
              width="100%"/>
</layout>

Task Entity


public class Task extends StandardEntity {
    private static final long serialVersionUID = -3453799426222595950L;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "EMPLOYEE_ID")
    protected Employee employee;

    @Column(name = "CAPTION", nullable = false)
    protected String caption;

    @Lob
    @Column(name = "DESCRIPTION")
    protected String description;

    @Temporal(TemporalType.TIMESTAMP)
    @Column(name = "START_DATE", nullable = false)
    protected Date startDate;

    @Temporal(TemporalType.TIMESTAMP)
    @Column(name = "END_DATE", nullable = false)
    protected Date endDate;

    @Column(name = "ALL_DAY")
    protected Boolean allDay;

    @Column(name = "STYLE_NAME")
    protected Integer styleName;

    public CalendarStyle getStyleName() {
        return styleName == null ? null : CalendarStyle.fromId(styleName);
    }

    public void setStyleName(CalendarStyle styleName) {
        this.styleName = styleName == null ? null : styleName.getId();
    }
....

I have attached the project zip file.

calendar-demo-master.zip (34.0M)

#2

Hi,

Your styleName has Integer type, but it must by String. I would recommend you don’t use enum for this field, just leave it String


@Column(name = "STYLE_NAME")
protected String styleName;

public String getStyleName() {
	return styleName;
}

public void setStyleName(String styleName) {
	this.styleName = styleName;
}

You can use enum with predefined styles in TaskEditor


@Override
protected void postInit() {
	fieldGroup.addCustomField("styleName", (datasource, propertyId) -> {
		LookupField lookupField = (LookupField) componentsFactory.createComponent(LookupField.NAME);
		lookupField.setOptionsEnum(CalendarStyle.class);
		lookupField.setValue(CalendarStyle.fromId(getItem().getStyleName()));
		lookupField.addValueChangeListener(e -> {
			if (e.getValue() == null) {
				getItem().setStyleName(null);
			} else {
				CalendarStyle style = (CalendarStyle) e.getValue();
				getItem().setStyleName(style.getId());
			}
		});
		return lookupField;
	});
}

and rewrite CalendarStyle as String enum for convenience


public enum CalendarStyle implements EnumClass<String> {

    RED("event-red"),
    GREEN("event-green"),
    BLUE("event-blue"),
    YELLOW("event-yellow");

    private String id;

    CalendarStyle(String value) {
        this.id = value;
    }

    public String getId() {
        return id;
    }

    @Nullable
    public static CalendarStyle fromId(String id) {
        for (CalendarStyle at : CalendarStyle.values()) {
            if (at.getId().equals(id)) {
                return at;
            }
        }
        return null;
    }
}

I’ve attached your project with my improvements.

Regards,

Gleb.

calendar-demo.zip (45.6K)

#3

Thank you so much. Noticed that the styleName field in editor is custom.


     <field id="styleName"
                       custom="true"></field>
#4

This is because styleName attribute has String type and to have LookupField with predefined styles in TaskEdit. we need to define styleName field as custom.