Search code examples
javascriptcssreactjssyncfusionej2-syncfusion

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

Solution

  • 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>