[Question] How to use <FullCalendar /> with `styled-components`

[Jerry W.]

I'm trying to use styled-components to wrap <FullCalendar /> component in order to do a css customization, but it doesn't work.

[Dylan Ferris]

If this is a question, please refer to the support page and use Stack Overflow for help. If this is a bug, please supply a runnable, stripped-down demonstration.

[r20]

@fix777 Did you find a solution? I ran in to the same thing.

[r20]

@fix777 Did you find a solution? I ran in to the same thing.

You can simply wrap FullCalendar with another element/component and apply styling via the wrapper.
e.g.

const FullCalendarWrapper = styled.div`
  .fc-event-past {
    opacity: 0.4;
  }
`;

<FullCalendarWrapper>
   <FullCalendar .../>
</FullCalendarWrapper>