early in 2018: as the date suggests, pretty old stuff – V12. Still a convincing UI …

Check the V2-version of the 4d-plugin-ical by Keisuke Miyako

15. Juli 2011

DE_flag GB_flag

for english readers

DBZ-Kalender

Die Kalender-Komponente für MacOSX und 4D V12.

Das Design von Agenda fürs iPhone hat mich überzeugt. Video bei TUAW ansehen lernt sich's am schnellsten. Vergleichbares will ich für meine 4D Anwendungen haben. Vollständig übernehmen geht nicht, aber die Idee zum User-Interface ist Klasse. Meinen rip-off habe ich jetzt laufen.

Wie in Agenda werden die Kalenderdaten frisch aus iCal gelesen. Dazu verwende ich das iCal-Plugin von Keisuke Miyako (immer die neueste Version verwenden).

halbJahr

Das Halbjahr

Erste Ansicht ist die Übersicht des aktuellen Halbjahres.

Auf dem iPhone ist die Navigation eine mit dem Daumen und falls man lieber Pfeile klickt, kann man das tun. Die Wahl haben wir in 4D nicht. Die Pfeile links und rechts haben die gleiche Funktion wie auf dem iPhone, nach links eine Ebene höher, nach rechts stärker ins Detail.

Nach oben und unten wechselt man zum vorhergehenden oder zum nachfolgenden Halbjahr, Monat, Tag. Auf dem iPhone fehlen diese Pfeile, dort klappt dieser Wechsel nur mit dem Daumen.

Für meinen Komfort habe ich einen Heute-Button eingefügt, das ist das Ziel zwischen den Auf- und Ab-Pfeilen.

Der aktuelle Tag ist rot eingefärbt und die Woche grau hinterlegt.

Klickt man einen Monat an, so wird zu diesem gewechselt. Als Rückmeldung, welchen man anklickt, wird ein Rahmen um den Monat gezeichnet.

monat

Der Monat

Die Ansicht entspricht der aus dem Halbjahr. Die Darstellung ist sehr an die klassischen Tischkalender angelehnt. Jeden Tag wird ein Blatt nach links bewegt.

Die wichtigsten Daten sind gut zu lesen, kein Schnickschnack, keine Werbung, kaum Farbe. Reicht!

Auch hier wechselt man nach oben in vorgegangene Monate und nach unten in folgende.

Der aktuelle Tag ist rot hervorgehoben.

Ja, die Termine über den Tagen als farbige Punkte darzustellen ist machbar. Die Performance dieser Darstellung ist nicht zufriedenstellend.

Klickt man einen Tag an, wird zu diesem in der Liste gewechselt. Beim Wechsel werden die Termine aus iCal ausgelesen und die ersten 3 Termine dargestellt.

Nein, das sind keine 42 Buttons oder Bilder. Überhaupt, ohne V12 wäre der Kalender nicht so elegant zu realisieren gewesen.

tagListe

Tage-Liste

Der aktuelle Tag ist grau hinterlegt.

Für jeden Tag wird der Wochentag und die Tagesnummer angezeigt. In dieser Liste reicht es zur Anzeiger dreier Termine. Jeweils Uhrzeit oder ganztägig und der Titel des Termins. Der Monat und das Jahr des ersten vollständig dargestellten Tages wird angezeigt.

Auch hier bewegen die Pfeile die Liste nach unten zu den folgenden Tagen und nach oben zu den vorangegangenen.

Klickt man einen Tag an, wechselt die Ansicht zur Tagesansicht.

Ein Tag

Auf dem klassischen Kalender trüge man auf der rechten Seite mit einem Stift die Termine dieses Tages ein.

Hier kommen die Termine aus iCal. Die Kalenderfarbe wird verwendet, die Uhrzeit bzw. ganztägig, der Titel des Termins und der Ort.

tag

Zur Übersicht sind Monat, Wochtentag und Tagesnummer hervorgehoben.

Ein Termin

tag

Nur ein Termin und dann per ↑ und ↓ durchblättern, endlos wie auf einem Karussel.

4D Technik

Ohne die Erweiterung der Leistung von Unterformularen, sprich eingebundene Formulare der V12, wäre mir der Kalender zu viel Arbeit und zu pottenhässlich geworden. Es gibt den kleinen Monat nur einmal, im Halbjahr wird er sechsmal dargestellt, im Tag nur einmal. Dito die Tagesliste. Auch hier werden sechs Instanzen eines Formulares verwendet.

Keisuke Miyako ist der japanische TM. Seine Arbeiten sind erstklassig. Auch hier wäre ohne seine Vorarbeit, keine Lösung möglich gewesen.

Komponente

Ich habe den Kalender als Komponente konzipiert. Es ist ein Kalender-Widget. Das Formular auf das eigenen Layout plazieren, eine Text-Variable zuweisen und diese mit einem Datumswert aus Jahr und Monat nach dem Muster YYYYMM befüllen.

Testen

testerDB

In der zum Ausprobieren eingerichteten Test-Datenbank, wird die Komponente in beiden Nutzungsarten dargestellt:

  • als Element im Formular der Matix-Datenbank und
  • solo, in ihrem eigenen Fenster.
Als Element im Formular der Matrix-Datenbank reagiert DBZ-Kalender auf den Wert der dem Formularobjekt zugewiesenen Variablen. Dieser Variablen-Wert errechnet sich aus dem ausgewählten Jahr (YYYY) plus dem Monat (MM). Die zweite Instanz reagiert auf ein eingegebenes Tages-Datum.
Solo, im eigenen Fenster, beginnt DBZ-Kalender mit dem aktuellen Datum.

infomettre

Aktuelle Version

  • Version: 152
  • Datum: 26.12.12
  • Zeit: 11:30:32
  • erstellt: O. Zillgen

Version vom 19.8.2011: Test-Datenbank laden.

kreditKarte

Unlizensiert legt die Komponente keine Termine an und kann keine editieren. Lizensieren können Sie aus der Anwendung oder hier.

Sourcecode kaufen

DE_flag GB_flag

lieber auf deutsch

DBZ-Calendar

The Calendar-Component for MacOSX and 4D V12.

When I first saw Agenda for iPhone the clean design struck me. Get a first impression from the Video at TUAW . My implementation for 4D should be similiar both in look and feel. Now my rip-off does it's first steps.

Like with Agenda all information is a fresh read from the iCal data. I use the iCal-Plugin of Keisuke Miyako to manage access (go and get the current version).

halbJahr

Half a year

This is the first display, 6 months either first half or second half of the year.

On the iPhone you thumb through or use the arrows. We don't have that choice in 4D. Left and right arrows function as on the iPhone. To the left one level up, to the right deeper into detail.

Up and down changes to the previous and next half-year, month, or day. Those arrows are missing from the iPhone-app, up and down directions is thumbs only.

For my convienience I've added a today-button, that's the target between the up- and down-arrows.

The current day is red and the current week is highlighted.

Clicking on a month, choses this one. A roundrect highlights the selected month.

monat

A month

Same layout as a single month of the half-year display. You might be remembered to those classic desktop calendars. Every day one sheet is moved to the left.

The important information is easy to read, nothing disturbing, hardly some color, no adds. That's perfect!

Same again: up for the previous month, down for the next one.

Today is red.

No, this is not 42 buttons nor pictures. This is truely using V12-features.

The code could display the colored dots to give an idea how occupied the month is. But the performance is not sufficient, yet.

Clicking on a day moves to this day plus the day before and a couple of following days. Up to 3 events per day are listed.

tagListe

Day list view

Today has a grey background.

Every day in the list shows the weekday and the daynumber. Up to 3 events per day are listed, each with starting-time or allday and the title. Month and year of the firstcompletely shown day are superimposed at the top.

Same again: scrolling is done with the arrows - either on screen or the correspondend arrows on the keyboard.

Clicking a day, displays this day only.

One day

Resembling the classic desktop-calendar: this is the page where you note your events.

tag

You see here the events from iCal. The calendar-color is shown, starting-time of the event, the title and the location.

For convenience month, weekday and daynumber are displayed.

tag

Single Event

Select a single event by clicking on that. You might move from event to event of the day per ↑ and ↓ - works as on a carousel.

4D technique

Without those new kind of subforms new to V12, I could never have achieved something similiar and nice to look at. And it saved quite a lot of work. The small month display is a unique form used six times in half-year display and once in one day display. The day-list is six instances of a single-day form.

Keisuke Miyako is the japanese TM, if you know who I mean. His contributions are firstclass. Without him coding the iCal-plugin I couldn't have achieved that.

Component

This 4D-app is a component, actually a calendar-widget. All you need to do is placing the included form on your layout, attach a textvariable, fill the variable with a date consisting of year and month in this form YYYYMM.

Or attach a date to the included form. Then the widget starts in day-list view.

Test

testerDB

To test the component I created a 4D app. That app uses the component in both kinds:

  • as form-element of a matrix-database form and
  • solo, in its own window.
As form-element of a matrix-database, the component reacts to the variable attached to the form-element. To change the content of the variable select year or month from the popups. The second instance of the component is atached to a date-variable and reacts on a entered date.
Solo, in its own window, DBZ-Kalender starts with the current date.

infomettre

Current Version

  • Version: 152
  • Datum: 26.12.12
  • Zeit: 11:30:32
  • erstellt: O. Zillgen

Version of Aug 19 2011: Load Test-DB.

Buy the sourcecode

kreditKarte

Without license the component will not add or modify events. You get a license here.