Hybrid Calendar: PowerScript controls a modern user interface

A portable demo that combines local events, offline work, and optional Google Calendar synchronization while PowerBuilder remains in charge of business rules, authentication, and user actions

The HTML interface does not replace PowerBuilder. WebView2 displays the calendar and captures interaction; PowerScript receives JSON messages, runs the application logic, and sends confirmed results back to the scheduler.

What the project demonstrates

PB Hybrid Calendar Studio provides month, week, day, and agenda views inside the WebView2-based WebBrowser control. Users can search, filter, create, edit, duplicate, and delete events, distinguish their source through color, and open a contextual detail panel without leaving the main PowerBuilder window.

The demo supports two operating paths. Local events can be stored in a portable SQLite database and remain available without an Internet connection. When connected, nvo_google_calendario uses OAuth 2.0 and Google Calendar API v3 to read and modify the primary calendar. The hybrid view combines both sources and exposes pending, synchronized, and conflict states.

From the calendar to PowerBuilder

Each scheduler card has an ID. A single click opens the detail panel; a double-click calls mostrarEventoPowerBuilder, which posts the title and time through window.chrome.webview.postMessage.

function mostrarEventoPowerBuilder(id) {
const eventItem = estado.eventos.find(item => item.id === id);
if (!eventItem) return;
enviarPB({
evento: "mostrarEventoPowerBuilder",
id: eventItem.id,
titulo: eventItem.titulo,
hora: eventItem.hora
});
}

The window's webmessagereceived event passes webmessage to of_procesar_mensaje. PowerBuilder uses JsonParser, recognizes the contract, and delegates the result to of_mostrar_evento_calendario.

Case "mostrarEventoPowerBuilder"
ls_valor = lnv_json.GetItemString(ll_raiz, "titulo")
ls_hora = lnv_json.GetItemString(ll_raiz, "hora")
of_mostrar_evento_calendario(ls_valor, ls_hora)

The function builds a short message and opens a native MessageBox. This proves that a visual HTML action can trigger PowerBuilder windows, NVOs, transactions, DataWindows, or any other application service.

From PowerScript to the calendar

Communication also works in the opposite direction. The Crear evento local and Crear evento Google buttons send a command to the window. PowerBuilder generates a title containing the current time, creates the event contract, and runs JavaScript through EvaluateJavascriptAsync.

ls_titulo = of_generar_titulo_evento("LOCAL")
Return of_agregar_evento_web(
ls_titulo, "LOCAL", "local", "#18b8ff")

of_agregar_evento_web prepares the date, time, ID, source, color, and description. It then invokes window.calendarioPB.agregarEventoPowerBuilder(...). JavaScript adds the event, changes the visible date, and renders the calendar again.

Creating a real Google Calendar event

of_crear_evento_google_powerbuilder checks inv_google.of_esta_conectado(). If no token is available, it displays a native warning and stops. When connected, PowerScript generates the title and nvo_google_calendario.of_crear_evento_google builds RFC 3339 dates, a UTF-8 JSON payload, and an Events.insert request.

Edit, duplicate, and delete follow the same principle: the scheduler sends an intention; PowerBuilder performs PATCH, POST, or DELETE; and the visible state changes only after a successful response.

Local creation and editing

The web form collects the values, calculates the end time, and creates a contract whose source is LOCAL. In a complete installation this contract is persisted in SQLite and remains available offline. The Pendiente and Sincronizado states support an offline queue that can publish changes later.

SQLite keeps the demo portable: the database can travel as pb_hybrid_calendar.db in the application root without requiring a corporate server. PowerBuilder remains responsible for opening the database, validating transactions, and sending WebView2 only the JSON needed for the visible range.

How to obtain Google credentials

The connection requires an OAuth 2.0 client, not a Gmail password. The current Google Cloud process is:

1. Create or select a project in Google Cloud Console.
2. Open APIs & Services → Library, find Google Calendar API, and click Enable.
3. Under Google Auth platform, configure Branding, Audience, and Data Access. For an external test, add the Google account used by the demo as a test user.
4. Open Google Auth platform → Clients, click Create Client, and choose Desktop app.
5. Copy the Client ID and Client Secret. Do not publish them or commit them to source control.

Official references: enable Google Workspace APIs, create OAuth credentials, and choose Google Calendar scopes.

Connecting the demo to Google

1. Click the Google button in the top bar.
2. Paste the Client ID and Client Secret. Keep the redirect URI shown by the demo and the www.googleapis.com/auth/calendar.events scope.
3. Click Guardar credenciales. The NVO stores the portable configuration; the secret is not sent back to JavaScript when the form is reopened.
4. Click Abrir autorización, select the account, and accept the requested permission.
5. Paste the returned code or redirect URL into Código de autorización, then click Conectar cuenta.
6. Finally, click Sincronizar. PowerBuilder retrieves the primary calendar and sends the JSON response to the scheduler.

Complete synchronization flow

How to test the demo

1. Run the application and confirm that the monthly view displays local events.
2. Click Crear evento local and verify that its title contains the time generated by PowerScript.
3. Double-click the event and confirm that PowerBuilder displays its name and time in a MessageBox.
4. Open an event with one click and test Edit, Duplicate, and Delete.
5. Configure OAuth, connect a test account, and click Crear evento Google.
6. Open Google Calendar and verify that the event exists in the primary calendar.
7. Click Sincronizar and confirm that remote events are combined with local events.

Conclusion

PB Hybrid Calendar Studio demonstrates a practical and reusable integration. HTML, CSS, and JavaScript provide a fluid visual experience; PowerBuilder retains the business logic, security, persistence, and enterprise interoperability. Bidirectional communication turns every scheduler interaction into a possible PowerScript action and allows any PowerBuilder function to update the interface without reopening the window.

The result is a calendar that can begin as a fully local SQLite application and evolve into a hybrid Google Calendar experience without abandoning the architecture and capabilities of PowerBuilder 2025 R2.

Luis Avilan