Add extended timeLine in DayView

[Sragarwal1912]

In WeekView, I am not able to add an extended line to indicate hour correctly but for DayView I can see some indication in TimeLine.
Is there any way to achieve same for WeekView, Anyone please help.

[lavigarg-simform]

Hi @Sragarwal1912, thanks for raising the issue!

Yes, this is possible in WeekView as well.

You can achieve this using these three properties:

• emulateVerticalOffsetBy: controls how far the hour line extends into the time column
• timeLineWidth: adds more space for the time column
• timeLineBuilder: lets you reposition the time labels so they do not overlap the extended line

A working setup is:

WeekView(
  timeLineBuilder: (date) => _timeLineBuilder(date, isLtr),
  timeLineWidth: 90,
  emulateVerticalOffsetBy: -10,
  hourIndicatorSettings: HourIndicatorSettings(
    color: Theme.of(context).dividerColor,
    offset: 0,
  ),
)

And you can adjust the time label position like this:

Widget _timeLineBuilder(DateTime date, bool isLtr) {
  if (date.minute != 0) {
    return const SizedBox.shrink();
  }

  final hour = ((date.hour - 1) % 12) + 1;

  return Stack(
    clipBehavior: Clip.none,
    children: [
      Positioned.fill(
        top: -8,
        right: isLtr ? 18 : 8,
        left: isLtr ? 8 : 18,
        child: Text(
          "${PackageStrings.localizeNumber(hour)} "
          "${date.hour ~/ 12 == 0 ? PackageStrings.currentLocale.am : PackageStrings.currentLocale.pm}",
          textAlign: isLtr ? TextAlign.right : TextAlign.left,
        ),
      ),
    ],
  );
}

This should give you the same visual result in WeekView.

Let me know if this resolved your issue. Thanks!