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;