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

3 votes254 views1 answer
React icons in nextJS
Javascript Next.js
48 votes234 views1 answer
Emmet not working in react nextjs
Javascript Next.js
0 vote212 views1 answer
Pass object to query on Router.push NextJs
Javascript Next.js
0 vote228 views1 answer
Nextjs override page route
Javascript Next.js
0 vote191 views1 answer
How to update the react version in next js app
Javascript Next.js
0 vote300 views1 answer
Nextjs react native web typescript
Javascript Next.js
0 vote201 views1 answer
Show uploaded image in react/nextjs
Javascript Next.js
0 vote206 views1 answer
Change next js default port
Javascript Next.js
0 vote202 views1 answer
Nextjs svg npm
Javascript Next.js
0 vote194 views1 answer
Head component nextjs
Javascript Next.js