Schedule CSS Not Showing

[Daniel Wang]

I've set up the NextJS Schedule component and the only problem I have is that the styles aren't showing up. However, I'm not getting any error messages.

This is what I have in my globals.scss file:

@tailwind base;

@tailwind components;

@tailwind utilities;

@import url("https://api.fontshare.com/v2/css?f[]=clash-grotesk@200,700,400,600,300,1,500&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

body {

    font-family: "Clash Grotesk", sans-serif;

    overflow-x: hidden;

}

I've installed all the dependencies, but it's still not working. 

[Vijay Ravi]

Hi Daniel,

We have validated your query in your globals.scss file. Please install the React Schedule Node modules, as it will resolve the issue. Please refer to the global.scss file below.

[ global.scss ]

@import ../../node_modules/@syncfusion/ej2-base/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-buttons/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-calendars/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-inputs/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-lists/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-navigations/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-popups/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css;

@import ../../node_modules/@syncfusion/ej2-react-schedule/styles/material.css;

Sample: https://github.com/SyncfusionExamples/syncfusion-react-schedule-component-in-nextjs

Refer to the shared sample for your reference. Please get back to us if you need any further assistance.

Regards,

Vijay

[Daniel Wang]

Just a heads up to people in the future who is still stuck. Depending on how your files are organized, you may only have to go back one directory instead of two like this:

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";

@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";

@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";

@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";

@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";

@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";

@import "../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";

[Vijay Ravi]

Hi Daniel,

 

Yes, Refer to the CSS path depending on the downloaded node modules folder. 

 

Regards,

Vijay