EventManager Overview

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

For information on creating the sample application project in the IDE, see Creating Sample Applications, and on the coding of the sample application, see Event Manager task.

The following figure illustrates the main screens of the EventManager.

Figure: EventManager screens

EventManager 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 stars loading. It contains the layout of the application screens.
app.js	This is a starting file from which the JavaScript code stars 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 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) 
   {
      (...)
   }
}