Calendar Display Demo


Calendar Display Demo

In this demo, I am integrating HTML5, CSS and JavaScript into FileMaker web viewers to display Event records in a Calendar Display view.

I thought it might be more intuitive to display all my Tasks in a calendar view instead of looking at them in a list or a portal. So I found a Javascript driven HTML calendar and emulated the HTML required within my FileMaker calcs. So one FileMaker calculation results in the fully formatted HTML required to display my events in a dynamic calendar.

We ‘localized’ the javascript, API Code and javascript function and reference each within the HTML calc we use in the web viewer. Then we set all the js and css values to local memory upon login to improve performance.

This can run on a network in FileMaker Pro or stand alone, all WITHOUT web access and even on FileMaker Go.

Here is the source HTML I used:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=”stylesheet” href=”css/master.css” type=”text/css” media=”screen” charset=”utf-8″ />
<script src=”js/jquery-1.3.min.js” type=”text/javascript”> </script>
<script src=”js/coda.js” type=”text/javascript”> </script>
</head>
<body>
<table cellspacing=”0″>
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class=”padding” colspan=”3″></td>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td class=”today”> 9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td class=”date_has_event”>
13
<div class=”events”>
<ul>
<li>
<span class=”title”>Event 1</span>
<span class=”desc”>Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class=”title”>Event 2</span>
<span class=”desc”>Excepteur sint occaecat cupidatat non proident.</span>
</li>
</ul>
</div>
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class=”date_has_event”>
22
<div class=”events”>
<ul>
<li>
<span class=”title”>Event 1</span>
<span class=”desc”>Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class=”title”>Event 2</span>
<span class=”desc”>Excepteur sint occaecat cupidatat non proident.</span>
</li>
</ul>
</div>
</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class=”padding”></td>
</tr>
</tbody>
<tfoot>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tfoot>
</table>
</body>
</html>

Print Friendly