Showing current time

The Clock widget presents current time and date in a form of a digital clock. It can be periodically synchronized with an external source using AJAX requests. If the AJAX server is not specified, time from the local device is used.

The Clock widget presents current time and date in a form of a digital clock. It can be periodically synchronized with an external source using AJAX requests. If the AJAX server is not specified, time from the local device is used.

Visual appearance

The clock digits, separators, AM/PM indicators, as well as the day and month names can be represented as a text, or as images. However, the day and month names are either English or specified by you, regardless of the end-user preferences and browser settings.

A Clock widget can be placed within other data containing widgets, for example carousel, popup, tabs or ticker tape.

User interactions

The user can force a clock to synchronize its time with an external source.

XDIME 2 elements

The Clock widget is defined by the widget:digital-clock element. It may contain the widget:clock-content elements which may specify custom markup, for example text or image policies, for the parts of the clock, such as digits and separators. Each widget:clock-content must contain the type and the corresponding value attributes. The list of available types and their values can be found in The following table.

Type Value
digit Numbers from 0 to 9
day Numbers from 1 (Sunday) to 7 (Saturday)
month Numbers from 1 (January) to 12 (December)
ampm am or pm
separator Numbers from 1 (the first separator) to n (the last separator)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:clock-content</title>
  </head>
  <body>
    <widget:digital-clock id="myClockDoW">
      <widget:clock-content type="day" value="1">Sunday</widget:clock-content>
      <widget:clock-content type="day" value="2">Monday</widget:clock-content>
      <widget:clock-content type="day" value="3">Tuesday</widget:clock-content>
      <widget:clock-content type="day" value="4">Wednesday</widget:clock-content>
      <widget:clock-content type="day" value="5">Thursday</widget:clock-content>
      <widget:clock-content type="day" value="6">Friday</widget:clock-content>
      <widget:clock-content type="day" value="7">Saturday</widget:clock-content>
    </widget:digital-clock>
  </body>
</html>

The widget:refresh element can be used to periodically synchronize time with an external source using AJAX requests. A time synchronization service must generate responses in the following form. It needs to return time in milliseconds since the standard base time: January 1, 1970, 00:00:00 GMT.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head>
    <response:link rel="mcs:theme" href="/main.mthm"/>
  </response:head>
  <response:body>
    <response:clock>[2007,2,1,10,25,2,1172744702507]</response:clock>
  </response:body>
</response:response>

Styling the widget

You use the mcs-datetime-format property to format time and date. The following table lists its parameters.

Parameter Description
%Y A full, 4 digits, numerical representation of a year
%y A two digits representation of a year
%F A full textual representation of a month, for example January or February.
%m Numerical representation of a month, with leading zero
%D A textual representation of a day
%d Day of the month from 01 to 31, i.e. 2 digits with a leading zero
%h 12-hour format of an hour with a leading zero
%H 24-hour format of an hour with a leading zero
%i Minutes with a leading zero
%s Seconds with a leading zero
%S Milliseconds with a leading zero
%A Ante Meridiem and Post Meridiem indicator
%1, %[n] First and n-th separator

The following is an example of the time and date format set by the mcs-datetime-format property.

mcs-datetime-format='%D %d %F %Y %h:%i:%s'
Thu 09 November 2006 13:53:27 

The counting precision is limited by the value of the mcs-frame-rate property.

Non-client fallback

If a device does not support the Clock widget then it is ignored and does not produce any markup.

Related topics