React-Big-Calendar CSS or SASS or both?

Question

I have a create-react-app, and I'm adding RBC. I have the basic calendar setup and working with simple CSS (I grabbed the CSS file from the node_module folder, and moved to the component folder). The basic calendar is there, but it's real basic.

My question is: I noticed there is a SASS folder in the node_module. Should I be using this somehow? If so, how do I get started? I have not used SASS before.

Here's the code:

//Packages
import React from "react";
import axios from "axios";
import { Calendar, momentLocalizer } from 'react-big-calendar'
import { Row, Button, Col, Card, CardBody, CardSubtitle } from "reactstrap";
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';
//CSS
import 'react-big-calendar/lib/sass/styles';
import "./react-big-calendar.css";
import './dragndrop.css';
import "./schedule.css";

const DnDCalendar = withDragAndDrop(Calendar);
const localizer = momentLocalizer(moment);

//Components

let myEventsList = [
  {
    'title': 'Huddle #2 @ 2pm',
    'allDay': true,
    'start': new Date(2021, 1, 5),
    'end': new Date(2021, 1, 5)
  },
  {
    'title': 'Huddle #2 @ 2pm',
    'start': new Date(2021, 1, 12),
    'end': new Date(2021, 1, 12)
  },
  {
    'title': 'Huddle #3 @ 2pm',
    'start': new Date(2021, 1, 19),
    'end': new Date(2021, 1,19)
  },
  {
    'title': 'Huddle #3 @ 2pm',
    'start': new Date(2021, 1, 26),
    'end': new Date(2021, 1, 26)
  },
]

class Schedule extends React.Component {

  constructor(props){
    super(props); 
    this.state = { 
      // date: new Date(2021, 1, 12),
      // width: 1000
    }
  };


  eventSelect = (data) => {
    this.setState({width: 300})
    console.log("Event Drag:" + JSON.stringify(data))
  };

  eventDrag = (data) => {
    console.log("Event Select:" + JSON.stringify(data))
  };

  eventDrop = (data) => {
    console.log("Event Drop:" + JSON.stringify(data))
  };

  eventResize = (data) => {
    console.log("Event Resize: "+JSON.stringify(data))
  };


  componentDidMount(){
  };

  shouldComponentUpdate(props, state) {
  };


  //Render to Dom
  render() {
    return (
      <div className="schedule_container">
        <div className="calendar_container">
          <div className="key_dates">Key Dates:</div> 
          <DnDCalendar 
            className="dnd_calendar"
            style={{ height: '30rem', width: '100%' }}
            step={30}
          
            localizer={localizer}
            events={myEventsList}
            startAccessor="start"
            endAccessor="end"
            view={this.state.view}
            views={['month', 'week','day']}

            onSelectSlot={(data) => this.eventSelect(data)}
            onEventDrop={(data) => this.eventDrop(data)}
            onEventResize={(data) => this.eventResize(data)}
            onSelectEvent={(data) => this.eventDrag(data)}
          />        
        </div>

        <div className="event_container"> 
          <div className="event_details">Event Details</div>   
          <Card>
            <CardBody>
              This is the card with stuffy stuff
            </CardBody>
          </Card>
        </div>
      </div>
    );
  };
};

export default Schedule;

As you can see, I tried importing the SASS folder, but I have no idea what I'm doing, and I got an error and nothing worked. I also tried downloading node-sass module, but it made no difference.

Any advice or suggestions will be appreciated! Thanks!

score 1 · Answer 1 · answered Jan 21 '21 at 12:47

When you install node-sass you just need to create a scss file with your stylings inside and it gets compiled at build time into a css file at the same path your scss file is in

You can read more about here https://create-react-app.dev/docs/adding-a-sass-stylesheet/

You can compare css -> sass like javascript -> typescript sass gives you much more possibilities like specific importing, using variables and many more but at the end everyting gets build into a usual css file.

So for your case and question, you just need to import the compiled css file into your project and you can then access those style classes.

React-Big-Calendar CSS or SASS or both?

1 Answers1