Understanding how to leverage styles.module.scss for implementing personalized styling within react-big-calendar

I'm currently working with the react-big-calendar library in order to develop a customized calendar. However, I've encountered an issue where the SCSS styling is not being applied correctly.

export const JobnsCalendar = () => (
  <Calendar
    className={styles.calendar}
    localizer={localizer}
    views={['month']}
    style={{ height: '80vh' }}
    formats={formats}
    components={{
      toolbar: Toolbar,
    }}
  />
);

styles.module.scss :

.calendar {
  .rbc-time-header-gutter,
  .rbc-time-content > .rbc-row > div:not(.rbc-time-gutter),
  .rbc-header,
  .rbc-month-view {
    border-right: none !important;
  }

  .rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(6) {
    background-color: blue;
  }

  .rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(7) {
    background-color: red;
  }
}
typescriptnext.jssassmomentjsreact-big-calendar

Answer №1

The classes prefixed with rbc- that you are mentioning are considered 'global' within Big Calendar. These classes are defined in the stylesheet that still needs to be included in your interface so that Big Calendar can apply them. Your SCSS module should reflect this by showcasing how these classes are referenced.

.calendar {
  :global(.rbc-time-header-gutter),
  // etc
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Filter an array retrieved from the backend in a TypeScript environment`

I have asked other questions in the past, but I received unhelpful answers. I am still looking for proper solutions. Currently, I am retrieving an array from the backend using Redux. const { movies, message } = useAppSelector(state => state.movies); ...

arraystypescriptreduxreact-reduxnext.js

What is the best way to send additional variables to my npm script?

Currently, I am integrating typeorm with nextjs. Unfortunately, running manual migrations seems to be quite complex. Initially, I have set up the following npm script: "typeorm": "ts-node -P cli-tsconfig.json -r tsconfig-paths/register ./nod ...

node.jsnpmnext.jstypeorm

Building a personalized webpage using React code in a NextJS + Prismic setup

I am still new to NextJS and recently started my blog using this starter template. So far, everything is working smoothly - when I add a new article or page in Prismic, it automatically appears on my site as expected. However, I now have a React-based cal ...

reactjsnext.jsprismic

Defining onClick event in Typescript and React.Konva

Struggling with resolving the tslint error Type declaration of 'any' loses type-safety., particularly when it comes to determining the correct type for the Event. Currently converting the Lynda tutorial "Building and Deploying a Full-Stack React ...

reactjstypescriptkonvajs

Function 'await' fails to execute

Within this function, I am iterating through an array of strings, each representing a user's UID. The goal is to access each user's profile, retrieve the most recent reputation (similar to SO), and then add a map of the UID and reputation to a ne ...

node.jstypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Integrate incoming websocket information with state management in React

I am facing a challenge in creating a timeseries plot with data obtained from a websocket connection. The issue arises when new values overwrite the previously stored value in the state variable. const [chartData, setChartData] = React.useState(null) Cu ...

javascriptreactjstypescript

Angular 2 event emitter falling behind schedule

I am currently utilizing Angular 2 beta 6. The custom event I created is not being captured import {Component, OnInit, EventEmitter} from 'angular2/core'; import {NgForm} from 'angular2/common'; import {Output} from "angular2/core" ...

javascripttypescriptangular

In the latest version of NextJS 13, the styled-components CSS is not being properly

In my current project, I am utilizing NextJs version 13.4.10 and styled-components version 6.0.4. Interestingly, when I initially run the project (npm run dev), all styles are successfully applied. However, if I make a code change and re-render the project ...

reactjsnext.jsstyled-components

Angular is not able to access the value of a promise in a different function after it has been retrieved

I have a form with default values that should be added to the form fields when it appears. There are two functions: #1 for fetching data from the backend and #2 for displaying the form: person$: any; ngOnInit() { this.getPersonData(123) this.buildPer ...

angulartypescript

I am attempting to override the style class of a p-tag in Primeng, but I am finding that the :host ::ng-deep selector

Check out the following code snippets: component-xyz.html <td> <p-tag styleClass = "p-mr-2" severity = "{{getSeverity(status)}}" *ngIf = "status" [ngClass] = "status"></p-tag></td> component ...

angularsassprimeng

What is the implementation of booleans within the Promise.all() function?

I am looking to implement a functionality like the following: statusReady: boolean = false; jobsReady: boolean = false; ready() { return Promise.all([statusReady, jobsReady]); } ...with the goal of being able to do this later on: this.ready().then(() ...

javascriptangulartypescriptpromise

Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Can someone assist with resolving this issue? Error message: core.js:1542 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function Software versions: Angular CLI: 6.0.8 / rxjs 6.2.1 import { Injectable } from '@angular/ ...

angulartypescriptrxjs

Achieve flattening of types using recursion in TypeScript with the help of const

I am presenting the TypeScript code below: type Item = { key: number; value: string; items?: readonly Item[]; } const items = [ { key: 1, value: 'foo', items: [{ key: 3, value: 'baz' }] }, { key: 2, value: 'bar ...

typescriptrecursion

Node.js seems to be frozen following the "npm run dev" command

Just recently, I updated to the newest versions of React and Next.js. After creating a new project using npx create-next-app, the first step I take in VS Code is running "npm run dev". However, I encountered a warning that Fast Refresh had to perform a ful ...

reactjsnext.js

Is there a way to invoke a function within a mat-error element?

I need to display an error message in my input field! The function will return true if both passwords match, otherwise it will return false. How can I invoke a boolean function inside mat-error! My Function: checkPasswords(): Boolean { // 'passwords& ...

htmlangulartypescript

Can you explain the meaning of `((prevState: null) => null) | null`?

Upon encountering this code snippet: import { useState } from "preact/hooks"; export default function Test() { const [state, setState] = useState(null); setState('string'); } An error is thrown: Argument of type 'string' ...

reactjstypescriptpreact

What is the proper way to define the font slant as "slnt" in NextJS development?

My preference is to use the font style slnt -8 for Inter. When importing with a URL through SCSS, I am able to specify slnt -8 as follows: @import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-8,100..900&display=swap"); Unf ...

javascriptnext.jsfontsgoogle-fonts

Trying out Angular2 service using a fabricated backend

Just a heads up: I know Angular2 is still in alpha and undergoing frequent changes. I am currently working with Angular2 and facing an issue with testing an injectable service that has a dependency on http. I want to test this service using a mock backend ...

httpdependency-injectiontypescriptangular

Transferring data from a child component to a parent component in Angular using @ViewChild requires providing 2 arguments

Currently, I am attempting to transmit data using @Output & EventEmitter and @ViewChild & AfterViewInit from a child component to a parent component. Below is the code from my parent component .html file: <app-child (filterEvent)=" getValu ...

angulartypescriptangular-componentsviewchildangular-event-emitter

Dealing with the possibility of an empty array when accessing elements by index in Typescript

What is the best way to handle accessing elements by index in an array in Typescript when the array can be empty, resulting in potentially undefined elements? I am developing a simple game using React and Typescript where I have a variable named game whic ...

typescripttypes