CODEWITHSUNDEEP
javascriptcssreactjssyncfusionej2-syncfusion
luke
luke

Reputation: 19

EJ Syncfusion React Scheduler Not Working

So i have this ej2 syncfusion calendar for appointments and i have copied the codes from this link https://ej2.syncfusion.com/react/demos/#/material3/schedule/block-events and tried to run the code from my ReactJs.

This is my edited JS and CSS code https://pastecode.io/s/e25wyj4m.

Requesting for assistance as to why my code is running but the css is not properly loading for me as this is the output i want to get Expectation but my program is giving me this output where everything is all over the place. My Website My Website

I think something is wrong with my style

I would really appreciate the assistance and if anything unclear please do clarify with this.

** Latest EDIT**: My calendar part is showing properly now and i have also put i the license key. Now the only problem is that my buttons are like the picture below having no css currently and the add event popup which appear when clicking on the calendar is already at the bottom of the screen also without improper css. I have edited the code in pastecode as above. Humbly requesting assistance on this.

Button Add event

Upvotes: -1

Views: 564

Answers (2)

Ravikumar Venkatesan
Ravikumar Venkatesan

Reputation: 11

Based on your shared screenshot I think you are missed to add the component stylesheet in your project. To render the EJ2 React Schedule you have to include the following style in your project App.css file. It will resolve your problem.

Note: The below stylesheets only incudes the styles only required to render the Scheduler. If you use a CDN link it will include all components styles.

@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";

For more details refer to the official documentation link below. https://ej2.syncfusion.com/react/documentation/schedule/getting-started#adding-css-reference

Upvotes: 0

Maulik Patel
Maulik Patel

Reputation: 780

I have looked at your code and found out few issues as mentioned below:

I have tried to create my own codesandbox from your pastebin link and tested your code there, and it's working fine (After making few changes).

Here, is the codesandbox link for checking working example.

As far as I have noticed, You're making mistake in your index.html file in which you've to import "bootstrapcdn" package and "syncfusion" package which will be responsible to render design into your app.

Change your index.html to this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

    <link
      href="https://cdn.syncfusion.com/ej2/24.1.41/material3.css"
      rel="stylesheet"
    />
    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    
    <title>React App</title>
  </head>
  <body class="material3">
    <style>
           .control-section
           {
               margin-top: 100px;
           }
   </style>
   <div id='root'>
</body>
</html>

Upvotes: 1

Related Questions