是否有可能在React中使用CSS自定义FullCalendar? [英] is it possible Customise FullCalendar with css in react?

问题描述

我只是从FullCalendar开始，我正在一个 react 项目中实现它，现在一切都很好，但是我想自定义实际的日历，希望它能满足我的客户需求.

I just begin with FullCalendar , i'm implementing it in a react project , everything good now but i want to customize the actual calendar , iwant it to respect my customer need.

我的问题:是否可以像这样在FullCalendar组件中添加 classname :(我尝试过，但是我无法在css文件中找到类名)

My question : is it possible to add a classname to the FullCalendar component like this : ( i tried but i can't reach the classname in my css file )

                <FullCalendar
                  className= "FullCalendarMonthClient"
                  defaultView= "dayGridMonth"
                  plugins={[dayGridPlugin]} 
                  columnHeaderFormat= {{                    
                    weekday: "long"
                  }} 
                  locale="fr"
                  events={[
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' },
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' }
                  ]}
                />

，然后用它用css自定义我的日历.我在同一页面上使用其他日历，即DayView，这就是为什么我要求在组件中添加类名的原因，以便我可以在不触摸Monthview的情况下设置dayview/monthview的样式.或者我该如何创建自己的主题?

and after use it to customize my calendar with css. I use on the same page an other calendar , a DayView that why i ask to put a classname in my component so i can style my dayview/monthview without touching the Monthview. Or how can i create my own theme ?

感谢社区

推荐答案

确实，样式化的包装器有效.例如，尝试更改日历中的按钮(下一个，上一个):

Indeed, a styled wrapper works. For example, try changing the buttons (next, prev) in the Calendar:

import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from '@fullcalendar/timegrid';

// needed for the style wrapper
import styled from "@emotion/styled";

// add styles as css
export const StyleWrapper = styled.div`
  .fc-button.fc-prev-button, .fc-button.fc-next-button, .fc-button.fc-button-primary{
    background: red;
    background-image: none;
}
`

// component with calendar, surround the calendar with the StyleWrapper
function Schedule({ ...props }) {
  return (
    <StyleWrapper>
                      <FullCalendar ... />
    </StyleWrapper>
  );
}

export default Schedule;

这篇关于是否有可能在React中使用CSS自定义FullCalendar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！