Calendar - Using Enact Framework

$ npm install -g @enact/cli

$ npm install -g @webosose/ares-cli

import Dialog from '@enact/moonstone/Dialog';
import Scroller from '@enact/moonstone/Scroller';
import Notification from '@enact/moonstone/Notification';
...	
	<Dialog
		className="dialog-popup"
		open={this.state.dailog}
		onClose={() => {
			this.onDailogClose();
		}}
		showCloseButton
		title={formatedDate}
		titleBelow={this.state.dailogSubTitle}
	 >
		<Scroller>
			<div className={"scrollbar"}>
				{
					this.state.dailogType === 'form' ?
						<CreateForm
							currentSelectedDate={currentSelectedDate}
							postObj={this.postObj}
							triggerNotification={this.triggerNotification}
						/> :
						<EventsList
							deleteEvent={this.deleteEvent}
							year={currentYear}
							date={currentDate}
							month={currentMonth}
							createNewEvent={this.createNewEvent}
							events={this.state.monthsData[currentYear][currentMonth.toString()][currentDate]}
						/>
				}
			</div>
		</Scroller>
	</Dialog>
	<Notification open={this.state.notification}>
		{this.state.notificationMsg}
	</Notification>
...

import LS2Request from '@enact/webos/LS2Request';

export const dbServices = {
	createKind : (cb) => {
		return new LS2Request().send({
			service: 'luna://com.webos.service.db',
			method: 'putKind',
			parameters: {
				'id':'com.domain.app.service.familyeventplanner:4',
				'owner':'com.domain.app.familyeventplanner',
				'indexes':[
					{'name':'year', 'props':[{'name':'year'}]},
					{'name':'month', 'props':[{'name':'month'}]},
					{'name':'date', 'props':[{'name':'date'}]},
					{'name':'fullDate', 'props':[{'name':'year'}, {'name':'month'}, {'name':'date'}]}
				]
			},
...
		});
	},
	putData : (obj, cb) => {
		return new LS2Request().send({
			service: 'luna://com.webos.service.db',
			method: 'put',
			parameters: {
				'objects':[
					obj
				]
			},
...
		});
	},
	findData : (queryObj, cb) => {
		return new LS2Request().send({
			service: 'luna://com.webos.service.db',
			method: 'find',
			parameters: {
				'query': queryObj
			},
...
		});
	},
	deleteEvent: (id) => {
		return new LS2Request().send({
			service: 'luna://com.webos.service.db',
			method: 'del',
			parameters: {
				'ids' : [id]
			},
...
		});
	}
};
...

import Icon from '@enact/moonstone/Icon';
import Dropdown from '@enact/moonstone/Dropdown';
import EditableIntegerPicker from '@enact/moonstone/EditableIntegerPicker';

const CalendarHeader = (props) => {
	return (
		<tr className="calendar-header">
			<td colSpan="1">
				<Icon
					onClick={() => {
						props.prevMonth();
					}}
				>arrowsmallleft</Icon>
			</td>
			<td colSpan="5" className="nav-content">
				<Dropdown
					selected={props.months.indexOf(props.month())}
					width="medium"
					onSelect={(d) => {
						props.onSelectChange(d);
					}}
				>
					{props.months}
				</Dropdown>

				{' '}
				<EditableIntegerPicker
					editMode
					max={3000}
					min={1000}
					value={parseInt(props.year())}
					onChange={(d) => {
						props.onYearChange(d);
					}}
					width="small"
				/>
			</td>
			<td colSpan="1" className="nav-month">
				<Icon
					onClick={() => {
						props.nextMonth();
					}}
				>arrowsmallright</Icon>
			</td>
		</tr>
	);
};

export default CalendarHeader;

import LabeledIcon from '@enact/moonstone/LabeledIcon';

const Days = (props) => {
	let blanks = [];
	for (let i = 0; i < props.firstDayOfMonth(); i++) {
		blanks.push(<td key={i * 80} className="emptySlot">
			{''}
		</td>
		);
	}
	let daysInMonth = [];
	const getEvents = (d) => {
		let events = null;
		if (props.monthsData[props.month][d.toString()]) {
			let daysData = props.monthsData[props.month][d.toString()];
			if (daysData.length > 3) {
				events = [];
				events[0] = <div key="0" className="event-element">{daysData[0].title}</div>;
				events[1] = <div key="1" className="event-element">{daysData[1].title}</div>;
				events[2] = <LabeledIcon key="2" className="more-event-element" icon="arrowsmallright" labelPosition="before">Click to view more</LabeledIcon>;
			} else {
				events = daysData.map((ev, i) => {
					return (
						<div key={i} className="event-element">{ev.title}</div>
					);
				} );
			}
		}

		return events;
	};
	...	
};

export const generateQuery = {
	findQuery : (obj) => {
		let query = {
			'from':_kind,
			'where':[]
		};
		for (let key in obj) {
			query['where'].push({
				'prop' : key,
				'op': '=',
				'val': obj[key]
			});
		}
		return query;
	},
	filterData : (arr) => {
		let filteredData = {};

		for (let i = 0; i < arr.length; i++) {
...
			let temp = {};
			temp['title'] = arr[i]['event']['title'];
			temp['description'] = arr[i]['event']['description'];
			temp['image'] = arr[i]['image'];

			filteredData[arr[i].year][arr[i].month][arr[i].date].push(temp);
		}

		return filteredData;
	}