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 vote310 views1 answer
Udpate next js
Javascript Next.js
41 votes358 views2 answers
How to change port in next js
Javascript Next.js
23 votes357 views2 answers
Add favicon to next js static site
Javascript Next.js
0 vote327 views1 answer
Next js image contentful
Javascript Next.js
0 vote338 views1 answer
On click button change route next js
Javascript Next.js
0 vote327 views1 answer
Next js global layout
Javascript Next.js
0 vote380 views1 answer
Nextjs amp
Javascript Next.js
0 vote343 views1 answer
Get cuurent route name nextjs
Javascript Next.js
48 votes357 views1 answer
Emmet not working in react nextjs
Javascript Next.js
1 vote351 views1 answer
Strart a nextjs project
Javascript Next.js