Analog-Digital Clock

The Analog Digital Clock (ADC Block) module provides a highly flexible time display solution for Drupal. It allows site builders to place configurable analog and digital clock blocks across various regions with robust timezone support and deep customization options. By leveraging both HTML5 Canvas and SVG technologies, it ensures high-performance, real-time updates that are responsive and visually consistent across all modern devices.

Features

• Analog Clock Block: A canvas-based implementation with customizable hands, colors, and shadow effects.
• Digital Clock Block: A real-time digital interface featuring versatile date display and formatting options.
• SVG Variants: High-fidelity SVG-based implementations for both analog and digital clocks, perfect for high-density displays.
• Pre-built Layouts: Seven professionally designed presets for rapid deployment, plus a "Custom" mode for full creative control.
• Advanced Timezone Support: Display time based on the System timezone, the visitor's Local browser timezone, or a specific global region.
• Responsive Design: Built-in styling that ensures clocks scale seamlessly across smartphones, tablets, and desktops.

Installation

Install as you would any standard contributed Drupal module. For best results, use Composer to manage dependencies.

composer require drupal/adc_block

Enable the module using Drush:

drush en adc_block

Configuration & Usage

Once enabled, clocks are managed through the standard Drupal block system:

1. Navigate to Structure » Block layout.
2. Click Place block in your desired region (e.g., Sidebar or Header).
3. Search for "Analog Clock" or "Digital Clock" and click Place block.
4. In the configuration modal, define your Regional Settings (Timezone) and Layout Settings.
5. If using the Analog clock, choose from one of the pre-built layouts or select Custom to unlock individual hand, border, and tick mark colors.
6. Save the block to initialize the real-time JavaScript updates.

Theming & API

Developers can override the look and feel by copying the provided Twig templates into their theme:

• analog-clock.html.twig
• digital-clock.html.twig
• svg-clock-analog-dynamic.html.twig
• svg-clock-digital-dynamic.html.twig

To add custom layout options programmatically, you can utilize the provided alter hook: hook_adc_block_layout_options_alter().

Requirements

This module requires Drupal Core 10 or 11 and the core Block module. No external third-party JavaScript libraries are required, as all clock logic is handled by native browser APIs.

Troubleshooting

If the clock is not appearing or updating:

• Clear your Drupal cache using drush cr.
• Ensure your browser console is free of JavaScript conflicts from other modules.
• Check that CSS/JS Aggregation is configured correctly under Configuration » Performance.

Maintainers

Maintained by Sujan Shrestha.

Support

If you find this module useful, please consider reporting bugs or submitting feature requests in the Issue Queue.