Page Example

Event Manager Sample Overview

The Event Manager sample application demonstrates how you can add, edit, and delete calendar events in your application.

The following figure illustrates the main screens of the Event Manager.

Figure: Event Manager screens

Event Manager screens

The application opens with the Event Manager main screen, where all registered calendar events (for specified date) are displayed with detailed info including the event name, start date, and end date. Each list entry has two buttons that allow editing or removing the selected event.

To show events for a specific date, click the date field below application header, select the date and confirm with the Set button. The application filters the events and shows the list for the selected date.

To add a new event, click the New Event button. Enter the event name, select the event type (period, all day), and select the start and end dates. To set an alarm for the event, click the Set button and select the proper time on the Set alarm screen. Finally confirm the event data with the Save button.

To edit an event, click the Edit icon next to the event entry on the main screen. Apply changes on the Event details screen and confirm them by clicking the Save button.

To remove an event, click the Remove icon next to the event entry on the main screen.

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.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
app.js This is a starting file from which the JavaScript code starts loading.
js/ This directory contains the application code.
js/helpers/duration.js This file contains functions that help with the conversion to and from tizen.TimeDuration object.
js/models/calendar.js This file contains functions that help working with the Calendar API.
js/models/date.js This file contains functions that help working with the Time API.
js/models/filter.js This file contains functions that help working with the filters.
js/views/alarm.js This file contains code that handles interaction with the alarm page.
js/views/edit.js This file contains code that handles interaction with the edit page.
js/views/main.js This file contains code that handles interaction with the main page.
js/views/popup.js This file contains code that handles interaction with popups.
js/core/ This directory contains the application framework.
lib/ This directory contains external libraries (TAU library).
css/style.css This file contains the CSS styling for the application UI.
templates/ This directory contains layouts of the application screens and templates for smaller elements of the user interface.
images/ This directory contains the images used to create the user interface.

Implementation

When the application starts, the calendar instance is retrieved.

/* js/models/calendar.js */
try 
{
   defaultCalendar = tizen.calendar.getDefaultCalendar('EVENT');
} catch (error) 
{
   (...)
}

After that, a change listener is registered using the addChangeListener() function.

/* js/views/main.js */
changeListener = 
{
   /* Called when new items are added */
   onitemsadded: function onItemsAdded() 
   {
      getEvents();
   },
   /* Called when items are updated */
   onitemsupdated: function onItemsUpdated() 
   {
      getEvents();
   },
   /* Called when items are removed */
   onitemsremoved: function onItemsRemoved() 
   {
      getEvents();
   }
};

/* js/models/calendar.js */
/**
* Adds a callback for the change listener
* @param {object} changeCallback
* @returns {number} Listener ID
*/
function addChangeListener(changeCallback) 
{
   try 
   {
      return defaultCalendar.addChangeListener(changeCallback);
   } 
   catch (error) 
   {
      (...)
   }
}

At the start of the application, the getEvents() function is also invoked. It reads the value of the date picker component placed in the header on the main screen. Afterwards the find() function from the calendar is invoked with the proper callback and date filter passed as parameters.

/* js/views/main.js */
/* Retrieves the filtered events from the calendar */
function getEvents() 
{
   var eventFilter = document.getElementById('event-filter');

   calendar.find(onEventsFound, filter.getDateFilter(new Date(eventFilter.value)));
}

/* js/models/calendar.js */
/**
* Finds events in the calendar by a given filter
* @param {function} successCB Called when find returns data
* @param {tizen.CompositeFilter} filter Filter for returned events
*/
function find(successCB, filter) 
{
   var sortingMode = null;
   try 
   {
      sortingMode = new tizen.SortMode('startDate', 'ASC');
      defaultCalendar.find(successCB, errorCallback, filter, sortingMode);
   } 
   catch (error) 
   {
      (...)
   }
}

The filters are very useful in finding events with a specific data. There are simple filters like tizen.AttributeRangeFilter, which is used to find data between two values. A more advanced filter, tizen.CompositeFilter, is used to group multiple filters into one.

/* js/models/filter.js */
/**
* Creates a filter for selecting events on the given day
* @param {Date} date
* @return {tizen.CompositeFilter}
*/
function getDateFilter(date) 
{
   try 
   {
      var beginOfToday = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0),
          endOfToday = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999),
          startsBeforeEndOfToday = new tizen.AttributeRangeFilter('startDate', null, endOfToday),
          endsAfterBeginOfToday = new tizen.AttributeRangeFilter('endDate', beginOfToday, null);

      return filtersIntersection([startsBeforeEndOfToday, endsAfterBeginOfToday]);
   } 
   catch (error) 
   {
      (...)
   }
}

/**
* Creates an intersection of filters
* @param {AbstractFilter[]} arr
* @returns {tizen.CompositeFilter}
*/
function filtersIntersection(arr) 
{
   try 
   {
      return new tizen.CompositeFilter('INTERSECTION', arr);
   } 
   catch (error) 
   {
      (...)
   }
}

New events can be added to the calendar by clicking the New Event button on the main page. This invokes the add() function in the Calendar API. Optionally, an alarm can be set to let you know about the event.

/* js/models/calendar.js */
/**
* Adds new event to default calendar
* @param {string} summary Event summary
* @param {boolean} isAllDay Is event all day
* @param {tizen.TZDate} startDate Event start date
* @param {tizen.TZDate} endDate Event end date
* @param {tizen.CalendarAlarm} alarm Event alarm
* @returns {tizen.CalendarEvent} Created calendar event
*/
function add(summary, isAllDay, startDate, endDate, alarm) 
{
   var item = null;
   try 
   {
      item = new tizen.CalendarEvent(
      {
         summary: summary,
         isAllDay: isAllDay,
         startDate: startDate,
         endDate: endDate,
         alarms: [alarm]
      });
      defaultCalendar.add(item);

      return item;
   } 
   catch (error) 
   {
      (...)
   }
}

/**
* Returns an alarm object for the given time duration
* @param {tizen.TimeDuration} timeDuration Time duration
* @returns {tizen.CalendarAlarm} Created alarm
*/
function createAlarm(timeDuration) 
{
   try 
   {
      return new tizen.CalendarAlarm(timeDuration, 'SOUND');
   } 
   catch (error) 
   {
      (...)
   }
}

The events can be also updated by retrieving an instance of the event from the calendar, updating the fields, and invoking the update() method.

/* js/models/calendar.js */
/**	
* Updates the calendar event
* @param {number} id ID of the event to update
* @param {string} summary Event summary
* @param {boolean} isAllDay Is event all day
* @param {tizen.TZDate} startDate Event start date
* @param {tizen.TZDate} endDate Event end date
* @param {tizen.CalendarAlarm} alarm Event alarm
*/
function update(id, summary, isAllDay, startDate, endDate, alarm) 
{
   var item = get(id);
   try 
   {
      item.summary = summary;
      item.isAllDay = isAllDay;
      item.startDate = startDate;
      item.endDate = endDate;
      item.alarms = [alarm];
      defaultCalendar.update(item);
   } 
   catch (error) 
   {
      (...)
   }
}

/**
* Retrieves an event with the given ID from the calendar
* @param {number} id Event ID
* @returns {tizen.CalendarEvent} Event retrieved from calendar
*/
function get(id) 
{
   try 
   {
      return defaultCalendar.get(new tizen.CalendarEventId(id));
   } 
   catch (error) 
   {
      (...)
   }
}

Removing an event from the calendar can be done by simply passing the event ID to the remove() function.

/* js/models/calendar.js */
/**
* Removes an event with the given ID from the calendar.
* @param {number} id Event ID
*/
function remove(id) 
{
   try 
   {
      defaultCalendar.remove(new tizen.CalendarEventId(id));
   } 
   catch (error) 
   {
      (...)
   }
}