stefanuebe/vaadin-fullcalendar

Add support for CssImport

Closed this issue · 4 comments

brunovianarezende commented

I'm trying to change the style of two css classes (.fc-icon-minus-square and .fc-icon-plus-square), but I can't make it to work when I use @CssImport. I can change the styling by using 'calendar.addCustomStyles' method, but, if possible, I'd prefer to use css files.

I've taken a look at https://github.com/stefanuebe/vaadin_fullcalendar/blob/master/addon/src/main/resources/META-INF/resources/frontend/full-calendar.js and I see the component doesn't extend ThemableMixin, so I believe CssImport shouldn't really work. Is it really the case? if so, is it possible to add such functionality?

stefanuebe commented

With the upcoming version 6, the full calendar will be available in the light dom, so normal styling should work then as expected.

  • 👍1
stefanuebe commented

Can you give me a sample of what you try to do, so I can test it with the current state?

brunovianarezende commented

this is the CSS I'm applying:

.fc-icon-minus-square:before, .fc-icon-plus-square:before {
  font-family: 'lumo-icons';
  content: var(--lumo-icons-angle-right);
  display: inline-block
}

.fc-icon-minus-square:before {
  transform: rotate(90deg);
}

and this is how I'm using it in a FullCalendarScheduler:

    FullCalendarScheduler calendar =
        FullCalendarBuilder.create()
            .withScheduler(...)
            .build();
    getContent().addAndExpand(calendar);
    calendar.changeView(SchedulerView.RESOURCE_TIMELINE_DAY);
    calendar.setWidth("100%");
    calendar.setHeight("100%");
    calendar.addCustomStyles(
        ".fc-icon-minus-square:before, .fc-icon-plus-square:before {\n"
            + "  font-family: 'lumo-icons';\n"
            + "  content: var(--lumo-icons-angle-right);\n"
            + "  display: inline-block\n"
            + "}\n"
            + "\n"
            + ".fc-icon-minus-square:before {\n"
            + "  transform: rotate(90deg);\n"
            + "}");

    Resource parent = new Resource(null, "parent", null);
    parent.addChildren(
        new Resource("1", "child1", null),
        new Resource("2", "child2", null),
        new Resource("3", "child3", null));

    calendar.addResource(parent);
  • 👍1
stefanuebe commented

Thanks. That will work with 6.0. Also I will take that into the standard as I like it much more than the default expand icon :)

  • 😄1