The Calendar sample application demonstrates how you can display the calendar month by month in your application.
The following figure illustrates the main screen of the Calendar.
Figure: Calendar screen
The application contains one screen that displays the selected month. After the application starts, the current month is displayed. Click the Prev and Next buttons to view the previous and next month respectively. The Today button shows the current month.
Source Files
You can create and view the sample application project including the source files in the IDE.
| File name | Description |
|---|---|
| config.xml | This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu. |
| css/style.css | This file contains the CSS styling for the application UI. |
| index.html | This is a starting file from which the application starts loading. It contains the layout of the application screens. |
| js/ | This directory contains the application code. |
| js/core/ | This directory contains the application framework. |
| js/helpers/date.js | This file contains functions related to the date operations. |
| js/models/date.js | This file contains functions related to the current date. |
| js/models/month.js | This file contains the function that returns the month matrix. |
| js/views/init.js | This file contains code that initializes the application. |
| js/views/monthPage.js | This file contains code that handles interaction with the month page. |
| lib/ | This directory contains external libraries (TAU library). |
| templates/ | This directory contains layouts of the application screens and templates for smaller elements of user interface. |
Implementation
After application start and after every button click, the getDaysMatrix function is called. It fills the data matrix with the day numbers. The length of the matrix is constant and equals the week length.
/* js/models/month.js */
var DAYS_IN_WEEK = 7;
/**
* Creates a matrix of days in months
* Example: [ [29,30,1,2,3,4,5], [6,7,8,9,10,11,12], ...]
* @param {Date} date Date object.
* @return {array} daysMatrix Days matrix.
*/
function getDaysMatrix(date)
{
var daysNumber = d.daysInMonth(date),
daysPad = d.getFirstDay(date),
previous = d.getPreviousMonth(date),
previousDaysNumber = d.daysInMonth(previous),
rowsLength = Math.ceil((daysNumber + daysPad) / DAYS_IN_WEEK),
data = [],
daysMatrix = [],
start = 0,
next = 1,
i = 1,
j = 0;
/* Previous month days fill */
while (daysPad--)
{
data.push(getDayData(date, previousDaysNumber - daysPad, -1));
}
/* Current month's days */
for (i; i <= daysNumber; i = i + 1)
{
data.push(getDayData(date, i, 0));
}
/* Next month days fill */
while (data.length % DAYS_IN_WEEK)
{
data.push(getDayData(date, next++, 1));
}
for (j = 0; j < rowsLength; j = j + 1)
{
start = j * DAYS_IN_WEEK;
daysMatrix.push(data.slice(start, start + DAYS_IN_WEEK));
}
return daysMatrix;
}