Custom hour of day label formatter

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Example",
+            "request": "launch",
+            "type": "dart",
+            "program": "example/lib/main.dart"
+        }
+    ]
+}

example/.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Flutter",
+            "request": "launch",
+            "type": "dart"
+        }
+    ]
+}

example/lib/main.dart

@@ -95,6 +95,12 @@ class _TimetableExampleState extends State<TimetableExample> {
         ],
       ),
       body: Timetable<BasicEvent>(
+        theme: TimetableThemeData(
+          hourTextStyle: TextStyle(fontSize: 9, color: Colors.blueGrey),
+          formatHour: (time) =>
+              '${time.hourOf12HourClock} ${time.hourOfDay > 11 ? "PM" : "AM"}',
+          hourColumnWidth: 40,
+        ),
         controller: _controller,
         onEventBackgroundTap: (start, isAllDay) {
           _showSnackBar('Background tapped $start is all day event $isAllDay');

lib/src/content/date_hours_painter.dart

@@ -8,13 +8,16 @@ class DateHoursPainter extends CustomPainter {
   DateHoursPainter({
     @required this.textStyle,
     @required this.textDirection,
+    String Function(LocalTime) formatHour,
   })  : assert(textStyle != null),
         assert(textDirection != null),
         _painters = [
           for (final h in innerDateHours)
             TextPainter(
               text: TextSpan(
-                text: _pattern.format(LocalTime(h, 0, 0)),
+                text: formatHour != null
+                    ? formatHour(LocalTime(h, 0, 0))
+                    : _pattern.format(LocalTime(h, 0, 0)),
                 style: textStyle,
               ),
               textDirection: textDirection,

lib/src/content/timetable_content.dart

@@ -38,7 +38,7 @@ class TimetableContent<E extends Event> extends StatelessWidget {
       child: Row(
         children: <Widget>[
           Container(
-            width: hourColumnWidth,
+            width: timetableTheme.hourColumnWidth ?? hourColumnWidth,
             padding: EdgeInsets.only(right: 12),
             child: CustomPaint(
               painter: DateHoursPainter(
@@ -47,6 +47,7 @@ class TimetableContent<E extends Event> extends StatelessWidget {
                       color: context.theme.disabledOnBackground,
                     ),
                 textDirection: context.directionality,
+                formatHour: timetableTheme.formatHour,
               ),
               size: Size.infinite,
             ),

lib/src/header/timetable_header.dart

@@ -36,7 +36,7 @@ class TimetableHeader<E extends Event> extends StatelessWidget {
     return Row(
       children: <Widget>[
         SizedBox(
-          width: hourColumnWidth,
+          width: context?.timetableTheme?.hourColumnWidth ?? hourColumnWidth,
           child: ValueListenableBuilder<LocalDate>(
             valueListenable: controller.dateListenable,
             builder: (context, date, _) {

lib/src/theme.dart

@@ -20,6 +20,8 @@ class TimetableThemeData {
     this.dateIndicatorTextStyle,
     this.allDayEventHeight,
     this.hourTextStyle,
+    this.hourColumnWidth,
+    this.formatHour,
     this.timeIndicatorColor,
     this.dividerColor,
     this.minimumHourHeight,
@@ -106,6 +108,14 @@ class TimetableThemeData {
   /// [TextStyle] used to display the hours of the day.
   final TextStyle hourTextStyle;
 
+  /// Width of hour of day column
+  ///
+  /// Default to 48
+  final double hourColumnWidth;
+
+  /// [HourFormatter] used to format the hours of the day string.
+  final HourFormatter formatHour;
+
   /// [Color] for painting the current time indicator.
   final Color timeIndicatorColor;
 
@@ -177,6 +187,8 @@ class TimetableThemeData {
       dateIndicatorTextStyle,
       allDayEventHeight,
       hourTextStyle,
+      hourColumnWidth,
+      formatHour,
       timeIndicatorColor,
       dividerColor,
       minimumHourHeight,
@@ -273,3 +285,5 @@ extension TimetableThemeBuildContext on BuildContext {
   /// Shortcut for `TimetableTheme.of(context)`.
   TimetableThemeData get timetableTheme => TimetableTheme.of(this);
 }
+
+typedef HourFormatter = String Function(LocalTime time);

test/content/date_hours_painter_test.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/painting.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:timetable/src/content/date_hours_painter.dart';
+
+void main() {
+  testWidgets('Format hour', (tester) async {
+    final painter = DateHoursPainter(
+        textDirection: TextDirection.ltr, textStyle: TextStyle());
+    await tester.pumpWidget(CustomPaint(painter: painter));
+    // find.text('01:00') does not work with text painters :(
+  });
+  testWidgets('Custom hour format', (tester) async {
+    final painter = DateHoursPainter(
+      textDirection: TextDirection.ltr,
+      textStyle: TextStyle(),
+      formatHour: (x) => '${x.hourOfDay}',
+    );
+    await tester.pumpWidget(CustomPaint(painter: painter));
+  });
+}

test/theme_test.dart

@@ -0,0 +1,15 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:time_machine/time_machine.dart';
+import 'package:timetable/timetable.dart';
+
+void main() {
+  test('formatHour is null by default', () {
+    final theme = TimetableThemeData();
+    expect(theme.formatHour, isNull);
+  });
+  test('format hour', () {
+    final theme = TimetableThemeData(formatHour: (time) => '${time.hourOfDay}');
+    final hourString = theme.formatHour(LocalTime(9, 42, 00));
+    expect(hourString, '9');
+  });
+}