NextJs Scheduler

import Head from 'next/head';
import dynamic from 'next/dynamic';
import 'smart-webcomponents-react/source/styles/smart.default.css';
import styles from '../styles/Home.module.css';

//Dynamically import the Smart.Scheduler component
const Scheduler = dynamic(() => import('smart-webcomponents-react/scheduler'), {
  ssr: false, //no server-side rendering 
  loading: () => Loading...
});

function Home() {
  const today = new Date(),
    todayDate = today.getDate(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    dataSource = [
      {
        label: 'Google AdWords Strategy',
        dateStart: new Date(currentYear, currentMonth, todayDate, 9, 0),
        dateEnd: new Date(currentYear, currentMonth, todayDate, 10, 30),
        backgroundColor: '#E67C73'
      }, {
        label: 'New Brochures',
        dateStart: new Date(currentYear, currentMonth, todayDate - 1, 11, 30),
        dateEnd: new Date(currentYear, currentMonth, todayDate - 1, 14, 15),
        backgroundColor: '#8E24AA'
      }, {
        label: 'Brochure Design Review',
        dateStart: new Date(currentYear, currentMonth, todayDate + 2, 13, 15),
        dateEnd: new Date(currentYear, currentMonth, todayDate + 2, 16, 15),
        backgroundColor: '#039BE5'
      }
    ],
    currentTimeIndicator = true,
    shadeUntilCurrentTime = true,
    view = 'day',
    views = ['day', 'week', 'month', 'timelineDay', 'timelineWeek', 'timelineMonth'],
    firstDayOfWeek = 1;

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to Next.js!
        </h1>

        <Scheduler className={styles.scheduler} id="scheduler" currentTimeIndicator={currentTimeIndicator} shadeUntilCurrentTime={shadeUntilCurrentTime} 
        dataSource={dataSource} view={view} views={views} firstDayOfWeek={firstDayOfWeek}></Scheduler>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://www.htmlelements.com/react/demos/scheduler/current-time-indicator/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="https://www.htmlelements.com/wp-content/design/assets/images/logo-htmlelements.svg" className={styles.imgLogo} />
        </a>
      </footer>
    </div>
  );
}

export default Home;

Source: htmlelements.com

Similar codes

0 vote303 views1 answer
How to install jsonwebtoken in next js
Javascript Next.js
3 votes369 views1 answer
Get values form query params in next js
Javascript Next.js
29 votes363 views3 answers
Nextjs
Javascript Next.js
0 vote305 views1 answer
Next js build command
Javascript Next.js
11 votes339 views5 answers
Next js create app
Javascript Next.js
0 vote294 views1 answer
How to make nextjs image component responsive
Javascript Next.js
0 vote314 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js
1 vote346 views2 answers
Next js ReferenceError: location is not defined
Javascript Next.js
0 vote329 views1 answer
Next js get request
Javascript Next.js
1 vote344 views2 answers
Mongodb mongoose with next js connection
Javascript Next.js