Page Example

Calendar Sample Overview

Mobile Web

Related Info

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

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 the interaction with the month page.
lib/ This directory contains external libraries (TAU library).
templates/ This directory contains the layouts of the application screens and templates for the smaller elements of the user interface.

Implementation

The getDaysMatrix() method is called after the application start and after every button click. 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's days */
   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's days */
   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;
}

Layout Implementation

The Calendar sample application contains a single screen that organizes the calendar data in the monthly view.

The screen contains the following elements:

  • div element with the month-header ID displays the name of the month and the number of the year.
  • div element with the month-content ID displays the days of the selected month.
  • div element with month-footer ID displays the navigation buttons that enable switching between months.
<!--index.html-->
<div class="ui-page ui-page-active invisible" id="month-page">
   <div class="ui-header" id="month-header" data-position="fixed">
      <h2 id="month-name" class="ui-title"></h2>
   </div>
   <div class="ui-content" id="month-content"></div>
   <div class="ui-footer" id="month-footer">
      <div class="ui-tabbar">
         <ul>
            <li><a id="prev-month-btn">Prev</a></li>
            <li><a id="current-month-btn">Today</a></li>
            <li><a id="next-month-btn">Next</a></li>
         </ul>
      </div>
   </div>
</div>

Navigation Between Months

To switch between months, the user clicks the buttons in the application footer. To handle the month switching, the application registers event listeners to the navigation buttons.

When a button is clicked, the application updates the current date using the setCurrentDate() method of the js/models/date.js module. The application uses the getPreviousMonth(), getNextMonth(), and getCurrentDateTime() methods of the js/helpers/date.js module to get the month information.

/* js/views/monthPage.js */
var prevBtn = null,
    currentBtn = null,
    nextBtn = null;

function onPrevMonthBtnTap() 
{
   var currentDate = dateModel.getCurrentDate(),
       prevMonthDate = d.getPreviousMonth(currentDate);

   dateModel.setCurrentDate(prevMonthDate);
   createView();
}

function onNextMonthBtnTap() 
{
   var currentDate = dateModel.getCurrentDate(),
       nextMonthDate = d.getNextMonth(currentDate);

   dateModel.setCurrentDate(nextMonthDate);
   createView();
}

function onCurrentMonthBtnTap() 
{
   dateModel.setCurrentDate(d.getCurrentDateTime());
   createView();
}

function bindEvents() 
{
   prevBtn.addEventListener('click', onPrevMonthBtnTap);
   currentBtn.addEventListener('click', onCurrentMonthBtnTap);
   nextBtn.addEventListener('click', onNextMonthBtnTap);
}

function init() 
{
   prevBtn = document.getElementById('prev-month-btn');
   currentBtn = document.getElementById('current-month-btn');
   nextBtn = document.getElementById('next-month-btn');
   bindEvents();
}

When the current date is set, the application calls the createView() method to perform the UI update:

  • The setHeader() method updates the information displayed in the application header. It obtains the current date using the getCurrentDate() method of the js/helpers/date.js module. When the current date is known, the innerHTML attribute of the monthName HTML element is updated using the getMonthName() method of the js/helpers/date.js module and the getFullYear() method provided by the JavaScript API.

  • The prepareTables() method uses an empty monthTable.tpl template and adds it to the innerHTML property of the monthContent HTML element.

  • The fillTables() method uses the empty table created using the prepareTables() method and fills it with values corresponding to the days of the selected month.

  • The markDay() method displays the current day on the table. For this purpose, the application maintains the data-date attribute for each HTML element representing the day on the displayed table. The application finds the element that contains the data-date attribute with a value equal to the current day. If such an element exists on the displayed table, the markDay() method adds to it the CSS class.

/* js/views/monthPage.js */
function setHeader() 
{
   var date = dateModel.getCurrentDate();

   monthName.innerHTML = d.getMonthName(date) + ' ' +
      date.getFullYear();
}

function prepareTables() 
{
   monthContent.innerHTML = t.get('monthTable', {id: 'month'});
}

function fillTables() 
{
   var date = dateModel.getCurrentDate();
   fillTable(date, 'month');
}

function markDay(date, className) 
{
   var dateString = typeof date === 'string' ?
            date : d.toDataString(date),
      today = document.querySelector('[data-date="' + dateString + '"]');

   if (today) 
   {
      today.classList.add(className);
   }
}

function createView() 
{
   setHeader();
   prepareTables();
   fillTables();
   markDay(d.getCurrentDateTime(), DAY_TODAY_CLS);
}