From b18500d1338eb0538c9886069a7eda97f86c0832 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 25 May 2011 11:22:16 +0200 Subject: [PATCH] calendar improvements (api, css, utc) --- demos/calendar/js/calendar.js | 241 ++++++++++---------- source/Ox.UI/css/Ox.UI.css | 16 +- source/Ox.UI/js/Calendar/Ox.Calendar.js | 168 ++++++++------ source/Ox.UI/js/Calendar/Ox.CalendarDate.js | 1 + source/Ox.js | 21 ++ 5 files changed, 253 insertions(+), 194 deletions(-) diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js index b3d4f527..115bd65d 100644 --- a/demos/calendar/js/calendar.js +++ b/demos/calendar/js/calendar.js @@ -13,128 +13,131 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'} Ox.Calendar({ date: new Date(0), - dates: [ - {name: 'Genghis Khan', start: '1162', stop: '1228', type: 'Person'}, - {name: 'Marco Polo', start: '1254', stop: '1324-01-08', type: 'Person'}, - {name: 'Columbus', start: '1451-08-22', stop: '1506-05-20', type: 'Person'}, - {name: 'Da Vinci', start: '1452-04-15', stop: '1519-05-02', type: 'Person'}, - {name: 'Michelangelo', start: '1475-03-06', stop: '1564-02-18', type: 'Person'}, - {name: 'Bruegel', start: '1525', stop: '1569-09-09', type: 'Person'}, - {name: 'Galilei', start: '1564-02-15', stop: '1642-01-08', type: 'Person'}, - {name: 'Shakespeare', start: '1564-04-26', stop: '1616-04-23', type: 'Person'}, - {name: 'Descartes', start: '1596-03-31', stop: '1650-02-11', type: 'Person'}, - {name: 'Velazquez', start: '1599-06-06', stop: '1660-08-06', type: 'Person'}, - {name: 'Vermeer', start: '1632-10-31', stop: '1675-12-15', type: 'Person'}, - {name: 'Spinoza', start: '1632-11-24', stop: '1677-02-21', type: 'Person'}, - {name: 'Louix XIV', start: '1638-09-05', stop: '1715-09-01', type: 'Person'}, - {name: 'Newton', start: '1643-01-04', stop: '1727-03-31', type: 'Person'}, - {name: 'Leibniz', start: '1646-07-01', stop: '1716-11-14', type: 'Person'}, - {name: 'Kant', start: '1724-04-22', stop: '1804-02-12', type: 'Person'}, - {name: 'Napoleon', start: '1769-08-15', stop: '1821-05-05', type: 'Person'}, - {name: 'Hegel', start: '1770-08-27', stop: '1831-11-14', type: 'Person'}, - {name: 'Darwin', start: '1809-02-12', stop: '1882-04-19', type: 'Person'}, - {name: 'Marx', start: '1818-05-05', stop: '1883-03-14', type: 'Person'}, + events: [ + {name: 'The Epoch', start: '1970-01-01 00:00:00', end: '1970-01-01 00:00:01'}, + + + {name: 'Genghis Khan', start: '1162', end: '1228', type: 'Person'}, + {name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'Person'}, + {name: 'Columbus', start: '1451-08-22', end: '1506-05-20', type: 'Person'}, + {name: 'Da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'Person'}, + {name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'Person'}, + {name: 'Bruegel', start: '1525', end: '1569-09-09', type: 'Person'}, + {name: 'Galilei', start: '1564-02-15', end: '1642-01-08', type: 'Person'}, + {name: 'Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'Person'}, + {name: 'Descartes', start: '1596-03-31', end: '1650-02-11', type: 'Person'}, + {name: 'Velazquez', start: '1599-06-06', end: '1660-08-06', type: 'Person'}, + {name: 'Vermeer', start: '1632-10-31', end: '1675-12-15', type: 'Person'}, + {name: 'Spinoza', start: '1632-11-24', end: '1677-02-21', type: 'Person'}, + {name: 'Louix XIV', start: '1638-09-05', end: '1715-09-01', type: 'Person'}, + {name: 'Newton', start: '1643-01-04', end: '1727-03-31', type: 'Person'}, + {name: 'Leibniz', start: '1646-07-01', end: '1716-11-14', type: 'Person'}, + {name: 'Kant', start: '1724-04-22', end: '1804-02-12', type: 'Person'}, + {name: 'Napoleon', start: '1769-08-15', end: '1821-05-05', type: 'Person'}, + {name: 'Hegel', start: '1770-08-27', end: '1831-11-14', type: 'Person'}, + {name: 'Darwin', start: '1809-02-12', end: '1882-04-19', type: 'Person'}, + {name: 'Marx', start: '1818-05-05', end: '1883-03-14', type: 'Person'}, ///* - {name: 'Gandhi', start: '1869-10-02', stop: '1948-01-30', type: 'Person'}, - {name: 'Lenin', start: '1870-04-22', stop: '1924-01-21', type: 'Person'}, - {name: 'Stalin', start: '1878-12-18', stop: '1953-03-05', type: 'Person'}, - {name: 'Einstein', start: '1879-03-14', stop: '1955-04-18', type: 'Person'}, - {name: 'Picasso', start: '1881-10-25', stop: '1973-04-08', type: 'Person'}, - {name: 'Roosevelt', start: '1882-01-30', stop: '1945-04-12', type: 'Person'}, - {name: 'Hitler', start: '1889-04-20', stop: '1945-04-30', type: 'Person'}, - {name: 'Hitchcock', start: '1899-08-13', stop: '1980-04-29', type: 'Person'}, - {name: 'Turing', start: '1912-06-23', stop: '1954-06-07', type: 'Person'}, - {name: 'Kennedy', start: '1917-05-29', stop: '1963-11-22', type: 'Person'}, - {name: 'Deleuze', start: '1925-01-18', stop: '1995-11-04', type: 'Person'}, - {name: 'Warhol', start: '1928-08-06', stop: '1987-02-22', type: 'Person'}, - {name: 'Debord', start: '1931-12-28', stop: '1994-11-30', type: 'Person'}, + {name: 'Gandhi', start: '1869-10-02', end: '1948-01-30', type: 'Person'}, + {name: 'Lenin', start: '1870-04-22', end: '1924-01-21', type: 'Person'}, + {name: 'Stalin', start: '1878-12-18', end: '1953-03-05', type: 'Person'}, + {name: 'Einstein', start: '1879-03-14', end: '1955-04-18', type: 'Person'}, + {name: 'Picasso', start: '1881-10-25', end: '1973-04-08', type: 'Person'}, + {name: 'Roosevelt', start: '1882-01-30', end: '1945-04-12', type: 'Person'}, + {name: 'Hitler', start: '1889-04-20', end: '1945-04-30', type: 'Person'}, + {name: 'Hitchcock', start: '1899-08-13', end: '1980-04-29', type: 'Person'}, + {name: 'Turing', start: '1912-06-23', end: '1954-06-07', type: 'Person'}, + {name: 'Kennedy', start: '1917-05-29', end: '1963-11-22', type: 'Person'}, + {name: 'Deleuze', start: '1925-01-18', end: '1995-11-04', type: 'Person'}, + {name: 'Warhol', start: '1928-08-06', end: '1987-02-22', type: 'Person'}, + {name: 'Debord', start: '1931-12-28', end: '1994-11-30', type: 'Person'}, //*/ /* - {name: 'Test', start: new Date('1970-01-01'), stop: new Date('1970-01-02')}, - {name: 'Battle of Hastings', start: new Date('1066-10-14'), stop: new Date('1066-10-15')}, - {name: 'Renaissance', start: new Date('1300'), stop: new Date('1700')}, - {name: 'Spanish Inquisition', start: new Date('1480-09-27'), stop: new Date('1820-03-10')}, - {name: 'Discovery of America', start: new Date('1492'), stop: new Date('1493')}, - {name: 'East India Company', start: new Date('1600'), stop: new Date('1874')}, - {name: 'Thirty Years\' War', start: new Date('1618'), stop: new Date('1649')}, - {name: 'Declaration of Independence', start: new Date('1776-07-04'), stop: new Date('1776-07-05')}, - {name: 'French Revolution', start: new Date('1789'), stop: new Date('1800')}, - {name: 'Storming of the Bastille', start: new Date('1789-07-14'), stop: new Date('1789-07-15')}, - {name: 'Napoleonic Era', start: new Date('1799-11-09'), stop: new Date('1815-06-29')}, - {name: 'The Year Without a Summer', start: new Date('1816'), stop: new Date('1817')}, - {name: 'Queen Victoria', start: new Date('1837-06-20'), stop: new Date('1901-01-23')}, - {name: 'Crimean War', start: new Date('1853-10'), stop: new Date('1856-03')}, - {name: 'American Civil War', start: new Date('1861-04-12'), stop: new Date('1865-04-10')}, - {name: 'Franco-Prussian War', start: new Date('1870-07-19'), stop: new Date('1871-05-11')}, - {name: 'Paris Commune', start: new Date('1871-03-18'), stop: new Date('1871-05-29')}, - {name: 'Congo Free State', start: new Date('1885-07-11'), stop: new Date('1908-11-16')}, - {name: '20th century', start: new Date('1900'), stop: new Date('2000')}, - {name: 'Titanic', start: new Date('1912-04-15'), stop: new Date('1912-04-16')}, - {name: 'World War One', start: new Date('1914-07-28'), stop: new Date('1918-11-12')}, - {name: 'Battle of Verdun', start: new Date('1916-02-21'), stop: new Date('1916-12-19')}, - {name: 'Russian Revolution', start: new Date('1917'), stop: new Date('1918')}, - {name: 'October Revolution', start: new Date('1917-11-07'), stop: new Date('1917-11-09')}, - {name: 'Spanish Flu', start: new Date('1918'), stop: new Date('1919')}, - {name: 'Weimar Republic', start: new Date('1918-11-09'), stop: new Date('1933-01-30')}, - {name: 'Treaty of Versailles', start: new Date('1919-06-28'), stop: new Date('1919-06-29')}, - {name: '1920s', start: new Date('1920'), stop: new Date('1930')}, - {name: 'Soviet Union', start: new Date('1922-12-30'), stop: new Date('1991-12-27')}, - {name: 'The Third Reich', start: new Date('1933-01-30'), stop: new Date('1945-05-09')}, - {name: 'Spanish Civil War', start: new Date('1936-07-17'), stop: new Date('1939-04-02')}, - {name: '1936 Summer Olympics', start: new Date('1936-08-01'), stop: new Date('1936-08-17')}, - {name: 'Hindenburg', start: new Date('1937-05-06'), stop: new Date('1937-05-07')}, - {name: 'World War Two', start: new Date('1939-09-01'), stop: new Date('1945-09-03')}, - {name: 'Pearl Harbour', start: new Date('1941-12-07'), stop: new Date('1941-12-08')}, - {name: 'Wannsee Conference', start: new Date('1942-01-20'), stop: new Date('1942-01-21')}, - {name: 'Battle of Stalingrad', start: new Date('1942-08-23'), stop: new Date('1943-02-03')}, - {name: 'D-Day', start: new Date('1944-06-06'), stop: new Date('1944-06-07')}, - {name: 'Liberation of Auschwitz', start: new Date('1945-01-27'), stop: new Date('1945-01-28')}, - {name: 'Hiroshima', start: new Date('1945-08-06'), stop: new Date('1945-08-07')}, - {name: 'Nagasaki', start: new Date('1945-08-09'), stop: new Date('1945-08-10')}, - {name: 'Nuremburg Trials', start: new Date('1945-11-20'), stop: new Date('1946-10-02')}, - {name: 'Fourth Republic', start: new Date('1946-10-14'), stop: new Date('1958-10-05')}, - {name: 'West Germany', start: new Date('1949-05-23'), stop: new Date('1990-10-03')}, - {name: 'Korean War', start: new Date('1950-06-25'), stop: new Date('1953-07-28')}, - {name: 'Cuban Revolution', start: new Date('1953-07-26'), stop: new Date('1959-01-02')}, - {name: 'Algerian War', start: new Date('1954-11-01'), stop: new Date('1962-03-20')}, - {name: 'Vietnam War', start: new Date('1955-11-01'), stop: new Date('1975-05-01')}, - {name: '1960s', start: new Date('1960-01-01'), stop: new Date('1970-01-01')}, - {name: 'Eichmann Trial', start: new Date('1961-04-11'), stop: new Date('1961-08-15')}, - {name: 'Bay of Pigs', start: new Date('1961-04-17'), stop: new Date('1961-04-20')}, - {name: 'Berlin Wall', start: new Date('1961-08-13'), stop: new Date('1989-11-09')}, - {name: 'Cuban Missile Crisis', start: new Date('1962-10'), stop: new Date('1962-12')}, - {name: 'Assassination of John F. Kennedy', start: new Date('1963-11-22'), stop: new Date('1963-11-23')}, - {name: 'Sgt. Pepper', start: new Date('1967-06-01'), stop: new Date('1967-06-02')}, - {name: 'Assassination of Benno Ohnesorg', start: new Date('1967-06-02'), stop: new Date('1967-06-03')}, - {name: 'Six-Day War', start: new Date('1967-06-05'), stop: new Date('1967-06-11')}, - {name: '1968', start: new Date('1968-01-01'), stop: new Date('1969-01-01')}, - {name: 'My Lai', start: new Date('1968-03-16'), stop: new Date('1968-03-17')}, - {name: 'Assassination of Martin Luther King', start: new Date('1968-04-04'), stop: new Date('1968-04-05')}, - {name: 'Assassination of Rudi Dutschke', start: new Date('1968-04-11'), stop: new Date('1968-04-12')}, - {name: 'May 1968', start: new Date('1968-05-01'), stop: new Date('1968-06-01')}, - {name: '1968 Cannes Film Festival', start: new Date('1968-05-10'), stop: new Date('1968-05-20')}, - {name: 'Valerie Solanas', start: new Date('1968-06-03'), stop: new Date('1968-06-04')}, - {name: 'Assassination of Robert F. Kennedy', start: new Date('1968-06-05'), stop: new Date('1968-06-06')}, - {name: '1968 Summer Olympics', start: new Date('1968-10-12'), stop: new Date('1968-10-28')}, - {name: 'Apollo 11', start: new Date('1969-07-16'), stop: new Date('1969-07-25')}, - {name: 'Moon Landing', start: new Date('1969-07-20'), stop: new Date('1969-07-21')}, - {name: 'The Epoch', start: new Date('1970-01-01 00:00:00'), stop: new Date('1970-01-01 00:00:01')}, - {name: '1970s', start: new Date('1970-01-01'), stop: new Date('1980-01-01')}, - {name: '1972 Summer Olympics', start: new Date('1972-08-26'), stop: new Date('1972-09-11')}, - {name: 'Apollo 17', start: new Date('1972-12-07'), stop: new Date('1972-12-20')}, - {name: 'World Trade Center', start: new Date('1973-04-04'), stop: new Date('2001-09-11')}, - {name: '1980s', start: new Date('1980-01-01'), stop: new Date('1990-01-01')}, - {name: 'Iran-Iraq War', start: new Date('1980-09-22'), stop: new Date('1988-08-21')}, - {name: 'Tschernobyl', start: new Date('1986-04-26'), stop: new Date('1986-04-27')}, - {name: 'Fall of the Berlin Wall', start: new Date('1989-11-09'), stop: new Date('1989-11-10')}, - {name: 'Gulf War', start: new Date('1990-08-02'), stop: new Date('1991-03-01')}, - {name: 'Clinton Presidency', start: new Date('1993-01-20'), stop: new Date('2001-01-20')}, - {name: 'German Reunification', start: new Date('1990-10-03'), stop: new Date('1990-10-04')}, - {name: 'The Battle of Seattle', start: new Date('1999-11-30'), stop: new Date('1999-12-01')}, - {name: 'George W. Bush', start: new Date('2001-01-20'), stop: new Date('2009-01-20')}, - {name: 'Carlo Giuliani', start: new Date('2001-07-20'), stop: new Date('2001-07-21')}, - {name: '9-11', start: new Date('2001-09-11'), stop: new Date('2001-09-12')}, - {name: 'Fukushima', start: new Date('2011-03-11'), stop: new Date('2011-03-12')} + {name: 'Test', start: new Date('1970-01-01'), end: new Date('1970-01-02')}, + {name: 'Battle of Hastings', start: new Date('1066-10-14'), end: new Date('1066-10-15')}, + {name: 'Renaissance', start: new Date('1300'), end: new Date('1700')}, + {name: 'Spanish Inquisition', start: new Date('1480-09-27'), end: new Date('1820-03-10')}, + {name: 'Discovery of America', start: new Date('1492'), end: new Date('1493')}, + {name: 'East India Company', start: new Date('1600'), end: new Date('1874')}, + {name: 'Thirty Years\' War', start: new Date('1618'), end: new Date('1649')}, + {name: 'Declaration of Independence', start: new Date('1776-07-04'), end: new Date('1776-07-05')}, + {name: 'French Revolution', start: new Date('1789'), end: new Date('1800')}, + {name: 'Storming of the Bastille', start: new Date('1789-07-14'), end: new Date('1789-07-15')}, + {name: 'Napoleonic Era', start: new Date('1799-11-09'), end: new Date('1815-06-29')}, + {name: 'The Year Without a Summer', start: new Date('1816'), end: new Date('1817')}, + {name: 'Queen Victoria', start: new Date('1837-06-20'), end: new Date('1901-01-23')}, + {name: 'Crimean War', start: new Date('1853-10'), end: new Date('1856-03')}, + {name: 'American Civil War', start: new Date('1861-04-12'), end: new Date('1865-04-10')}, + {name: 'Franco-Prussian War', start: new Date('1870-07-19'), end: new Date('1871-05-11')}, + {name: 'Paris Commune', start: new Date('1871-03-18'), end: new Date('1871-05-29')}, + {name: 'Congo Free State', start: new Date('1885-07-11'), end: new Date('1908-11-16')}, + {name: '20th century', start: new Date('1900'), end: new Date('2000')}, + {name: 'Titanic', start: new Date('1912-04-15'), end: new Date('1912-04-16')}, + {name: 'World War One', start: new Date('1914-07-28'), end: new Date('1918-11-12')}, + {name: 'Battle of Verdun', start: new Date('1916-02-21'), end: new Date('1916-12-19')}, + {name: 'Russian Revolution', start: new Date('1917'), end: new Date('1918')}, + {name: 'October Revolution', start: new Date('1917-11-07'), end: new Date('1917-11-09')}, + {name: 'Spanish Flu', start: new Date('1918'), end: new Date('1919')}, + {name: 'Weimar Republic', start: new Date('1918-11-09'), end: new Date('1933-01-30')}, + {name: 'Treaty of Versailles', start: new Date('1919-06-28'), end: new Date('1919-06-29')}, + {name: '1920s', start: new Date('1920'), end: new Date('1930')}, + {name: 'Soviet Union', start: new Date('1922-12-30'), end: new Date('1991-12-27')}, + {name: 'The Third Reich', start: new Date('1933-01-30'), end: new Date('1945-05-09')}, + {name: 'Spanish Civil War', start: new Date('1936-07-17'), end: new Date('1939-04-02')}, + {name: '1936 Summer Olympics', start: new Date('1936-08-01'), end: new Date('1936-08-17')}, + {name: 'Hindenburg', start: new Date('1937-05-06'), end: new Date('1937-05-07')}, + {name: 'World War Two', start: new Date('1939-09-01'), end: new Date('1945-09-03')}, + {name: 'Pearl Harbour', start: new Date('1941-12-07'), end: new Date('1941-12-08')}, + {name: 'Wannsee Conference', start: new Date('1942-01-20'), end: new Date('1942-01-21')}, + {name: 'Battle of Stalingrad', start: new Date('1942-08-23'), end: new Date('1943-02-03')}, + {name: 'D-Day', start: new Date('1944-06-06'), end: new Date('1944-06-07')}, + {name: 'Liberation of Auschwitz', start: new Date('1945-01-27'), end: new Date('1945-01-28')}, + {name: 'Hiroshima', start: new Date('1945-08-06'), end: new Date('1945-08-07')}, + {name: 'Nagasaki', start: new Date('1945-08-09'), end: new Date('1945-08-10')}, + {name: 'Nuremburg Trials', start: new Date('1945-11-20'), end: new Date('1946-10-02')}, + {name: 'Fourth Republic', start: new Date('1946-10-14'), end: new Date('1958-10-05')}, + {name: 'West Germany', start: new Date('1949-05-23'), end: new Date('1990-10-03')}, + {name: 'Korean War', start: new Date('1950-06-25'), end: new Date('1953-07-28')}, + {name: 'Cuban Revolution', start: new Date('1953-07-26'), end: new Date('1959-01-02')}, + {name: 'Algerian War', start: new Date('1954-11-01'), end: new Date('1962-03-20')}, + {name: 'Vietnam War', start: new Date('1955-11-01'), end: new Date('1975-05-01')}, + {name: '1960s', start: new Date('1960-01-01'), end: new Date('1970-01-01')}, + {name: 'Eichmann Trial', start: new Date('1961-04-11'), end: new Date('1961-08-15')}, + {name: 'Bay of Pigs', start: new Date('1961-04-17'), end: new Date('1961-04-20')}, + {name: 'Berlin Wall', start: new Date('1961-08-13'), end: new Date('1989-11-09')}, + {name: 'Cuban Missile Crisis', start: new Date('1962-10'), end: new Date('1962-12')}, + {name: 'Assassination of John F. Kennedy', start: new Date('1963-11-22'), end: new Date('1963-11-23')}, + {name: 'Sgt. Pepper', start: new Date('1967-06-01'), end: new Date('1967-06-02')}, + {name: 'Assassination of Benno Ohnesorg', start: new Date('1967-06-02'), end: new Date('1967-06-03')}, + {name: 'Six-Day War', start: new Date('1967-06-05'), end: new Date('1967-06-11')}, + {name: '1968', start: new Date('1968-01-01'), end: new Date('1969-01-01')}, + {name: 'My Lai', start: new Date('1968-03-16'), end: new Date('1968-03-17')}, + {name: 'Assassination of Martin Luther King', start: new Date('1968-04-04'), end: new Date('1968-04-05')}, + {name: 'Assassination of Rudi Dutschke', start: new Date('1968-04-11'), end: new Date('1968-04-12')}, + {name: 'May 1968', start: new Date('1968-05-01'), end: new Date('1968-06-01')}, + {name: '1968 Cannes Film Festival', start: new Date('1968-05-10'), end: new Date('1968-05-20')}, + {name: 'Valerie Solanas', start: new Date('1968-06-03'), end: new Date('1968-06-04')}, + {name: 'Assassination of Robert F. Kennedy', start: new Date('1968-06-05'), end: new Date('1968-06-06')}, + {name: '1968 Summer Olympics', start: new Date('1968-10-12'), end: new Date('1968-10-28')}, + {name: 'Apollo 11', start: new Date('1969-07-16'), end: new Date('1969-07-25')}, + {name: 'Moon Landing', start: new Date('1969-07-20'), end: new Date('1969-07-21')}, + {name: 'The Epoch', start: new Date('1970-01-01 00:00:00'), end: new Date('1970-01-01 00:00:01')}, + {name: '1970s', start: new Date('1970-01-01'), end: new Date('1980-01-01')}, + {name: '1972 Summer Olympics', start: new Date('1972-08-26'), end: new Date('1972-09-11')}, + {name: 'Apollo 17', start: new Date('1972-12-07'), end: new Date('1972-12-20')}, + {name: 'World Trade Center', start: new Date('1973-04-04'), end: new Date('2001-09-11')}, + {name: '1980s', start: new Date('1980-01-01'), end: new Date('1990-01-01')}, + {name: 'Iran-Iraq War', start: new Date('1980-09-22'), end: new Date('1988-08-21')}, + {name: 'Tschernobyl', start: new Date('1986-04-26'), end: new Date('1986-04-27')}, + {name: 'Fall of the Berlin Wall', start: new Date('1989-11-09'), end: new Date('1989-11-10')}, + {name: 'Gulf War', start: new Date('1990-08-02'), end: new Date('1991-03-01')}, + {name: 'Clinton Presidency', start: new Date('1993-01-20'), end: new Date('2001-01-20')}, + {name: 'German Reunification', start: new Date('1990-10-03'), end: new Date('1990-10-04')}, + {name: 'The Battle of Seattle', start: new Date('1999-11-30'), end: new Date('1999-12-01')}, + {name: 'George W. Bush', start: new Date('2001-01-20'), end: new Date('2009-01-20')}, + {name: 'Carlo Giuliani', start: new Date('2001-07-20'), end: new Date('2001-07-21')}, + {name: '9-11', start: new Date('2001-09-11'), end: new Date('2001-09-12')}, + {name: 'Fukushima', start: new Date('2011-03-11'), end: new Date('2011-03-12')} */ ], height: window.innerHeight, diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 72fc38f2..0bb07338 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -133,7 +133,7 @@ Calendar position: absolute; } -.OxCalendar .OxDate { +.OxCalendar .OxEvent { position: absolute; height: 16px; text-overflow: ellipsis; @@ -141,9 +141,15 @@ Calendar white-space: nowrap; cursor: pointer; } -.OxCalendar .OxLine > .OxDate { - background: -moz-linear-gradient(top, rgba(255, 64, 64, 0.75), rgba(255, 0, 0, 0.75)); - background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 32, 32, 1)), to(rgba(224, 0, 0, 1))); +.OxCalendar .OxLine > .OxEvent { + border-radius: 2px; + background: -moz-linear-gradient(top, rgba(255, 32, 32, 0.9), rgba(224, 0, 0, 0.9)); + background: -webkit-linear-gradient(top, rgba(255, 32, 32, 0.9), rgba(224, 0, 0, 0.9)); + color: rgb(255, 255, 255); +} +.OxCalendar .OxLine > .OxEvent.OxSelected { + background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(112, 112, 224, 0.9)); + background: -webkit-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(112, 112, 224, 0.9)); } .OxCalendar .OxTimeline { @@ -152,7 +158,7 @@ Calendar //overflow: hidden; } -.OxCalendar .OxTimeline .OxDate { +.OxCalendar .OxTimeline .OxEvent { position: absolute; border-radius: 0; cursor: ew-resize; diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 98c8bf98..4124090e 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -7,21 +7,23 @@ Ox.Calendar Basic calendar object (options, self) -> Calendar object options Options object date UTC Date on which the calendar is centered - dates <[o]|[]> Date objects to be displayed - end End of the event (UTC Date, as string) - name Name of the event - start Start of the event (UTC Date, as string) - type Type of the event (like "person") + events <[o]|[]> Event objects to be displayed + alternativeNames <[s]> Array of alternative names + end End of the event (UTC Date, as string) + id Id of the event + name Name of the event + start Start of the event (UTC Date, as string) + type Type of the event (like "person") height Height in px range <[n]|[100, 5101]> Start and end year of the calendar + selected Id of the selected event width Width in px zoom Initial zoom level self Shared private variable @*/ // Fixme: switch to UTC -// Fixme: in options.dates, replace "stop" with "end" -// Fixme: create a variable-resolution date type (with end that is _inclusive_) +// Fixme: create a variable-resolution event type (with end that is _inclusive_) Ox.Calendar = function(options, self) { @@ -29,9 +31,10 @@ Ox.Calendar = function(options, self) { var that = new Ox.Element({}, self) .defaults({ date: new Date(), - dates: [], + events: [], height: 256, range: [1000, 3000], + selected: '', width: 256, zoom: 8 }) @@ -42,6 +45,12 @@ Ox.Calendar = function(options, self) { height: self.options.height + 'px' }); + self.options.events.forEach(function(event) { + event.id = Ox.isUndefined(event.id) ? Ox.uid() : event.id; + event.start = Ox.parseDate(event.start, true); + event.end = Ox.parseDate(event.end, true); + }); + self.maxZoom = 32; self.minLabelWidth = 80; self.overlayWidths = [Math.round(self.options.width / 16)]; @@ -346,7 +355,7 @@ Ox.Calendar = function(options, self) { } function doubleclick(event, e) { - if ($(e.target).is(':not(.OxLine > .OxDate)')) { + if ($(e.target).is(':not(.OxLine > .OxEvent)')) { if (self.options.zoom < self.maxZoom) { self.options.date = new Date( (+self.options.date + +getMouseDate(e)) / 2 @@ -358,7 +367,7 @@ Ox.Calendar = function(options, self) { } function dragstart(event, e) { - if ($(e.target).is(':not(.OxLine > .OxDate)')) { + if ($(e.target).is(':not(.OxLine > .OxEvent)')) { self.drag = {x: e.clientX}; } } @@ -446,61 +455,67 @@ Ox.Calendar = function(options, self) { renderCalendar(); } - function formatDate(date) { - var isFullDays = Ox.formatDate(date.start, '%H:%M:%S') == '00:00:00' && - Ox.formatDate(date.stop, '%H:%M:%S') == '00:00:00', - isOneDay = isFullDays && date.stop - date.start == 86400000, // fixme: wrong, DST - isSameDay = Ox.formatDate(date.start, '%Y-%m-%d') == - Ox.formatDate(date.stop, '%Y-%m-%d'), - isSameYear = date.start.getFullYear() == date.stop.getFullYear(), + function formatEvent(event) { + var isFullDays = Ox.formatDate(event.start, '%H:%M:%S', true) == '00:00:00' && + Ox.formatDate(event.end, '%H:%M:%S', true) == '00:00:00', + isOneDay = isFullDays && event.end - event.start == 86400000, // fixme: wrong, DST + isSameDay = Ox.formatDate(event.start, '%Y-%m-%d', true) == + Ox.formatDate(event.end, '%Y-%m-%d', true), + isSameYear = event.start.getUTCFullYear() == event.end.getUTCFullYear(), timeFormat = isFullDays ? '' : ', %H:%M:%S', - str = Ox.formatDate(date.start, '%a, %b %e'); + str = Ox.formatDate(event.start, '%a, %b %e', true); if (isOneDay || isSameDay || !isSameYear) { - str += Ox.formatDate(date.start, ', %Y' + timeFormat); + str += Ox.formatDate(event.start, ', %Y' + timeFormat, true); } if (!isOneDay && !isSameDay) { - str += Ox.formatDate(date.stop, ' - %a, %b %e, %Y' + timeFormat); + str += Ox.formatDate(event.end, ' - %a, %b %e, %Y' + timeFormat, true); } if (isSameDay) { - str += Ox.formatDate(date.stop, ' - ' + timeFormat.replace(', ', '')); + str += Ox.formatDate(event.end, ' - ' + timeFormat.replace(', ', ''), true); } return str; } - function getCalendarDate() { + function getCalendarEvent() { var ms = self.options.width * getSecondsPerPixel() * 1000; return { start: new Date(+self.options.date - ms / 2), - stop: new Date(+self.options.date + ms / 2) + end: new Date(+self.options.date + ms / 2) }; } - function getDateByName(name) { - var date = {}; - Ox.forEach(self.options.dates, function(v) { - if (v.name == name) { - date = v; + function getEventById(id) { + var event = null; + Ox.forEach(self.options.events, function(v) { + if (v.id == id) { + event = v; return false; } }); - return date; + return event; } - function getDateElement(date, zoom) { - var left = getPosition(date.start, zoom), - width = Math.max(getPosition(date.stop, zoom) - left, 1); + function getEventElement(event, zoom) { + var left = getPosition(event.start, zoom), + width = Math.max(getPosition(event.end, zoom) - left, 1); return new Ox.Element() - .addClass('OxDate') + .addClass('OxEvent' + ( + event.id == self.options.selected ? ' OxSelected' : '' + )) .css({ left: left + 'px', width: width + 'px' }) .data({ - name: date.name + id: event.id }) - .html(' ' + date.name); + .html(' ' + event.name); } + function getEventElementById(id) { + + }; + function getMouseDate(e) { return new Date(+self.options.date + ( e.clientX - that.offset().left - self.options.width / 2 - 1 @@ -557,10 +572,10 @@ Ox.Calendar = function(options, self) { n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); Ox.loop(-n, n + 1, function(i) { $elements.push( - getDateElement({ + getEventElement({ name: unit.name(value + i), start: new Date(unit.date(value + i)), - stop: new Date(unit.date(value + i + 1)) + end: new Date(unit.date(value + i + 1)) }, zoom) .addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd') ); @@ -592,11 +607,11 @@ Ox.Calendar = function(options, self) { function mousemove(e) { var $target = $(e.target), - date, title; - if ($target.is('.OxLine > .OxDate')) { - date = getDateByName($target.data('name')); - title = '' + date.name + '
' + - formatDate(date); + event, title; + if ($target.is('.OxLine > .OxEvent')) { + event = getEventById($target.data('id')); + title = '' + event.name + '
' + + formatEvent(event); } else { title = Ox.formatDate(getMouseDate(e), '%a, %b %e, %Y, %H:%M:%S'); } @@ -630,20 +645,20 @@ Ox.Calendar = function(options, self) { }, 250); } - function overlaps(date0, date1) { + function overlaps(eventA, eventB) { return ( - date0.start >= date1.start && date0.start < date1.stop + eventA.start >= eventB.start && eventA.start < eventB.end ) || ( - date1.start >= date0.start && date1.start < date0.stop + eventB.start >= eventA.start && eventB.start < eventA.end ); } function renderCalendar() { $('.OxBackground').empty(); - $('.OxDate').remove(); + $('.OxEvent').remove(); renderBackground(); renderTimelines(); - renderDates(); + renderEvents(); self.$statusbar.html( Ox.formatDate(self.options.date, '%a, %b %e, %Y, %H:%M:%S (%s)', true) ); @@ -655,24 +670,24 @@ Ox.Calendar = function(options, self) { }); } - function renderDates() { - var calendarDate = getCalendarDate(); - lineDates = []; - self.options.dates.filter(function(date) { - // filter out dates outside the visible area - return overlaps(date, calendarDate); + function renderEvents() { + var calendarEvent = getCalendarEvent(); + lineEvents = []; + self.options.events.filter(function(event) { + // filter out events outside the visible area + return overlaps(event, calendarEvent); }).sort(function(a, b) { - // sort dates by duration, descending - return (b.stop - b.start) - (a.stop - a.start); - }).forEach(function(date, i) { - var line = lineDates.length; + // sort events by duration, descending + return (b.end - b.start) - (a.end - a.start); + }).forEach(function(event, i) { + var line = lineEvents.length; // traverse lines - Ox.forEach(lineDates, function(dates, line_) { + Ox.forEach(lineEvents, function(events, line_) { var fits = true; - // traverse dates in line - Ox.forEach(dates, function(date_) { + // traverse events in line + Ox.forEach(events, function(event_) { // if overlaps, check next line - if (overlaps(date, date_)) { + if (overlaps(event, event_)) { fits = false; return false; } @@ -682,24 +697,24 @@ Ox.Calendar = function(options, self) { return false; } }); - if (line == lineDates.length) { - lineDates[line] = []; + if (line == lineEvents.length) { + lineEvents[line] = []; } - lineDates[line].push(date); + lineEvents[line].push(event); }); $('.OxLine').remove(); - lineDates.forEach(function(dates, line) { + lineEvents.forEach(function(events, line) { var $line = new Ox.Element() .addClass('OxLine') .css({ top: ((line + 1) * 16) + 'px' }) .appendTo(self.$content); - dates.sort(function(a, b) { - // sort dates by start, ascending + events.sort(function(a, b) { + // sort events by start, ascending return a.start - b.start; - }).forEach(function(date) { - getDateElement(date).appendTo($line); + }).forEach(function(event) { + getEventElement(event).appendTo($line); }); }); } @@ -714,8 +729,21 @@ Ox.Calendar = function(options, self) { }); } + function selectEvent(id) { + } + function singleclick(event, e) { - if ($(e.target).is(':not(.OxLine > .OxDate)')) { + var $target = $(e.target), + id = $target.data('id'); + if ($target.is('.OxLine > .OxEvent')) { + self.options.selected = id; + self.$content.find('.OxSelected').removeClass('OxSelected'); + $target.addClass('OxSelected'); + // fixme: map event should also be 'select', not 'selectplace' + that.triggerEvent('select', { + id: id + }); + } else { self.options.date = getMouseDate(e); renderCalendar(); } diff --git a/source/Ox.UI/js/Calendar/Ox.CalendarDate.js b/source/Ox.UI/js/Calendar/Ox.CalendarDate.js index a1fe99ef..6a07b186 100644 --- a/source/Ox.UI/js/Calendar/Ox.CalendarDate.js +++ b/source/Ox.UI/js/Calendar/Ox.CalendarDate.js @@ -7,6 +7,7 @@ Ox.CalendarDate CalendarDate start start date stop stop date @*/ +// fixme: unused Ox.CalendarDate = function(options) { var self = {}, diff --git a/source/Ox.js b/source/Ox.js index a7371ca4..326cfdf7 100644 --- a/source/Ox.js +++ b/source/Ox.js @@ -1445,6 +1445,27 @@ Ox.makeYear = function(date, utc) { return Ox.isDate(date) ? Ox.getFullYear(date, utc) : parseInt(date); }; + +/*@ +Ox.parseDate(f) Takes a string ('YYYY-MM-DD HH:MM:SS') and returns a date + str string + utc If true, Date is UTC + > +Ox.parseDate('1970', true) + 0 +@*/ +Ox.parseDate = function(str, utc) { + var def = [, 1, 1, 0, 0, 0]; + val = /(\d+)-?(\d+)?-?(\d+)? ?(\d+)?:?(\d+)?:?(\d+)?/(str); + val.shift(); + val = val.map(function(v, i) { + return v || def[i]; + }); + val[1]--; + return utc + ? new Date(Date.UTC(val[0], val[1], val[2], val[3], val[4], val[5])) + : new Date(val[0], val[1], val[2], val[3], val[4], val[5]) +}; + //@ Ox.setDate Set the day of a date, optionally UTC // see Ox.setSeconds for source code //@ Ox.setDay Set the weekday of a date, optionally UTC