Day Planner | Features | MESCIUS DataViewsJS Demos

This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right. Each day you see is a row in the data table. Notice this sample shows how to use a function in the template. In the source code this is accomplished with very little code using CSS and HTML markup techniques.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/RowTemplates/DayPlanner/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, template, row template, rowtemplate" />
<meta
name="description"
content="This example demonstrates usage of the DataViews row template feature by arranging data from a table into a layout that looks much like a day planner, with dates on the left and events and items on the right.  Each day you see is a row in the data table."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Day Planner | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="template" style="display: none">
{{function getTime(time, type){ var date = new Date(time); var arr = date.toDateString().split(' '); switch (type)
{ case 'day': return arr[2]; case 'week': return arr[0]; case 'month': return arr[1] + ', ' + arr[3]; default:
return ''; } }}}
<div class="template-wrapper">
<div class="template-container">
<div class="left-container" data-column="time"></div>
<div class="right-container" data-column="details"></div>
</div>
</div>
</template>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var timePresenter =
'<div class="day">{{=getTime(it.time, "day")}}</div>' +
'<div class="week">{{=getTime(it.time, "week")}}</div>' +
'<div class="month">{{=getTime(it.time, "month")}}</div>';
var detailsPresenter =
'{{? it.details.medicine}}<div class="medicine"><div class="title">Medicine:</div><div class="content">{{=it.details.medicine}}</div></div>{{?}}' +
'{{? it.details.note}}<div class="note"><div class="title">Note:</div><div class="content">{{=it.details.note}}</div></div>{{?}}' +
'{{? it.details.moods}}<div class="moods"><div class="title">Moods:</div><div class="content">{{=it.details.moods}}</div></div>{{?}}';
var cols = [
{
id: 'time',
dataField: 'time',
presenter: timePresenter,
},
{
id: 'details',
dataField: 'details',
presenter: detailsPresenter,
},
];
new GC.DataViews.DataView(
document.getElementById('grid'),
data,
cols,
new GC.DataViews.GridLayout({
autoRowHeight: true,
showRowHeader: false,
showColHeader: false,
rowTemplate: '#template',
})
); // focus data.view by default
document.getElementById('grid').focus();

var data = [
{
time: 1419091200000,
details: {
medicine: 'Vitamin B, Vitamin C',
},
},
{
time: 1418918400000,
details: {
medicine: 'Vitamin A, Vitamin B, Vitamin C',
note: 'Need to renew registration by this day or get a fine.',
},
},
{
time: 1418745600000,
details: {
medicine: 'Vitamin A, Vitamin B, Vitamin C',
note: 'Today is my birthday!',
moods: 'Angelic Confident, Dynamic',
},
},
{
time: 1418572800000,
details: {
medicine: 'Vitamin A, ',
note: 'Meeting with agent at 4:00 pm',
moods: 'Determined',
},
},
];

.gc-cell {
border: 0;
padding: 0;
}
.gc-viewport {
background: url("/dataviewsjs/demos/images/grid-background.png");
padding: 1em;
}
.template-wrapper {
margin-bottom: 1em;
}
.template-container {
background: #c8ffbe;
border: solid 1px #e0e0e0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
width: 677px;
}
.gc-row.gc-selected {
background: none;
color: inherit;
}
.gc-focused .template-container {
background: #623b5a;
}
.gc-focused .left-container div {
color: #fff;
}
.gc-focused .left-container:after {
border-left: solid #623b5a;
border-width: 5px;
}
.gc-row.gc-focused {
background-color: inherit;
}
.left-container {
float: left;
width: 75px;
}
.left-container:after {
border: solid transparent;
border-left: solid #c8ffbe;
border-width: 5px;
content: " ";
height: 0;
left: 75px;
position: absolute;
top: 10px;
width: 0;
}
.right-container {
background: #fff;
margin-left: 75px;
min-height: 96px;
width: 600px;
}
.day {
color: #333;
font-size: 2.5em;
text-align: center;
}
.week {
color: #333;
font-size: 1.1em;
text-align: center;
}
.month {
color: #999;
font-size: 0.8em;
text-align: center;
}
.title {
color: #623b5a;
font-size: 16px;
}
.content {
color: #777;
overflow: hidden;
text-overflow: ellipsis;
}
.note,
.medicine,
.moods {
padding: 5px 10px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9EYXlQbGFubmVyL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9EYXlQbGFubmVyL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsU0FBQTtFQUNBLFVBQUE7QUNDRjs7QURFQTtFQUNFLGdFQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0Usa0JBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0EseUJBQUE7RUFDQSx1Q0FBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxnQkFBQTtFQUNBLGNBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0FDQ0Y7O0FERUE7RUFDRSwwQkFBQTtFQUNBLGlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0VBQ0EsMEJBQUE7RUFDQSxpQkFBQTtFQUNBLFlBQUE7RUFDQSxTQUFBO0VBQ0EsVUFBQTtFQUNBLGtCQUFBO0VBQ0EsU0FBQTtFQUNBLFFBQUE7QUNDRjs7QURFQTtFQUNFLGdCQUFBO0VBQ0EsaUJBQUE7RUFDQSxnQkFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxnQkFBQTtFQUNBLGtCQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNDRjs7QURFQTtFQUNFLGNBQUE7RUFDQSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSx1QkFBQTtBQ0NGOztBREVBOzs7RUFHRSxpQkFBQTtBQ0NGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9EYXlQbGFubmVyL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdjLWNlbGwge1xuICBib3JkZXI6IDA7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5nYy12aWV3cG9ydCB7XG4gIGJhY2tncm91bmQ6IHVybCgnL2RhdGF2aWV3c2pzL2RlbW9zL2ltYWdlcy9ncmlkLWJhY2tncm91bmQucG5nJyk7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLnRlbXBsYXRlLXdyYXBwZXIge1xuICBtYXJnaW4tYm90dG9tOiAxZW07XG59XG5cbi50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjYzhmZmJlO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgd2lkdGg6IDY3N3B4O1xufVxuXG4uZ2Mtcm93LmdjLXNlbGVjdGVkIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY29sb3I6IGluaGVyaXQ7XG59XG5cbi5nYy1mb2N1c2VkIC50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjNjIzYjVhO1xufVxuXG4uZ2MtZm9jdXNlZCAubGVmdC1jb250YWluZXIgZGl2IHtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5nYy1mb2N1c2VkIC5sZWZ0LWNvbnRhaW5lcjphZnRlciB7XG4gIGJvcmRlci1sZWZ0OiBzb2xpZCAjNjIzYjVhO1xuICBib3JkZXItd2lkdGg6IDVweDtcbn1cblxuLmdjLXJvdy5nYy1mb2N1c2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbn1cblxuLmxlZnQtY29udGFpbmVyIHtcbiAgZmxvYXQ6IGxlZnQ7XG4gIHdpZHRoOiA3NXB4O1xufVxuXG4ubGVmdC1jb250YWluZXI6YWZ0ZXIge1xuICBib3JkZXI6IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItbGVmdDogc29saWQgI2M4ZmZiZTtcbiAgYm9yZGVyLXdpZHRoOiA1cHg7XG4gIGNvbnRlbnQ6ICcgJztcbiAgaGVpZ2h0OiAwO1xuICBsZWZ0OiA3NXB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMTBweDtcbiAgd2lkdGg6IDA7XG59XG5cbi5yaWdodC1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjZmZmO1xuICBtYXJnaW4tbGVmdDogNzVweDtcbiAgbWluLWhlaWdodDogOTZweDtcbiAgd2lkdGg6IDYwMHB4O1xufVxuXG4uZGF5IHtcbiAgY29sb3I6ICMzMzM7XG4gIGZvbnQtc2l6ZTogMi41ZW07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLndlZWsge1xuICBjb2xvcjogIzMzMztcbiAgZm9udC1zaXplOiAxLjFlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4ubW9udGgge1xuICBjb2xvcjogIzk5OTtcbiAgZm9udC1zaXplOiAwLjhlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4udGl0bGUge1xuICBjb2xvcjogIzYyM2I1YTtcbiAgZm9udC1zaXplOiAxNnB4O1xufVxuXG4uY29udGVudCB7XG4gIGNvbG9yOiAjNzc3O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbn1cblxuLm5vdGUsXG4ubWVkaWNpbmUsXG4ubW9vZHMge1xuICBwYWRkaW5nOiA1cHggMTBweDtcbn1cbiIsIi5nYy1jZWxsIHtcbiAgYm9yZGVyOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG4uZ2Mtdmlld3BvcnQge1xuICBiYWNrZ3JvdW5kOiB1cmwoXCIvZGF0YXZpZXdzanMvZGVtb3MvaW1hZ2VzL2dyaWQtYmFja2dyb3VuZC5wbmdcIik7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLnRlbXBsYXRlLXdyYXBwZXIge1xuICBtYXJnaW4tYm90dG9tOiAxZW07XG59XG5cbi50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjYzhmZmJlO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgd2lkdGg6IDY3N3B4O1xufVxuXG4uZ2Mtcm93LmdjLXNlbGVjdGVkIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY29sb3I6IGluaGVyaXQ7XG59XG5cbi5nYy1mb2N1c2VkIC50ZW1wbGF0ZS1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjNjIzYjVhO1xufVxuXG4uZ2MtZm9jdXNlZCAubGVmdC1jb250YWluZXIgZGl2IHtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5nYy1mb2N1c2VkIC5sZWZ0LWNvbnRhaW5lcjphZnRlciB7XG4gIGJvcmRlci1sZWZ0OiBzb2xpZCAjNjIzYjVhO1xuICBib3JkZXItd2lkdGg6IDVweDtcbn1cblxuLmdjLXJvdy5nYy1mb2N1c2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbn1cblxuLmxlZnQtY29udGFpbmVyIHtcbiAgZmxvYXQ6IGxlZnQ7XG4gIHdpZHRoOiA3NXB4O1xufVxuXG4ubGVmdC1jb250YWluZXI6YWZ0ZXIge1xuICBib3JkZXI6IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItbGVmdDogc29saWQgI2M4ZmZiZTtcbiAgYm9yZGVyLXdpZHRoOiA1cHg7XG4gIGNvbnRlbnQ6IFwiIFwiO1xuICBoZWlnaHQ6IDA7XG4gIGxlZnQ6IDc1cHg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAxMHB4O1xuICB3aWR0aDogMDtcbn1cblxuLnJpZ2h0LWNvbnRhaW5lciB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIG1hcmdpbi1sZWZ0OiA3NXB4O1xuICBtaW4taGVpZ2h0OiA5NnB4O1xuICB3aWR0aDogNjAwcHg7XG59XG5cbi5kYXkge1xuICBjb2xvcjogIzMzMztcbiAgZm9udC1zaXplOiAyLjVlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4ud2VlayB7XG4gIGNvbG9yOiAjMzMzO1xuICBmb250LXNpemU6IDEuMWVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5tb250aCB7XG4gIGNvbG9yOiAjOTk5O1xuICBmb250LXNpemU6IDAuOGVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi50aXRsZSB7XG4gIGNvbG9yOiAjNjIzYjVhO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5jb250ZW50IHtcbiAgY29sb3I6ICM3Nzc7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG4ubm90ZSxcbi5tZWRpY2luZSxcbi5tb29kcyB7XG4gIHBhZGRpbmc6IDVweCAxMHB4O1xufSJdfQ== */