Day Planner

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.

<p>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.</p> <p>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.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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== */