Syncfusion Calendar is not showing the first time interval

Question

I'm using the syncfusion_flutter_calendar, and on the Day view I'm showing a time range 7am - 5pm. My problem is that the first time (7:00AM) is not showing, instead what I see is 7:30AM.

Here is my code:

SfCalendar(
  //dataSource: MeetingDataSource(_getDataSource()),
  allowedViews: const [CalendarView.day],
  timeSlotViewSettings: const TimeSlotViewSettings(
    startHour: 7.0,
    endHour: 17.0,
    timeInterval: Duration(minutes: 30),
    timeFormat: 'h:mm a',
  ),
)

I've tried to reduce the startHour by 30 minutes, but the visual is not exactly what I want (there is one extra row on top), in addition users can create appointments starting at 6:30AM.

Any help how to show the first time, will be appreciated.

Answer 1

There is no direct support to achieve your requirement that shows the starting time in the view. However, you can achieve this with the help of the time specialRegions property in the SfCalendar. Here, we set the startHour as 6 in timeSlotViewSettings and add the time region from 6 to 7 as a special region, and disable the interaction in that special region with the help of enablePointerInteraction.

I have shared the screenshot and code snippet below for your reference. We hope it will help you to achieve your requirements.

Code snippet:

DateTime initialDate = DateTime.fromMillisecondsSinceEpoch(1);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
            child: SfCalendar(
          allowedViews: const [CalendarView.day],
          specialRegions: [
            TimeRegion(
              startTime: DateTime(
                  initialDate.year, initialDate.month, initialDate.day, 06, 00),
              endTime: DateTime(
                  initialDate.year, initialDate.month, initialDate.day, 07, 00),
              recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
              enablePointerInteraction: false,
              color: Colors.grey.withOpacity(0.2),
            )
          ],
          timeSlotViewSettings: const TimeSlotViewSettings(
            startHour: 6.0,
            endHour: 17.0,
            timeInterval: Duration(minutes: 30),
            timeFormat: 'h:mm ',
          ),
        )),
      ),
    );
  }