CODEWITHSUNDEEP
cssreactjsfullcalendar
Pbala
Pbala

Reputation: 71

is it possible Customise FullCalendar with css in 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.

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' }
                  ]}
                />

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 ?

Thanks comunity

Upvotes: 5

Views: 11567

Answers (3)

KingJoeffrey
KingJoeffrey

Reputation: 391

If you happen to be using @fullcalendar/react with @fullcalendar/bootstrap and @fullcalendar/rrule YOU NEED TO CHECK YOUR IMPORTS. I have having an issue where the rrulePlugin was over-riding my bootstrap theme, It was the way I was importing.

Import in this order solved it for me

import React from 'react';
import {Card, CardBody, CardHeader, Col, Row} from 'reactstrap';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import rrulePlugin from '@fullcalendar/rrule';
import bootstrapPlugin from '@fullcalendar/bootstrap';



  <div>
        <CardBody className="p-0">
     
          <FullCalendar
            ref={calendarRef}
            headerToolbar={false}
            plugins={[ // plugins MUST be in this order for mine to work or else I get errors
              rrulePlugin,
              dayGridPlugin,
              bootstrapPlugin,
              timeGridPlugin,
              interactionPlugin,
              listPlugin,
                  ]}
            initialView="dayGridMonth"
            themeSystem="bootstrap"
            dayMaxEvents={2}
            height={800}
            stickyHeaderDates={false}
            editable
            selectable
            selectMirror
            select={info => {
              console.log("calendarInfo", info.start.toISOString())
              if(info.start < moment().subtract(1, 'day')) {
                toast(
                  <Fragment>
                    <strong>Select Future date</strong>
                  </Fragment>
                );
              } else if(isCompose) {
                return (calendarView === "Month View" ? setShowTimeModal(!showTimeModal) : ""),
                setAddScheduleStartDate(info.start.toString())
              } else {
              setAddScheduleStartDate(info.start.toISOString());
              setIsOpenScheduleModal(true);
            }
          
            }}
            views={views}
            eventTimeFormat={eventTimeFormat}
            eventClick={handleEventClick}
            events={calendar}
            buttonText={buttonText}
            eventDrop={(e) => { return console.log("eventDrop ran======-----======", dispatch(calendarUpdate({start: e.event.start, end: e.event.end, _id: e.event._def.extendedProps._id})))}}
          />
       
        </CardBody>
        </div>

Upvotes: 0

miquelvir
miquelvir

Reputation: 1757

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;

Upvotes: 3

Gunther
Gunther

Reputation: 581

You can create a styled wrapper that will overwrite the internal styles.

import FullCalendar from "@fullcalendar/react";
import styled from "@emotion/styled";


export const StyleWrapper = styled.div`
  .fc td {
    background: red;
  }
`


const MyApp = ()=> {
  return (
    <StyleWrapper>
      <FullCalendar/>
    </StyleWrapper>
  );
}

Upvotes: 8

Related Questions