[REACT] Not able to apply the custom styling

[abhaycg]

Hey,
we are trying to implement a custom theme for the calendar following the documentation found here: https://bryntum.com/products/calendar/docs/guide/Calendar/customization/styling#creating-a-custom-theme via npm.

Example:

$fa-font-path: '@bryntum/calendar/fonts';
$roboto-font-path: '@bryntum/calendar/fonts';
@import '~@bryntum/calendar/source/resources/sass/themes/material.scss';

$panel-background-color: #000000;
$widget-primary-color-rgb: pink;
$calendar-nonworking-day-background-color: #d0ff00;

Note:- The above code I'm using in App.scss

The documentation says that all variable can be found inside

'@bryntum/calendar/source/resources/core-sass/themes/vars/material-vars.scss"

I even added in the public/index.html the below lines-

    <link rel="stylesheet" href="%PUBLIC_URL%/themes/calendar/calendar.material.css" /> 

But even after trying all the things , the custom styling is not getting applied to my calendar view.

More over the error which I'm getting is -

Module not found: Error: Can't resolve '../../../../../node_modules/@bryntum/calendar/source/resources/core-sass/themes/material/@bryntum/calendar/fonts/Roboto-Bold.woff'

Screenshot 2024-08-06 at 11.12.17.png (654.42 KiB) Viewed 265 times

[tasnim]

Hi,

Welcome to Bryntum Forums!

To help you with this we'd need to run your code and test it. Could you please share a runnable test case with us? A runnable test case will make the assistance much faster.

Best regards,
Tasnim

[abhaycg]

My tsx file looks like this-

import { BryntumCalendar } from '@bryntum/calendar-react';
import { Fragment, useRef } from 'react';
import './App.scss';
import { BryntumCalendarProps } from '@bryntum/calendar-react';
const UserCalendar = () => {
  const calendarRef = useRef<BryntumCalendar>(null);
  const date = new Date();
  const calendarConfig: BryntumCalendarProps = {
    date: new Date(),
    sidebar: false,
    crudManager: {
      autoLoad: true,
      eventStore: {
        data: [],
      },
    },
    modes: {
      day: null,
      week: true,
      month: null,
      year: null,
      agenda: null,
    },
    listeners: {
      beforeEventEditShow() {
        return false;
      },
      beforeEventSave() {
        return false;
      },
      dateRangeChange(event: any) {
        console.log('any')
      },
    },
  };

  return (
    <Fragment>
      <BryntumCalendar ref={calendarRef} {...calendarConfig} />
    </Fragment>
  );
};

export default UserCalendar;

My scss file looks like this-

$fa-font-path: '@bryntum/calendar/fonts';
// @import '~@bryntum/calendar/calendar.material.css';
@import '~@bryntum/calendar/source/resources/sass/themes/material.scss';
// Background color for normal days
$calendar-background-color: #fff !default;

and my package.json looks like this-

  "dependencies": {
    "@bryntum/calendar": "^6.0.4",
    "@bryntum/calendar-react": "^6.0.4",
    "npm": "^8.17.0",
    "patch-package": "^8.0.0",
    "react": "^17.0.2",
    "@mui/material": "^5.2.8",
    }

Please let me know what else you would be needing for the solution.

[tasnim]

I apologize, If I was not clear enough. The code you shared is not runnable. By runnable test case I mean sharing your app wrapping it in a zip file with package.json included, so that we can run it with npm i && npm start (node_modules excluded).

[abhaycg]

Hello,

I misunderstood your way of communication, but every time sending the zip application when something is not working will be difficult.

For now, I'm attaching the application you have requested.

my-app.zip

(305.08 KiB) Downloaded 6 times

[alex.l]

Hi,

Thanks for sharing your application!
Runtime errors that required user code for reproducing cannot be reviewed debugged, and resolved without runnable app in most of cases, it's just impossible to understand what's going on. But of course, we are trying to do that before request a full test case.

I checked the code. I found that if you revert change in calendar.scss and uncomment line

// @import '~@bryntum/calendar/calendar.material.css';

instead of another one, that is added after:

@import '~@bryntum/calendar/source/resources/sass/themes/material.scss';

all paths will be resolved.
The error said that file '~@bryntum/calendar/source/resources/sass/themes/material.scss' cannot resolve paths to fonts. Looks like not all structure of the theme was copied.

[abhaycg]

Hi,

I'm using the uncommented part of the code that you and the documentation suggested.

$fa-font-path: '@bryntum/calendar/fonts';
@import '~@bryntum/calendar/source/resources/sass/themes/material.scss';
$calendar-background-color: #fff !default;

Please check the application that I have sent.

Screenshot 2024-08-07 at 14.06.07.png (533.04 KiB) Viewed 199 times

Screenshot 2024-08-07 at 14.05.52.png (615.2 KiB) Viewed 199 times

The error isn't coming when I'm using the commented part of the code which u have suggested-

$fa-font-path: '@bryntum/calendar/fonts';
@import '~@bryntum/calendar/calendar.material.css';
$calendar-background-color: #000000 !default;

The error isn't coming but the issue here is how I can add my custom styling as color, button size, and text size.

The classes defined in the variable.scss are what I'm using still the changes are not getting reflected

Screenshot 2024-08-07 at 14.19.20.png (285.62 KiB) Viewed 191 times

[khattakdev]

Hi there,

You're using create react app, which has been deprecated. I recommend switching to React Vite instead.

The font issue you're experiencing is related to CRA. Switching to React Vite should resolve this problem.

Here's a vite version you can check with some changes in styling.

react-vite.zip

(44.36 KiB) Downloaded 7 times

[abhaycg]

Hi

Given that vite was just introduced a year ago, there would be a way to run without vite? Should we use the lower versions of the calendar or something else?

[khattakdev]

If you prefer to keep using Create React App (CRA), you'll need to follow a couple of steps to resolve the issue:

1. Convert your SASS files to CSS and use the .css files.
2. Copy the fonts folder from @bryntum/calendar and place it next to your style.css.

These changes should fix the issue and allow you to customize it further. Here is your project with those adjustments applied.

my-app.zip

(1.73 MiB) Downloaded 8 times